vue中引入百度地图
前期准备:在百度地址开放平台注册一个自己的百度地图的密钥(ak),申请地址: http://lbsyun.baidu.com/apiconsole
实现步骤:
1.项目根目录下下载百度地图插件
npm install vue-baidu-map –save
2.创建一个map.js(位于根目录下)
export function MP(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)
})
}
3.在显示地图的组件中 template 中:
<div class="baidumap" id="allmap"></div> //地图的容器
4.在显示地图的组件中 script 中:
<script>
import { MP } from "@/map.js"; //在此处引用map.js
export default {
name: "pm-distribution",
components: {
},
data() {
return {
ak: "在此处填写自己申请的百度地图的密钥ak"
};
},
mounted() {
this.$nextTick(function() {
let that = this;
MP(that.ak).then(BMap => {
// 百度地图API功能
that.baiduMap();
});
});
},
methods: {
...mapMutations(["changeStyle"]),
baiduMap() {
var map = new BMap.Map("allmap"); // 创建地图实例
var point = new BMap.Point(经度坐标, 纬度坐标); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略地图
map.addControl(new BMap.MapTypeControl()); //地图类型
//map.setMapStyle({ style: 'midnight' }) //地图风格
var marker = new window.BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//提示信息
var infoWindow = new BMap.InfoWindow(
"在此处填写提示信息"
);
// 鼠标移上标注点要发生的事
marker.addEventListener("mouseover", function() {
this.openInfoWindow(infoWindow);
});
// 鼠标移开标注点要发生的事
marker.addEventListener("mouseout", function() {
//this.closeInfoWindow(infoWindow)
});
}
}
};
</script>
5.在显示地图的组件中 style 中改变一下默认样式:
.baidumap {
width: 1000px;
height: 500px;
border: 1px solid red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}