关于百度地图打点的自定义图标，以及不同条件打不同的点

比如像这种关于百度地图打点的自定义图标，以及不同条件打不同的点在地图上按照条件的不同显示不同的点，同时将一些重要数据显示在点上面，图片我用的是gif图片这样会有个动画效果，上面的数字是采取的是百度地图的添加文字标签，在鼠标移动上去的时候会有个窗口显示其详细信息，相当于一个弹窗，在滚轮放大到11级别时，会显示这个市的具体信息，比如这个关于百度地图打点的自定义图标，以及不同条件打不同的点这里就涉及到一个事件，鼠标监控地图级别，调用不同接口，同时需要清除上一个级别的marker点，然后再进行打点，鼠标移动上去的时候也会显示改点的详细信息。

下面引用一些关键代码

import pro from './pro.gif'

import warn from './warn.gif'

这个是引用点的图标

var proIcon = new BMap.Icon(pro, new BMap.Size(30, 30))

var warnIcon = new BMap.Icon(warn, new BMap.Size(30, 30))

在数组遍历的时候

var point = new BMap.Point(val.longitude, val.latitude)

maker = new BMap.Marker(point, { icon: Icon })

this.map.addOverlay(maker)

其中的Icon根据数组返回的某个参数来确定是proIcon还是warnIcon

var label = new BMap.Label(val.orgProjectWarnCount, { offset: new BMap.Size(9, 6) })

label.setStyle({

color: '#ffffff',

fontSize: '16px',

backgroundColor: '0.05',

border: '0'

})

maker.setLabel(label)

这个是给其加上文字标签，如图中的数字一

maker.addEventListener('mouseover', function() {

this.openInfoWindow(new BMap.InfoWindow(steelContent, steelOpts))

})

maker.addEventListener('mouseout', function() {

this.closeInfoWindow()

})

鼠标应接移入移出的时候，显示出改点的详细信息，其中steelContent是拼接的详细信息字符串，steelOpts是该点的经纬度

resizeMap() {

var $this = this

this.map.addEventListener('zoomend', function() {

console.log($this.map.getViewport().zoom)

$this.zoomLevel = $this.map.getViewport().zoom

// 11

})

这个是地图的级别缩放事件，可以通过监听zoomLevel 来调用不同的接口，在级别大于某个值的时候，显示该区的详细信息，打点与弹框就与上面的操作基本一致了，嗯嗯嗯，思路就基本到这了，代码就不贴了，其实蛮简单的，对照百度地图api，基本上很快就能弄出来，闲着无事就当做个笔记啦

关于百度地图打点的自定义图标，以及不同条件打不同的点

相关推荐