vue获取当前位置信息

作者:有用网 阅读量:687 发布时间:2021-05-17
关键字 前台

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(){

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

    },

获取当前位置的定位完成


#发表评论
提交评论