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})
    },

至此,获取当前位置的定位就完成了。效果如下;

Logo

前往低代码交流专区

更多推荐