百度地图之VUE
参考API网址
# 方式一:使用原生的api (推荐)
-- Web开发 JavaScript API
http://lbsyun.baidu.com/index.php?title=jspopularGL
# 方式二:使用VUE百度地图组件 (请自行查阅相关资料)
-- 基于VUE封装的百度地图组件
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/161dbd34c0c1a54d5f8d3f43b52d25d6.png#pic_center)
使用原生的api
第一步: 项目引入请求百度地图资源Js [loadMapApi.js]
//动态加载百度地图api
export default function loadMapApi(ak,other) {
return new Promise(((resolve, reject) => {
//先加载基础库api,再加载其他api或js依赖
asyncLoadBaiduMapJsApi(ak).then(() => {
if(other == 1){
asyncLoadJs("http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js").then(() => {
}).catch(err => {
reject(err)
})
asyncLoadJs("http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js").then(() => {
}).catch(err => {
reject(err)
})
asyncLoadJs("http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js").then(() => {
resolve();
return true
}).catch(err => {
reject(err)
})
}else{
resolve();
return true
}
}).catch(err => {
reject(err)
})
}))
}
/**
* @description 加载百度地图基础组件js
* @param {string} ak
*/
export function asyncLoadBaiduMapJsApi(ak) {
return new Promise(((resolve, reject) => {
if (typeof BMap !== 'undefined'){
resolve(BMap);
return true;
}
window.onBMapCallback = function () {
resolve(BMap);
}
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback';
script.onerror = reject;
document.head.appendChild(script);
}))
}
/**
* @description 加载第三方组件js公共方法
* @param {string} url
*/
export function asyncLoadJs (url) {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = url
document.head.appendChild(script)
script.onload = () => {
resolve()
}
script.onerror = reject
})
}
第二步: 在地图页面引入js
<template>
<!--地图-->
<div class="vueMap" id="vueMap"></div>
</template>
<script>
import loadBMap from '../../../components/common/unit/loadMapApi'
export default {
name: "mapVue",
data(){
return{
map: null,
mapLevel:5,
lng:105.994848,
lat:36.354387,
}
},
methods:{
initPage(){
loadBMap('AK',1).then(() => {
this.initBMap();
}).catch(err => {
console.log(err);
console.log("地图加载失败");
})
},
initBMap(){
this.createMap() ; //创建地图
this.setMapEvent();//设置地图事件
this.addMapControl();//向地图添加控件
},
createMap(){
var map = new BMap.Map("vueMap",
{
minZoom:5,// 最小显示级别
//maxZoom:11,// 最大显示级别
enableMapClick:false// 构造底图时,关闭底图可点功能
}
);//在百度地图容器中创建一个地图
var point = new BMap.Point(this.lng,this.lat);//定义一个中心点坐标
map.centerAndZoom(point,this.mapLevel);//设定地图的中心点和坐标并将地图显示在地图容器中
var self = this;
self.map = map;
window.map = map;//将map变量存储在全局
// map.setMapStyleV2({styleJson:this.AppConfig.styleJson});
// 监听停止拖拽地图时可视区域四角
map.addEventListener('dragend', function(e) {
});
// 地图加载完毕
map.addEventListener("tilesloaded",function(){
});
// 监听层级
map.addEventListener('zoomend', function(e) {
});
},
setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
map.enableInertialDragging();
map.enableContinuousZoom();
},
addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
//map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
//map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
//map.addControl(ctrl_sca);
// 城市列表控件
var size = new BMap.Size(10, 20);
var ctrl_cti = new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
// 切换城市之前事件
// onChangeBefore: function(){
// alert('before');
// },
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
});
map.addControl(ctrl_cti);
},
},
mounted(){
this.initPage();
}
}
</script>
<style>
.vueMap{
width:100%;
height:860px;
margin-top: 1px;
}
/* 去掉地图左下角的百度LOGO */
.anchorBL {
display:none
}
</style>