百度地图API name未定义[Vue warn]: Unknown custom element: <bml-marker-clusterer>

直接上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即可。