【vue】如何使用百度地图详情步骤

VUE2中使用百度地图展示页面

---

---

---

一、创建百度地图账号，获取秘钥，文档有详情步骤

百度地图文档：https://lbsyun.baidu.com/apiconsole/key#/home

二、使用步骤

1.引入库

代码如下（示例）：npm install vue-baidu-map --save

如果控制台出现报错可在index.html加上：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=webgl&ak=你的秘钥"></script>

如果控制台出现报错可在.eslintrc.js加上：
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //在rules中添加自定义规则
     //关闭组件命名规则
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

//main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import BaiduMap from 'vue-baidu-map'
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(BaiduMap, {
  ak: '你的秘钥'
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.展示地图页面

代码如下（示例）：

//mapview.vue页面
<template>
  <div>
    地图页面
    <baidu-map class="bm-view" :center=center :scroll-wheel-zoom="true" :zoom="zoom" @ready="handler">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'new',
  components: {
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },//定位
      zoom: 3 //缩放等级

    }
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 114.299815
      this.center.lat = 30.595174
      // this.zoom = 10 //市级区域
      this.zoom = 13 //更精确的缩放
    }

  },
  mounted() {

  },
}
</script>

<style lang='less' scoped>
.bm-view {
  width: 100%;
  height: 800px;
}
</style>

页面使用代码。

---

页面效果展示