$ npm install vue-baidu-map --save <template> <!-- ak是密钥,仅局部注册组件时声明 --> <!-- ak是密钥,仅局部注册组件时声明 --> <baidu-map :center="{lng: 120.090385, lat: 36.076321}" :scroll-wheel-zoom="true" :zoom="17" class="bm-view" ak="I7evKX7e5UabIwr8k6qQ530DigDmVYiN"> <!--比例尺控件左上角--> <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale> <!--缩放控件右下角--> <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation> <!--跳动标记--> <bm-marker :position="{lng: 120.090385, lat: 36.076321}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker> </baidu-map> </template> <script> //局部注册方式 import BaiduMap from 'vue-baidu-map/components/map/Map.vue' import BmScale from 'vue-baidu-map/components/controls/Scale' import BmNavigation from 'vue-baidu-map/components/controls/Navigation' import BmMarker from 'vue-baidu-map/components/overlays/Marker' export default { components: { BaiduMap, BmScale, //比例尺 BmNavigation, //缩放 BmMarker, //标记 }, </script> <style> .bm-view { width: 100%; height: 300px; } </style>
「Vue — 插件」百度地图vue-baidu-map
官方
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
申请密钥
http://lbsyun.baidu.com/apiconsole/key
自动生成器
http://api.map.baidu.com/lbsapi/creatmap/index.html
大佬例子
https://www.cnblogs.com/jiekzou/p/10485604.html
示例: