做了个百度地图定位,真是一步一个坎儿,遇到的问题和解决过程记录在这里,每一个坑我都亲自踩过,解决办法也亲测有效
定位
百度地图提供的api:https://lbsyun.baidu.com/index.php?title=jspopularGL
开发指南中有 【定位】
我用的是ip定位,个人测试之后ip定位的结果更精确:
浏览器定位结果如图:
ip定位结果如图:
定位经纬度转位置信息
拿到了定位的经纬度信息之后,当然就想获得经纬度对应的位置信息
前文提到的百度地图api链接,开发指南中有 【正/逆地址解析】
应用之后大概是这样的
var myGeo = new BMapGL.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(result.center.lng, result.center.lat), function(res){
if (res){
alert(res.address)
} else {
console.log('--根据坐标得到地址描述失败--')
}
})
传入刚才得到的经纬度,就可以啦~
添加定位控件
百度地图给提供了现成的控件,不过点击方法我是自己加的,可以随心所欲~
还是那个链接~
开发指南 -> 【添加控件】
应用起来:
// 添加定位控件
let dom = document.getElementsByClassName("BMap_noprint")[0] // 检查现在是否有地图控件
if (openLocation && !dom) {
// 开启定位且未添加过定位控件,添加
let geolocationControl = new BMapGL.LocationControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT, // 放右下角
showAddressBar: false, //是否显示定位信息面板
enableAutoLocation : false, //首次是否进行自动定位
offset: new BMapGL.Size(6,6)//偏移距离
})
this.map?.addControl(geolocationControl) //将控件添加到地图
setTimeout(()