美文网首页
Vue 百度地图定位功能

Vue 百度地图定位功能

作者: 前端切图仔 | 来源:发表于2019-12-04 16:13 被阅读0次

    转载自:Vue 百度地图定位功能

    先去百度平台申请一个ak接口

    百度:百度地图开放平台  地址:地址

    Vue  的更目录:public>index.html

    引入:<script src="https://api.map.baidu.com/api?v=2.0&ak=你申请的ak"></script>

    //如果是cli2可以直接有添加就好,cli3的话需要在更目录新建vue.config.js

    写入

    configureWebpack: { externals: {

            'BaiduMap': 'BMap'

        } }

    需要用这个功能的vue组件加上

    import BMap from 'BaiduMap';

    页面:

    先定义一个值   下面接受

    具体方法:

    methods中写入 mounted在用  也可以定义

     getLocation() {

                const geolocation = new BMap.Geolocation();

                var _this = this;

                _this.LocationCity = '正在定位';

                geolocation.getCurrentPosition(function getinfo(position){

                    let city = position.address.city;             //获取城市信息

                    let province = position.address.province;    //获取省份信息

                    let district=position.address.district;     //县

                    let street=position.address.street;//街道

                    _this.LocationCity =province+city+district;    //赋值

                    _this.success = true;

                }, function(e) {

                    _this.LocationCity = '定位失败, 请点击重试';

                    this.success = false;

                }, {provider: 'baidu'});

            }

    相关文章

      网友评论

          本文标题:Vue 百度地图定位功能

          本文链接:https://www.haomeiwen.com/subject/fnjlgctx.html