vue引用百度地图时遇到的问题总结

之前在百度搜索到的方式有问题，就是第一次进入页面时，地图不会显示出来，必须刷新才显示。
这是因为vue是异步加载，不会重新刷新页面，所以出错了。

下面是错误的方式：

//自定义map.js
export function MP(ak) {
    return new Promise(function (resolve, reject) {
      //这种方式在第一次进入页面的时候地图不会显示出来，因为vue是异步加载的，不需要刷新页面。所以这种方式是错的。
      //https://dafrok.github.io/vue-baidu-map/#/
      window.onload = function () {
        resolve(BMap)
      }
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
      script.onerror = reject;
      document.head.appendChild(script);
    })
}
//引用
// import {MP} from '@/assets/js/map.js';
    mounted(){
    
        // this.$nextTick(function(){
        //     var _this = this;
        //     MP(_this.ak).then(BMap => {
        //         this.initMap()
        //     })
        // })

    },

这是正确的方式：

<template>
    <div>
        <baidu-map class="bm-view"  :center="center" :zoom="zoom" @ready="handler">
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        </baidu-map>
    </div>
</template>

data(){
        return{
            center: {lng: 0, lat: 0},
            zoom: 3
        }
    },
    methods:{
        handler ({BMap, map}) {
            console.log(BMap, map)
            this.center.lng = 116.355006
            this.center.lat = 39.948971
            this.zoom = 11
        },
}

直接打开这个地址就可以了，有详细的步骤 https://dafrok.github.io/vue-baidu-map/#/