标签：baidu map VUE index xxx BaiduMap vue 多点 百度

VUE+百度地图+多点标记提示内容

• 不合适的地方欢迎指正
• • 第一步下载第三方依赖包
  • 全局注册or局部注册
  • 疑似vue百度官方文档
  • 废话不多说,直接上代码(我写的比较简单,不够的自行看官方)

不合适的地方欢迎指正

第一步下载第三方依赖包

npm install vue-baidu-map --save

全局注册or局部注册

// 全局注册
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见    http://lbsyun.baidu.com/apiconsole/key 
  ak: 'idWmyzB8EiHcR4gnhHjf8FS5RcbvdNqG'
})

// 局部注册
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}

疑似vue百度官方文档

链接: Vue Baidu Map.

废话不多说,直接上代码(我写的比较简单,不够的自行看官方)

<template>
  <baidu-map
    :center="center"
    :zoom="zoom"
    class="bm-view"
    :scroll-wheel-zoom="true"
    @ready="handler"
  >
    <bm-marker v-for="(item,index) in positionArr" :key="index" :position="item.markerPoint" :dragging="false" animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen(index)">
      <bm-info-window
        :show="item.show"
        @close="infoWindowClose(index)"
        @open="infoWindowOpen(index)"
      >{{ item.name }}</bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: { lng: xxx, lat: xxx }, // 地图的中心
      zoom: 15, // 缩放倍数
      positionArr: [
        {
          name: 'xxx', // 弹框内容
          show: false, // 控制是否展示
          markerPoint: {
            lng: xxx, lat: xxx // 你想要的标记地点 推荐用这个官方拾取器 http://api.map.baidu.com/lbsapi/getpoint/index.html 
          }
        },
      ]
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = xxx
      this.center.lat = xxx
      this.zoom = 15
    },
    infoWindowClose(index) {
      this.positionArr[index].show = false
    },
    infoWindowOpen(index) {
      this.positionArr[index].show = true
    }
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

能力只限于此,不喜勿喷
打完收工

标签：baidu,map,VUE,index,xxx,BaiduMap,vue,多点,百度
来源： https://blog.csdn.net/weixin_51946690/article/details/121488460

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。