百度地图API name未定义[Vue warn]: Unknown custom element: <bml-marker-clusterer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

直接上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即可。
posted @ 2019-04-16 14:51  小安排  阅读(3774)  评论(0)  编辑  收藏  举报