Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
316 views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...