1至会、在public的index.html中引入百度地圖的api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=秘鑰"></script>
2用含、在組件中設(shè)置容器 案例中使用vue-charts
<v-charts :options="options"></v-charts>
3矮慕、初始化數(shù)據(jù)以及設(shè)置api
<script>
//導(dǎo)入echarts中bmap的依賴
import "echarts/extension/bmap/bmap"
export default {
data(){
return{
options:{
//關(guān)于百度地圖的繪制
bmap:{
key:"ak秘鑰",
//繪制的中心點(diǎn)
center:[116.404, 39.915],
//縮放比例 在 3到19之間 現(xiàn)在是圖例的正中央
zoom:5,
//是否縮放
roam:false,
}
}
}
}
}
</script>
1.png
3設(shè)置地圖的樣式
[參考文檔](https://lbs.baidu.com/index.php?title=jspopularGL/guide/custom)
1、首先選擇自己定制的樣式
3.png
2啄骇、復(fù)制出樣式
4.png
3痴鳄、添加到bmap->mapStyle->styleJson中
5.png
4、效果圖
8.png