Vue 百度地图定位功能
转载自: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'});
}