VueBaiduMap使用记录

项目中有用到地图，之前采用的是腾讯地图，使用后发现在IE中地图展示空白，就想着换百度地图试试，又看到有基于Vue框架的百度地图插件VueBaiduMap，正好符合我的需求；本文记录一下。
一、安装及引用

1. 安装依赖

npm install vue-baidu-map --save

2. 全局注册

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

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

3. 页面使用

<template>
  <div>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
    </baidu-map>
  </div>
</template>

export default {
  data () {
    return {
      center: {
        lng: 0,
        lat: 0,
      },
      zoom: 14,
    }
  },
  methods: {
    // ready事件在map组件加载完成再触发，里面可以做关于地图数据的初始化
    handler () {
      this.center.lat = '22.619498'
      this.center.lng = '114.027699"'
    }
  }
}

现在我的项目需要实现如下图的功能：

• 地图上有位置的点标记；
• 点击点标记有弹窗展示位置信息；
• 弹窗展示的位置信息中，点击详情可以打开百度地图并且定位到该位置；
• 点击某个点，将其放置在视图中心。

4. 具体实现

<template>
  <div class="map-wrap">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
    <!-- bm-marker标签标记地图中的点 -->
      <bm-marker
        v-for="(item, index) in myMarkers"
        :position="item.position"
        :key="index"
        @click="infoWindowOpen(item, index)">
        <!-- 点击点标记有弹窗展示位置信息 -->
        <bm-info-window :show="item.showLabel">
          <p>{{item.title}}</p>
          <p class="address">{{item.address}}</p>
          <div class="pos-detail" @click="goMap(item)">详情>></div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'around-com',
  props: {
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      center: {
        lng: 0,
        lat: 0,
      },
      zoom: 14,
      myMarkers: [],
    }
  },
  methods: {
    // 地图组件加载完初始化数据，比如视图中心位置，点位置数据获取
    handler () {
      const latitudeAndLongitude = this.info.latitudeAndLongitude
      const latLogList = latitudeAndLongitude.split(',')
      this.center.lat = latLogList[0]
      this.center.lng = latLogList[1]
      this.getProjectArundList()
    },
    // 模拟点位置数据
    getProjectArundList () {
      this.myMarkers = [{
        address:  "广东省深圳市龙华区新区大道与民宝路交汇处北侧",
        distance: "499.99",
        lat: "22.619176",
        lng: "114.021815",
        title: "深圳市新华医院",
        showLabel: false
      },{
        address: "广东省深圳市龙华区民康路与民治大道交汇处东北侧",
        distance: "1772.11",
        lat: "22.616527",
        lng: "114.04273",
        title: "深圳第二儿童医院",
        showLabel: false
      }]
    },
    infoWindowOpen (item, index) {
      this.myMarkers.forEach(sub => {
        sub.showLabel = item.id === sub.id
      })
      // 点击标记的同时，将标记点位置置于视图中心
      this.center.lat = item.position.lat
      this.center.lng = item.position.lng
    },
    // 点击详情去到百度地图
    goMap (pos) {
      window.location.href = `http://api.map.baidu.com/geocoder?address=${pos.title}&output=html&key=你的key`
    },
  }
}
</script>

在IE浏览器中测试正常，暂时没有发现兼容问题

参考文档：

Vue Baidu Map文档
百度地图开发文档：浏览器端
api.map.baidu.com相关使用文档