在vue.js项目里引入百度地图jsApi

前言

给农行做的中石化电子加油券要用到定位城市，看了百度地图的api能实现，拿来用用，就不知道商用会不会侵权呢，先实现功能再说(定位得下周才上线，如果侵权就换其它方法)。
先在百度地图api里面创建应用才会生成对应的ak码。

应用类型选择‘浏览器端’，白名单“*”代表支持全部。

一般定位都在移动端使用，都是直接通过这样的方法，直接引入百度地图的jsApi.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

传统做法的不多说了，今天只说在vue.js里面要怎么应用。
直接上代码：
先创建个map.js文件

export default {
    init: function (){
    	const AK = "DyCLvR1jCuz5rxMe37kgWsz62xIQ1BxO";
    	const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
    	return new Promise((resolve, reject) => {
    	// 如果已加载直接返回
    	if(typeof BMap !== "undefined") {
    		resolve(BMap);
    		return true;
    	}
    	// 百度地图异步加载回调处理
    	window.onBMapCallback = function () {
    		resolve(BMap);
    	};
    	let getCurrentCityName = function () {
    		return new Promise(function (resolve, reject) {
    		let myCity = new BMap.LocalCity()
   			myCity.get(function (result) {
    			resolve(result.name)
    		})
    	})
    }
    // 插入script脚本
    let scriptNode = document.createElement("script");
    	scriptNode.setAttribute("type", "text/javascript");
    	scriptNode.setAttribute("src", BMap_URL);
    	document.body.appendChild(scriptNode);
    });
  }
}

在需要使用定位的地方引入

import getgetCurrentCityName from "./map.js";

getCurrentCity(){
  getgetCurrentCityName.init().then(BMap=>{
    console.log(BMap,'BMap')
    const geolocation=new BMap.Geolocation();
    var _this =this;
    geolocation.getCurrentPosition(
      function getinfo(position){
        let city =position.address.city;
        let province = position.address.province;
        console.log(city,province,position)
      }
    );
  })
}

在mounted里执行

this.getCurrentCity();

控制台输出的效果

最后上一下项目图