百度地图在vue中使用_bm-label-CSDN博客

本文链接：https://blog.csdn.net/weixin_41487694/article/details/94554852

说一下自己遇到的坑

1.在地图显示点 BmMarker

最终实现的效果

我的写法是在页面使用的时候在进行一地图引入（局部注册）

代码

<baidu-map class="map" ak="RiyTMxuMEPkKAoMHW47HD3XmG0pEhXNr" center="杭州市" :zoom="10">
          <bm-marker :position="{lng: 120.119114, lat: 30.322371}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-label content="杭州汽车北站" :labelStyle="{color: 'red', fontSize : '16px'}" :offset="{width: -35, height: 20}"/>
          </bm-marker>
          <bm-marker :position="{lng: 120.119114, lat: 30.40171}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-label content="我的家" :labelStyle="{color: 'red', fontSize : '16px'}" :offset="{width: -35, height: 20}"/>
          </bm-marker>
</baidu-map>

import { BaiduMap,BmMarker,BmLabel} from 'vue-baidu-map';

你可以发现BmLabel 组件这个在文档中没有引入，报错的意思就是你得 bm-Lable 没有找到

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Unknown custom element: <bm-label> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Map> at src/views/echarts/map.vue
       <ElMain> at packages/main/src/main.vue
         <ElContainer> at packages/container/src/main.vue... (1 recursive calls)
           <Home> at src/views/home.vue
             <App> at src/App.vue
               <Root>
warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629
webpack-internal:///./node_modules/vue/dist/vue.esm.js:9069 Download the