百度地圖API name未定義[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

直接上html

<template>
<baidu-map class="map" center="中國">
  <bml-marker-clusterer :averageCenter="true">
    <bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
  </bml-marker-clusterer>
</baidu-map>
</template>

<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  data () {
    // 插入 10 個隨機點
    const markers = []
    for (let i = 0; i < 10; i++) {
      const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
      this.markers.push(position)
    }
    return {
      markers
    }
  },
  components: {
    BmlMarkerClusterer
  }
}
</script>

 

main.js部分

    import BaiduMap from 'vue-baidu-map';
    import {BmlMarkerClusterer} from 'vue-baidu-map';
    //引入點聚合
   Vue.component('bml-marker-cluster', BmlMarkerClusterer);
   //引入百度地圖
  Vue.use(BaiduMap, {
    ak: 'youAK'
  });

 

這種寫法是官網給的demo，不過會報錯，錯誤信息為[Vue warn]: Unknown custom element: <bml-marker-clusterer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

 

原因是 blm-marker-clusterer寫法有問題，改為blm-marker-cluster即可。