百度账号注册和百度地图api引入可根据百度地图官方文档操作。
在使用过程中发现已知经纬度坐标是火星坐标，高德地图使用的正好是火星坐标，但又不想改用高德地图，因此将火星坐标转换成了百度坐标。最后根据设备状态实现了一个简单的自定义控件。
- 代码如下：
// 展示地图，将设备所在位置标注在地图中
showMap(re) {
this.setState({mapShow: true})
let {bmap_animation_bounce} = this.state // 标识地图中标注点弹跳动画是否开启
let points = re.device_info // 备信息对象数组
let region = re.region // 区域名称
let level = 10 // 地图级别
let map = new BMap.Map('allmap') // 创建Map实例
map.centerAndZoom(region, level) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})
var top_left_navigation = new BMap.NavigationControl()
map.addControl(top_left_control) // 左上角，添加比例尺
map.addControl(top_left_navigation) // 左上角，添加默认缩放平移控件
var overView = new BMap.OverviewMapControl()
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})
map.addControl(overView) // 添加默认缩略地图控件
map.addControl(overViewOpen) // 右下角，打开
// 地图中添加标注相关
this.showDeviceInfo(points, map, bmap_animation_bounce)
// 得到自定义控件
var myCtrl = this.myZoomControl(points, map, bmap_animation_bounce)
// 添加自定义控件到地图当中
map.addControl(myCtrl)
}
// 自定义地图控件
myZoomControl(points, map, bmap_animation_bounce) {
let self = this
// 自定义控件类，即function
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT
this.defaultOffset = new BMap.Size(60, 60)
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control()
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement('div')
// 添加文字说明
div.appendChild(document.createTextNode('清除在线设备弹跳动画'))
// 设置控件样式
div.style.padding = '3px 6px'
div.style.cursor = "pointer"
div.style.border = "1px solid gray"
div.style.backgroundColor = "white"
// 绑定事件,点击控件开启/关闭标注跳动的动画
div.onclick = function(e) {
bmap_animation_bounce = !bmap_animation_bounce
div.innerText = bmap_animation_bounce ? '清除在线设备弹跳动画' : '显示在线设备弹跳动画'
self.setState({bmap_animation_bounce})
map.clearOverlays()
self.showDeviceInfo(points, map, bmap_animation_bounce)
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div)
// 将DOM元素返回
return div
}
// 创建控件
var myZoomCtrl = new ZoomControl();
return myZoomCtrl
}
// 地图中添加标注及点击标注时的注信息窗口
showDeviceInfo(points, map, bmap_animation_bounce) {
let opt = {
width: 0, // 信息窗口宽度
height: 0, // 信息窗口高度
}
for(let i=0,pointsLen=points.length; i<pointsLen; i++) {
// 通过调用自定义方法将高德坐标转为百度坐标
let bd_point = this.bd_encrypt(points[i].lng, points[i].lat)
let point = new BMap.Point(bd_point.bd_lng, bd_point.bd_lat)
let marker = new BMap.Marker(point) // 创建标注
// 将标注添加到地图中
map.addOverlay(marker)
// 如果设备在线且弹跳动画开关开启，则给标注设置弹跳动画
if(points[i].online && bmap_animation_bounce) {
marker.setAnimation(BMAP_ANIMATION_BOUNCE) // 跳动的动画
}
// 标注事件监听：点击标注，在信息窗口中显示设备信息
marker.addEventListener('click', function(e) {
let content = 'IMEI：'+points[i].imei+'<br />'
+'设备编号：'+points[i].device_id+'<br />'
+'信号值：'+points[i].signal+'<br />'
+'状态：'+(points[i].online ? '在线' : '离线') + '<br />'
let p = e.target
let po = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
// 创建信息窗口对象
let infoWindow = new BMap.InfoWindow(content, opt)
// 开启信息窗口
map.openInfoWindow(infoWindow, po)
})
}
}
// 火星(高德)坐标转百度坐标
bd_encrypt(gg_lng, gg_lat) {
let X_PI = Math.PI * 3000.0 / 180.0
let x = gg_lng, y = gg_lat
let z = Math.sqrt(x * x + y * y) + 0.000002 * Math.sin(y * X_PI)
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI)
let bd_lng = z * Math.cos(theta) + 0.0065
let bd_lat = z * Math.sin(theta) + 0.006
return {bd_lng, bd_lat}
}
-
最终效果：111.gif
