vue cli3 百度地图定位

一、index.html   引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的key"></script>

二、vue.config.js中添加 BMap

module.exports = {
    configureWebpack: {
        externals: {
            "BMap": "BMap"
        }
    }
}

三、单个页面引用  import BMap from 'BMap' 调用地图，获得当前地理位置信息

<template>
   <div class="wrap">
      <P>{{address}}<p>
      <div id='container'></div>
   </div>
  
</template>

<script>
import BMap from 'BMap'
export default {
    data() {
        return {
   
            address: '',
           



        }
    },
    mounted() {
        this.createMap()
    },

    created() {

    },
    methods: {
        createMap() {
            var that = this;
            var map = new BMap.Map("container");
            var point = new BMap.Point(116.331398, 39.897445);;
            map.centerAndZoom(point, 12);
            var geoc = new BMap.Geocoder();
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
                
                    var pt = r.point;
                    geoc.getLocation(pt, function(rs) {
                        var addComp = rs.addressComponents;
                        that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                    });


                } else {
                    console.log('failed' + this.getStatus());
                }
            }, { enableHighAccuracy: true })
        },
}
}

结束语：

好了，百度地图定位就到这里啦，希望这篇文章能帮助到大家，如有不对之处，还请指正。愿我们一起成长。