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

Question

问题描述

使用点聚合 BmlMarkerClusterer + bm-marker + bm-label会报错,效果正常显示

[Vue warn]: Error in callback for watcher "labelStyle": "TypeError: Cannot read property 'setStyle' of undefined"

found in

---> <BmLabel>
       <BmMarker>
         <BmlMarkerCluseter>
           <BmMap>
             <Map> at src/views/baiduMap/index.vue
               <AppMain> at src/views/layout/components/AppMain.vue
                 <Layout> at src/views/layout/Layout.vue
                   <App> at src/App.vue
                     <Root>

问题出现的环境背景及自己尝试过哪些方法

单独使用 bm-marker + bm-label不报错,效果正常显示

相关代码

<template>
  <baidu-map
    class="map"
    center="杭州"
    :scroll-wheel-zoom="true"
    :zoom='10'
  >
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
    ></bm-geolocation>
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker
        v-for="(marker,index) of markers"
        :key="index"
        :position="{lng: marker.lng, lat: marker.lat}"
        @click='goInfo'
        :icon="{url: marker.icon , size: {width: 32, height: 32}}"
      >
        <bm-label
          :content="marker.info"
          :labelStyle="{color: marker.color , fontSize : '14px'}"
          :offset="{width: -44, height: 30}"
        />
      </bm-marker>
    </bml-marker-clusterer>

  </baidu-map>

</template>

<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  name: "Map",
  data() {
    return {
      markers: [
        {
          lng: 120.277888,
          lat: 30.289263,
          info: "120.277,30.289",
          color: "green",
          icon: "http://liangzhun.billyzc.com/img/green.png"
        },
        {
          lng: 120.390572,
          lat: 30.273794,
          info: "120.390,30.273",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        },
        {
          lng: 120.13071,
          lat: 30.187423,
          info: "120.130,30.187",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        },
        {
          lng: 120.489357,
          lat: 30.392492,
          info: "120.489,30.392",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        },
        {
          lng: 121.552173,
          lat: 31.344557,
          info: "120.489,30.392",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        },
        {
          lng: 121.497413,
          lat: 31.198628,
          info: "120.489,30.392",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        },
        {
          lng: 121.468667,
          lat: 31.114078,
          info: "120.489,30.392",
          color: "red",
          icon: "http://liangzhun.billyzc.com/img/red.png"
        }
      ]
    };
  },
  mounted() {
    // for (let i = 0; i < 10; i++) {
    //   const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
    //   this.markers.push(position)
    // }
  },
  methods: {
    goInfo(e) {
      console.log(e);
    }
  },
  components: {
    BmlMarkerClusterer
  }
};
</script>

<style lang='scss' scoped>
/* 百度地图必须设置宽高 */
.map {
  width: 100%;
  height: 600px;
}
</style>

你期待的结果是什么？实际看到的错误信息又是什么？

使用点聚合 BmlMarkerClusterer + bm-marker + bm-label效果正常显示
期望不报vue warn

Answer 1

data() {
return {

labelStyle: {color: marker.color , fontSize : '14px'}

}
}
<bm-label
:content="marker.info"
:labelStyle="labelStyle"
:offset="{width: -44, height: 30}"
/>
总结：labelStyle样式在data中定义为一个对象，然后在labelStyle使用labelStyle对象。