百度地图 Cannot read property 'click' of undefined

发布于 2022-09-12 03:07:57 字数 2175 浏览 27 评论 0

bml-marker-clusterer + bm-marker + bm-label实现根据经纬度标注点,效果实现了,但是一直报错。

<template>
  <baidu-map class="baidu_map" :center="center" :scroll-wheel-zoom="true" :zoom='zoom' @ready="handler">
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bml-marker-clusterer :averageCenter="true" v-if="markers">
      <bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.commulongit, lat: marker.commulatitude}" @click='goInfo'>
        <bm-label :content="marker.commuName" :labelStyle="labelStyle" :offset="{width: -10, height: 30}" />
      </bm-marker>
    </bml-marker-clusterer>
  </baidu-map>
</template>
import Vue from 'vue'
import { BaiduMap, BmlMarkerClusterer } from 'vue-baidu-map'

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

export default {
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      points: [],
      markers: [],
      center: {lng: 108, lat: 34},
      zoom: 6,
      labelStyle: {color: '#4b8bf4' , fontSize : '14px', border: '1px solid #4b8bf4'}
    }
  },
  created() {
    this.getAllAddress()
  },
  methods: {
    handler ({BMap, map}) {
      // console.log("......", BMap, ",,,,,,", map)
      this.center.lng = 108
      this.center.lat = 34
      this.zoom = 6;
    },
    goInfo(e) {
      // console.log("e.....e......", e);
    },
    async getAllAddress(){
      let getAll = await getCommunityAll();
      if(getAll.status == 200){
        this.points = getAll.data;
        this.markers = this.points.filter( item => {
          if(item.commulongit && item.commulatitude){
            return item
          }
        });
      }
    },
  }
}
.baidu_map{
  height: 100%;
}

报错信息:
1591606620(1).jpg
有多少条数据,就有n组报错信息。不知道什么原因导致的,循环列表那里明明已经加了click方法了。不加click方法,坐标渲染不出来。有哪位大神帮忙看一下,不胜感谢!
效果图:
1591607017(1).jpg

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文