vue如何引入百度地图绘制工具
1、申请百度地图密钥(此处不做详细介绍)
2、在index.html中添加百度地图JavaScript API接口
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>
3、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;
externals: { 'BMap': 'BMap' },
4、在地图组件中import BMap,否则会出现”BMap undefined”;
import BMap from 'BMap'
5、创建地图对象,在mounted生命周期调用
// 创建地图对象,在mounted生命周期调用;
mounted() {
this.ready()
},
methods: {
ready: function() {
var map = new BMap.Map('allmap')
var point = new BMap.Point(108.840053, 34.129522)
map.centerAndZoom(point, 14)
map.addControl(new BMap.MapTypeControl())
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
var marker = new BMap.Marker(point)
map.addOverlay(marker)
map.centerAndZoom(point, 15)
}
}