vue项目中简单使用百度地图定位导航_vue使用百度地图浏览器定位

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
 
注意：秘钥可在注册百度账号后百度地图api开发文档中获取

 在vue.config.js中添加如下配置

    configureWebpack: {
        externals: {
          "BMap": "BMap"
        }
    }

 在需要的vue中组件引入

    <template>
        <div>{{LocationCity}}</div>
    </template>
    
    <script>
        import BMap from 'BMap';
        export default {
            data(){
                return {
                    LocationCity: "正在定位"
                }
            },
            methods: {
                createMap() {
                    const geolocation = new BMap.Geolocation();
                    var _this = this
                    geolocation.getCurrentPosition(function getinfo(position) {
                        let city = position.address.city; //获取城市信息
                        let province = position.address.province; //获取省份信息
                        _this.LocationCity = city.substr(0,city.length-1);
                    }, function(e) {
                        _this.LocationCity = "定位失败"
                    }, {
                        provider: 'baidu'
                    });
                }
            },
            mounted() {
                this.createMap();
            }
        }
    </script>