Vue项目通过百度地图获取地理定位【请开启HTTPS】

Vue 项目中使用百度地图
一.写在前面的话，在vue项目中使用H5新特性在IOS手机上打开vue网页会有适应性问题，并且无法获取所在城市，因此使用第三方库百度地图api
二.使用步骤
1.获取百度地图密钥
(1).注册百度开发者帐户 http://lbsyun.baidu.com/
(2).创建网站为网站申请百度地址访问密钥 AccessKey
2.实现百度地图定位
(1).在vue项目中index.html中引入 百度地图api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=【你的秘钥】"></script>

(2).在build/webpack.base.conf.js里面 配置

module.exports = {
	context: path.resolve(__dirname, '../'),
	entry: {
		app: './src/main.js'
	},
	//添加
	externals: {
		"BMap": "BMap"
	},
}

(3).定义方法，并在mounted中进行引用

//引入BMap
import BMap from 'BMap'
//定义数据
data() {
      location: null
 },
 methods:{
//定义方法
getCity(){
      let _this = this
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          if(r.accuracy==null){
	    alert('您已拒绝地理位置授权');
	    //用户决绝地理位置授权
	    return;
	  }else{
            const myGeo = new BMap.Geocoder()
            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
             if (data.addressComponents) {
              const result = data.addressComponents
              const location = {
                creditLongitude: r.point.lat, // 经度
                creditLatitude: r.point.lng, // 纬度
                creditProvince: result.province || '', // 省
                creditCity: result.city || '', // 市
                creditArea: result.district || '', // 区
                creditStreet: (result.street || '') + (result.streetNumber || '') // 街道
              }
              _this.location = location;
              _this.creditLongitude=location.creditLongitude;
              _this.creditLatitude=location.creditLatitude;
              _this.creditCity=location.creditCity;
              // alert(this.getStatus());
             }
            })
          }
        }
      })
    },    
 }
//mounted中引用
 mounted() {
       this.getCity();
    }