vue集成百度地图vue-baidu-map

1. Vue Baidu Map文档地址

https://dafrok.github.io/vue-baidu-map/#/zh/index

2. 设置npm数据源

npm config set registry=https://registry.npmmirror.com

查看npm数据源

npm config get registry

3. 安装vue-baidu-map

npm install vue-baidu-map --save

4. 配置vue-baidu-map

4.1 main.js全局注册

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: ''
})

4.2 vue页面设置

index.vue

<template>
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation></baidu-map>
</template><script>export default {name: 'Index',components: {},data() {return {lineChartData: lineChartData.newVisitis,center: {lng: 108.889191, lat:34.274342},zoom: 15}},}</script>
<style>.bm-view {width: 100%;height: 500px;}</style>

4.3 效果