在做青島的項目時,有很多企業需要定位,但是發現部分沿海的地區定位到海上了,才發現定位不准的問題。
本人踩坑點,包括了每次加載都打亂了坐標點的信息,和定位不准問題。
解決如下:注意轉換方法convertor.translate對應的參數(其中的1和5)是以下意思。我當時復制過來調用的3和5,所以定位不准,得看你是需要用哪種坐標轉換哪種。
/**
* 坐標常量說明:
* COORDINATES_WGS84 = 1, WGS84坐標
* COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐標
* COORDINATES_GCJ02 = 3,GCJ02坐標
* COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐標
* COORDINATES_BD09 = 5, 百度bd09經緯度坐標
* COORDINATES_BD09_MC = 6,百度bd09墨卡托坐標
* COORDINATES_MAPBAR = 7,mapbar地圖坐標
* COORDINATES_51 = 8,51地圖坐標
*/
// dtu坐標點
loadDtuOneMap() {
this.pointDtuArr.forEach((item, index) => {
if (item.latitude && item.longitude) {
// 坐標點轉換
let that = this
let pointArr = [];
let pt = new this.BMap.Point(item.longitude, item.latitude)
pointArr.push(pt);
var convertor = new this.BMap.Convertor();
convertor.translate(pointArr, 1, 5, function (data) {
that.pointDtuArr[index].longitude = data.points[0].lng
that.pointDtuArr[index].latitude = data.points[0].lat
if (index == (that.pointDtuArr.length - 1)) {
that.startDtu()
}
})
}
})
},
//創建dtu圖標
startDtu() {
this.pointDtuArr.forEach((item, index) => {
if (item.latitude && item.longitude) {
let pt = new this.BMap.Point(item.longitude, item.latitude)
// 坐標點
var myIcon = new this.BMap.Icon(item.state == 1 ? this.dtuMarkerActiveUrl : this
.dtuMarkerUrl, new this.BMap.Size(33, 33))
myIcon.setImageSize(new this.BMap.Size(33, 33))
// 創建標注點
var marker = new this.BMap.Marker(pt, {
icon: myIcon
})
this.marker3.push(marker)
// 創建信息窗口對象
let infoWindow = new this.BMap.InfoWindow(
`<div style="line-height:28px;">
<p style="font-size:18px;padding-bottom:5px;border-bottom:1px solid #ccc;color:#333;">${item.unitName}</p>
<p style="font-weight:700;color:#000;margin-top:10px;">dtu編號:<span style="color:#666;">${item.dtuid}</span></p>
<p style="font-weight:700;color:#000;">在線情況:<span style="color:${item.state==1?'#009900':'#990000'};">${item.state==1?'在線':'離線'}</span></p>
</div>`,
)
// 標注點擊事件
marker.addEventListener("click", function () {
this.map.openInfoWindow(infoWindow, pt)
})
// 將標注添加到地圖中
this.map.addOverlay(marker)
}
})
},