vue 使用百度地图(vue-Baidu-Map)

腾讯地图暂时官方没有在npm上放置，但是有个人的两三年前的依赖，所以我选用百度地图来做。

1.安装依赖

sudo cnpm install vue-baidu-map --save

2.main.js里面引入并填写你的百度地图key

// 引入百度地图
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
      /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
      ak: 'kR0jxLjmV4Mwp7My4HY0FSWR'
})

3.你需要的vue页面引入

import BaiduMap from 'vue-baidu-map';

4.html

<template>
          <baidu-map :center="center" :zoom="zoom" @ready="baiduMapFun" :scroll-wheel-zoom='true' class="baiduMap">
          </baidu-map>
</template>

  .baiduMap{
    width: 100%;
    height: 300px;
    padding-top: 30px;
  }

5.methods里面

    //百度地图
    baiduMapFun({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: 'Red',
        strokeWeight: 6, 
        strokeOpacity: 1, 
        Color: 'Red', 
        fillColor: '#f03' 
      })
      map.addOverlay(circle)
    }

image.png

如果想用动态渲染地图则核心是先把{BMap, map} 这两个东东挂在data然后再使用,要不然报错BMap, map undefind

    baiduMapFun({BMap, map}) {
      // console.log(BMap)
      this.BMap=BMap
      this.map=map  
    },

    //绘制地图
    drawMap(){
      var that=this
      let BMap = that.BMap
      let map = that.map
      //设置中心点为张家口
      var centerPoint = new BMap.Point(that.jingdu,that.weidu)
      //设置缩放比例
      map.centerAndZoom(centerPoint, 11)
     ....
    },