vue2.x使用百度地图

在12月份之前在vue项目中使用百度地图我都是在index.html直接应用如下代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>

然后直接在页面直接初始化地图即可，注意地图一定要设置宽和高。

现在我被同事硬性拧过来使用vue baidu map。中文文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index。

此插件将需要使用的控件、覆盖物都封装成组件。要使用的话需要先引入并申明。如下

import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'

 给一个使用较完整的例子

    <baidu-map @moveend="moveendMap"  @ready="readyMap" class="bm-view" v-bind:style="{ '100%', height: winHeight + 'px' }" :center="center" ak="tRcad54fc5HjGw1mZ64lttoT" :zoom="zoom">
      <bm-info-window  :position="windowLabelPoint"  :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen" >
        <a class="header-label" :href="shopBaseinfo.url">
          <div class="shopname" v-text="shopBaseinfo.serviceProviderName"></div>
          <span>详情»</span>
        </a>
        <div class="base-info" >
          <span v-text="'案例个数: '+shopBaseinfo.caseNum+'个'"></span>
          <span v-text="'案例个数: '+shopBaseinfo.shopDesignerNum+'个'"></span>
        </div>
      </bm-info-window>
      <bm-label
        v-for="(item,index) in decShopPointerList"
        @click="getShopInfo(item.id,index,item.longitude,item.latitude)"
        :key="item.id"
        :content="item.serviceProviderName"
        :position="{lng: item.longitude, lat: item.latitude}"
        :labelStyle="curIndex==index?labelCurStyles:labelStyles"
        :title="item.serviceProviderName"/>
    </baidu-map>

import { BaiduMap, BmLabel, BmGeolocation, BmOverlay, BmInfoWindow } from 'vue-baidu-map'
export default {
  data: () => ({
    center: {lng: 114.3162001, lat: 30.58108413},
    zoom: 14,
    winHeight: 400,
    param: {
      lonMin: 0,
      lonMax: 0,
      latMin: 0,
      latMax: 0
    },
    infoWindow: {
      show: true,
      contents: ''
    },
    decShopPointerList: [],
    windowLabelPoint: {
      lng: 0,
      lat: 0
    },
    eventListen: false, // 地图初始完成之后才可监听移动、放大等事件
    map: {},
    shopBaseinfo: {},
    curIndex: -1,
    labelShow: true,
    labelStyles: {color: '#fff',
      fontSize: '12px',
      background: '#f56666',
      padding: '6px',
      border: 'none',
      borderRadius: '4px'
    },
    labelCurStyles: {color: '#fff',
      fontSize: '12px',
      background: '#1894ea',
      padding: '6px',
      border: 'none',
      borderRadius: '4px'
    }

  }),
  mounted () {
    if (window.innerHeight) {
      this.winHeight = window.innerHeight
    } else if ((document.body) && (document.body.clientHeight)) {
      this.winHeight = document.body.clientHeight
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.center = {lng: position.coords.longitude, lat: position.coords.latitude}
      })
    }
    this.zoom = 14
  },
  methods: {
    moveendMap() {
      if (this.eventListen) {
        this.getConernPoint()
      }
    },
    infoWindowClose (e) {
      this.curIndex = -1
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    readyMap({BMap, map}) {
      this.BMap = BMap
      this.map = map
      this.Geo = new BMap.Geocoder()
      this.getConernPoint()
      this.eventListen = true
    },
    // 获取边角经纬度并请求商铺数据
    getConernPoint() {
      let minPoint = this.map.getBounds().getSouthWest()
      let maxPoint = this.map.getBounds().getNorthEast()
      this.param.lonMin = minPoint.lng
      this.param.latMin = minPoint.lat
      this.param.lonMax = maxPoint.lng
      this.param.latMax = maxPoint.lat
      this.getShopsList()
    },
    getShopsList() {
      // Indicator.open('正在加载')
      getshoplist(this.param)
        .then((res) => {
          // console.log(res)
          if (res.decShopPointerList) {
            this.decShopPointerList = res.decShopPointerList
          }
          // Indicator.close()
        })
    },
    getShopInfo(id, index, lng, lat) {
      this.curIndex = index
      getshopDetail({shopId: id})
        .then((res) => {
          this.shopBaseinfo = res.decShopInfo
          this.shopBaseinfo.url = res.decShopDetailsURL
          this.shopBaseinfo.shopDesignerNum = res.decShopDesignerNum
          if (this.shopBaseinfo.caseNum > 0) {
            this.shopBaseinfo.caseNum = this.shopBaseinfo.caseNum
          } else {
            this.shopBaseinfo.caseNum = 0
          }
          if (this.shopBaseinfo.shopDesignerNum > 0) {
            this.shopBaseinfo.shopDesignerNum = this.shopBaseinfo.shopDesignerNum
          } else {
            this.shopBaseinfo.shopDesignerNum = 0
          }
          this.windowLabelPoint.lng = lng
          this.windowLabelPoint.lat = lat
          this.infoWindow.show = true
        })
    }
  },
  components: {
    BaiduMap,
    BmLabel,
    BmInfoWindow
  }
}

在vue baidu map中依然遵守数据改变视图更新

使用vue baidu map时我想将地址解析出来并在地图上描点，在vue baidu map的官方文档上没看到。可以在百度地图官方文档中找，可使用Geocoder()构造函数，创建一个地址解析器的实例。用法如下：

    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint("北京市海淀区上地10街", function(point){
        if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
        }else{
            alert("您选择地址没有解析到结果!");
        }
    }, "北京市");

 获取当前位置经纬度

let geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        let point = r.point.lng + ',' + r.point.lat;
        
    }else {
        console.log('failed' + this.getStatus());
    }
}, { enableHighAccuracy: true })