申请百度地图密钥
百度地图
在index.html中添加百度地图JavaScript API接口
<!-- 在index.html中添加百度地图JavaScript API接口; -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>
在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;
// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象),在module.exports 中与entry平级;
externals: {
'BMap': 'BMap'
},
在地图组件中import BMap,否则会出现”BMap undefined”;
// 导入BMap组件
import BMap from 'BMap'
创建地图对象,在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)
}
}