vue

vue-baidu-map 

官网地址：https://dafrok.github.io/vue-baidu-map/#/zh/index

 

记录一下在vue中使用npm下载使用百度地图ＡＰＩ的过程

１.安装

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.在vue文件中使用

template

<template>
  <div>
    <baidu-map
      class="bm-view"
      :center="{lng: 116.404, lat: 39.915}"
      :zoom="15"
      :scroll-wheel-zoom="true"
      @zoomend="syncCenterAndZoom"
      :double-click-zoom="true"
    >
      <!-- 缩放控件 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!-- 点聚合 -->
      <!-- <bml-marker-clusterer :averageCenter="true"> -->
        <!-- <bm-marker
          :position="position"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
          :icon="{url: '/huoche.png', size: {width: 300, height: 157}}"
        >-->
        <bm-marker
          v-for="marker of markers"
          :key="marker.code"
          :dragging="false"
          :z-index="4"
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="imgInfo"
        ></bm-marker> 
      <!-- </bml-marker-clusterer> -->
    </baidu-map>
  </div>
</template>

script

<script>
//引入聚合点插件
import { BmlMarkerClusterer } from 'vue-baidu-map'
export default {
  name: 'Baidu',
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      zoom: 3
      markers: [
        { lng: 116.404, lat: 39.915 },
        { lng: 116.504, lat: 39.915 },
        { lng: 116.604, lat: 39.915 },
        { lng: 116.704, lat: 39.915 },
        { lng: 116.804, lat: 39.915 }
      ],
      imgInfo:{url: '/huoche128.png', size: {width: 100, height: 107}}
      
    }
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    syncCenterAndZoom(e) {
      console.log(e)
      console.log(e.target.getZoom())
      this.zoom = e.target.getZoom();
      if(this.zoom < 10){
        this.imgInfo.url="/huoche.png"
      }
    }
  
  }
}
</script>