百度地图API name未定义[Vue warn]: Unknown custom element: <bml-marker-clusterer> - did you register the com...

直接上html

 1 <template>
 2 <baidu-map class="map" center="中国">
 3   <bml-marker-clusterer :averageCenter="true">
 4     <bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
 5   </bml-marker-clusterer>
 6 </baidu-map>
 7 </template>
 8 
 9 <script>
10 import {BmlMarkerClusterer} from 'vue-baidu-map'
11 export default {
12   data () {
13     // 插入 10 个随机点
14     const markers = []
15     for (let i = 0; i < 10; i++) {
16       const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
17       this.markers.push(position)
18     }
19     return {
20       markers
21     }
22   },
23   components: {
24     BmlMarkerClusterer
25   }
26 }
27 </script>

 

main.js部分

1     import BaiduMap from 'vue-baidu-map';
2     import {BmlMarkerClusterer} from 'vue-baidu-map';
3     //引入点聚合
4    Vue.component('bml-marker-cluster', BmlMarkerClusterer);
5    //引入百度地图
6   Vue.use(BaiduMap, {
7     ak: 'youAK'
8   });

 

这种写法是官网给的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即可。

转载于:https://www.cnblogs.com/wpw1215/p/10717080.html