Vue框架中如何使用Baidu地图

1.安装 vue-baidu-map 依赖

　　npm install vue-baidu-map --Save

2.在Vue项目中src找到main.js进行引用

　　import BaiduMap from 'vue-baidu-map-v3'

　　Vue.use(BaiduMap, {

  　　　　ak: '百度地图api申请密钥' // 百度地图密钥

　　})

3.可直接引用或者封装BaiduMap.vue 

　　<template>

　　　　<baidu-map class='bm-view' :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle"></baidu-map>

　　</template>

　　/**

　　*　　center 设置中心点坐标 { lng：京都， lat：维度 }

　　*　　zoom 展示级别

　　*　　scroll-wheel-zoom 是否开启鼠标滚轮缩放

　　*　　mapStyle 主题设置

　　**/

　　以上写法是直接引用也可以通过init初始化map的参数

 

4.在地图中画点线图片

　　阅读： https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay

　　案例：

　　<template>

　　　　<baidu-map class='bm-view' :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle">

　　　　　　<bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      　　<bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
    　　</bm-marker>

　　　　</baidu-map>

　　</template>

　 以上就是vue简单使用baidumap

　 可参考：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

 

　注意：如果地图出现加载白块或者主题无法更换请结合以下方式尝试

　1.查看安装版本是否是v3如果不是请安装 v3版本  npm install vue-baidu-map-v3 --Save

　2.在index.html入口中添加

　　<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=密钥&s=1"></script>