先在index.html引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你申请的ak"></script>
1. 注:百度地图引用报错(A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getsc),
解决方法:
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=你申请的ak"></script> api换为getscript
2.注:百度地图JS API报错 Cannot read property ‘fc‘ of undefined
解决方法:
把js代码放到地图DIV容器的下面,需要先有DIV,再画地图
也就是要创建div
<div id="allmap"></div>
<div id="l-map"></div>
然后
//根据ip拿到地址和经纬度
const getPoint = (callback) => {
let map = new BMap.Map('allmap');
let point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 12);
let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
console.log(r);
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
let mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
callback(r.point.lng, r.point.lat);
} else {
console('failed' + this.getStatus());
}
});
};
//根据经纬度拿到具体的地址
const getAddress = (x, y) => {
let map1 = new BMap.Map('l-map');
map1.centerAndZoom(new BMap.Point(x, y), 11);
// 创建地理编码实例
let myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(x, y), function (result) {
if (result) {
console.log('你的地址',result);
}
});
};
使用:
getPoint(getAddress);
vue---百度地图实现定位功能
最新推荐文章于 2024-05-17 10:05:27 发布