vue定位---获取当前位置的详细信息
vue如何获取当前位置的详细信息,总共分为5步。1、在build文件夹下webpack.base.conf.js文件里面的module.exports中添加如下代码;externals: {'BMap': 'BMap'}2、在项目的根目录下,找到index.html文件,添加如下代码;<script src="https://api.map.baidu.co...
·
vue如何获取当前位置的详细信息,总共分为5步。
1、在build文件夹下webpack.base.conf.js文件里面的module.exports中添加如下代码;
externals: {
'BMap': 'BMap'
}
2、在项目的根目录下,找到index.html文件,添加如下代码;
<script src="https://api.map.baidu.com/api?v=2.0&ak=此处填写申请的百度地图AK"></script>
3、在页面引入
import BMap from 'BMap';
4、在需要获取的位置加上标签。如下;
<div id="allmap" style="width: 0;height: 0; display: none;">点击刷新</div>
5、在js中写入相关配置,代码如下;
local(){
//若需赋值,在此记得定义that
const that=this
const map = new BMap.Map("allmap");
const point = new BMap.Point(101.77,37.27);
map.centerAndZoom(point,12);
const geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
const mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
const point = new BMap.Point(r.point.lng,r.point.lat);
const gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
const addComp = rs.addressComponents;
const address = rs.address;
that.accidentForm.orgLocation = rs.address;
that.mapInfo.city = addComp.city;
});
},{enableHighAccuracy: true})
},
至此,获取当前位置的定位就完成了。效果如下;
更多推荐
已为社区贡献1条内容
所有评论(0)