实现效果
1、注册百度地图API账号
2、控制台创建应用
生成1个AK
3、在index.html中添加百度地图api(引入放在第一行,不然异步加载会失败)
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK"></script>
4、创建地图组件
<template>
<div id="mapContainer" style="width: 600px;height: 400px;"></div>
</template>
<script>
export default {
data() {
return {
map: null, // 地图实例
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
// 初始化地图
this.map = new BMap.Map("mapContainer");
this.map.centerAndZoom(new BMap.Point(102.710124,25.054646), 21);
this.map.enableScrollWheelZoom(true);
// 添加标点
var point = new BMap.Point(102.710124,25.054646); // 创建标点
var marker = new BMap.Marker(point); // 创建Marker对象
this.map.addOverlay(marker); // 将Marker添加到地图上
// 如果你还想给标点添加名称,可以使用InfoWindow
var infoWindow = new BMap.InfoWindow("翠湖"); // 创建信息窗口对象
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
});
},
},
}
</script>
5、在其他vue中引入该组件使用即可