vue中使用百度地图

1、在public的index.html中引入百度地图的api

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=秘钥"></script>

2、在组件中设置容器 案例中使用vue-charts

<v-charts :options="options"></v-charts>

3、初始化数据以及设置api

<script>
//导入echarts中bmap的依赖
import "echarts/extension/bmap/bmap"
export default {
   data(){
     return{
       options:{
        //关于百度地图的绘制
        bmap:{
          key:"ak秘钥",
          //绘制的中心点
          center:[116.404, 39.915],
          //缩放比例  在 3到19之间 现在是图例的正中央
          zoom:5,
          //是否缩放
          roam:false,
        }
       }
     }
   }
}
</script>

1.png

3设置地图的样式

[参考文档]（https://lbs.baidu.com/index.php?title=jspopularGL/guide/custom）
1、首先选择自己定制的样式

3.png

2、复制出样式

4.png

3、添加到bmap->mapStyle->styleJson中

5.png

4、效果图

8.png