VUE百度定位

Vue百度地图定位

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

新建一个map.js文件

export default {
init: function (){
const AK = “百度密钥”;
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);
});
}
}

// An highlighted block
<div class="indexHeader clearFix">
      <mt-header class="indexLeft left">
        <span slot="left">
          <mt-button>{{LocationCity}}</mt-button>
        </span>
      </mt-header>
</div>
<script>
import map from "./common/maps/map";
methods: {
    //通过百度地图获取当前城市
    city() {
      map.init().then(BMap => {
        const locationCity = new BMap.Geolocation();
        var that = this;
        locationCity.getCurrentPosition(
          function getinfo(options) {
            let city = options.address.city; //此处拿到位置相关信息
            that.LocationCity = city;
            console.log(options);
          },
          function(e) {
            that.LocationCity = "定位失败";
            console.log("定位失败");
          },
          { provider: "baidu" }
        );
      });
    },
</script>