Vue 百度地图定位功能

2019-12-04  本文已影响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'});

        }

上一篇下一篇

猜你喜欢

热点阅读