百度地图自定义标注样式

实现效果图

标注样式的自定义

// 百度地图marker样式
let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.png'), new BMap.Size(20, 60), {//当标注显示在地图上时，其所指向的地理位置距离图标左上角各偏移10像素和36像素anchor: new BMap.Size(10, 36),// 设置图片偏移,类似于剪切图片的功能imageOffset: new BMap.Size(0, 0)
})

通过new BMap.Size(20, 60)来限定标注的尺寸，这里我的标注是竖直的，我定义标注的宽度20px，高度60px，实际上我只用到来宽度来限制标注的尺寸，这里标注的宽度就是20px，由于高度60px比标注实际的高度要大，所以并不起作用

这里需要注意的地方就是
require('../src/assets/nationMap/marker1.png')
图片在Vue中需要用到require来获取

自己对于imageOffset: new BMap.Size(0, 0)的理解，当你的图片是一个大图的时候，意思就是说当你使用含有多个标注点样式的大图时，但是我们需要的只有一个标注点样式，这个时候我们就要用到剪切，imageOffset: new BMap.Size(100, 100)确定了剪切点的左上方的坐标，比如imageOffset: new BMap.Size(100, 100)对应于图片中就是margin-left:100px和margin-top:100px

添加标注

// 添加单个标注
// icon: this.GLOBAL.icon1，这里面的this.GLOBAL.icon1就是上面自己定义的标注样式markerFun: function (map, point) {let marker = new BMap.Marker(point, {icon: this.GLOBAL.icon1})map.addOverlay(marker)},// 添加多个标注multMarker: function () {for (let i = 0; i < this.siteList.length; i++) {// 创建坐标点let points = new BMap.Point(this.siteList[i].position.lng, this.siteList[i].position.lat)this.markerFun(this.GLOBAL.map, points)}}

百度地图自定义标注样式相关推荐

地图标注源码 php,jQuery百度地图自定义标注信息代码
jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...
百度地图自定义标注点
百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...
百度地图 --- 自定义标注点
例子 – 百度地图 api 示例百度地图标注 api 地址思路优先引入script 百度地图对应的 api,下方源码是js引入,想用在其他项目方法类似. 在 script 标签里写逻辑,在地图上 ...
iOS中设置百度地图自定义标注图片，自定义泡泡
#pragma mark - BMKMapViewDelegate // 根据anntation生成对应的View - (BMKAnnotationView *)mapView:(BMKMapView ...
android 百度地图自定义地图标注,百度地图自定义标注
步骤:① 定义构造函数并继承Overlay,通过构造函数参数可以传递一些自由的变量.设置自定义覆盖物对象的prototype属性为Overlay的实例,以便继承覆盖物基类. functionCompl ...
百度地图自定义结果面板+分页+图层标注(标注点+搜索)
百度地图自定义结果面板+分页+图层标注(标注点+搜索) 示例一: <html> <head><meta http-equiv="Content-Type&qu ...
百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...
百度地图自定义吹出框
2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...

百度地图自定义标注样式

实现效果图

标注样式的自定义

添加标注

百度地图自定义标注样式相关推荐

最新文章

热门文章