首先自我介绍下，我是一枚小白。
直接进入正题，最近接到一个用vue调用百度地图API任务。踩过好几个坑，直接上代码。
在index.html文件中引入以下JS
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
BMap is not defined错误，在网上找好些资料。有大神说在webpack.config中增加配置，其实加不加都不重要。
直接贴组件代码
<template>
<div class="mapshow">
<h1>{{ msg }}</h1>
<div class="map" id="map"></div>
</div>
</template>
<script type="text/javascript">
export default {
//钩子方法 已完成模板渲染或el对应html渲染后
name: "mapshow",
data() {
return {
msg: "调用百度地图，动态标注"
};
},
created() {},
mounted() {//因百度地图异步加载，只能在mounted钩子函数中
this.bdMap();
},
methods: {
//百度地图Api功能
bdMap() {
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
}
};
</script>
