vue中引入百度地图，以及解决地图出现undefined（地图未定义）

vue中引入百度地图，以及解决地图出现undefined（地图未定义）

最近有个项目需要使用百度地图，于是自己尝试在先写个demo进行测试，主要体现在下面两种方法：
第一种方法：
在index.htm引入

查看其它文章发现，要在在build文件下的webpack.base.conf.js配置map，个人尝试是否配置无作用

开始实例化生成地图,创建map记得要在mounted周期内：

<template>
    <div id='MapBox'>
        <div class='baiduMap' id='mapShow'></div>
    </div>
</template>
export default {
    name:'baiduMap',
    data() {
        return{
            
        }
    },
    created(){

    },
    computed(){

    },
    mounted(){
        this.baiduMap();
    },
    methods:{
        baiduMap:function(){
            var map=new BMap.Map('mapShow');
            var point=new BMap.Point(114.065537,22.553321);
            var marker=new BMap.Marker(point);
            map.addOverlay(marker);//添加一个标注
            map.centerAndZoom(point,13);//添加初始化中心点及地图层级
            map.enableScrollWheelZoom();//开启鼠标滚轮缩放功能。仅对PC上有效
            map.enableContinuousZoom();//启用连续缩放效果，默认禁用
        }
    }
}
<style>
#MapBox {
		width: 100%;
		height: 100%;
		padding: 10px;
    }
.baiduMap{
    height: 100%;
    width: 100%;
}    

第二种方法：

该方法主要是为了防止出现实例化加载地图出现BMap is undefined 问题

创建一个map.js,放在src下面和main.js同一层级下：

创建map.js主要是动态加载引入百度地图js文件，防止出现map是undefined的状况
map.js的内容如下：

export function Map(ak) {
    return new Promise(function (resolve, reject) {
         window.init = 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);
})
}

其次在创建地图的vue中引入map.js，记得map.js引入路径要正确

同第一种方法一样，我们只需改变方法主体内容即可：

mounted(){
        this.baiduMap();
    },
    methods:{
        baiduMap:function(){
            //第一种方式引入
            Map("你的百度秘钥").then( BMap => {				//调用map.js中Map()方法，引入百度地图秘钥作为参数
             var th = this
            var map = new BMap.Map("mapShow");            // 创建Map实例       
            var point = new BMap.Point(114.065537,22.553321); // 创建点坐标
            var marker=new BMap.Marker(point);
            map.addOverlay(marker);//添加一个标注
            map.centerAndZoom(point,13);//添加初始化中心点及地图层级
            map.enableScrollWheelZoom();//开启鼠标滚轮缩放功能。仅对PC上有效
            map.enableContinuousZoom();//启用连续缩放效果，默认禁用           
        })
        }
    }

上述两种方法实例化的百度地图如图所示：

参考来源：https://www.cnblogs.com/NearTheSea/p/6808093.html

我们还可以通过引入百度地图Vue依赖包，实现地图的加载，详细步骤请参考我的下一篇文章    vue安装百度地图依赖包，以及使用