10分钟搞定vue+百度地图10分钟搞定vue+百度地图 1、账号和获取密钥（AK）申请入口：控制台

1、账号和获取密钥（AK）

AK秘钥申请

JavaScript API只支持浏览端的AK进行接入与访问，请开发者在申请AK时注意选择正确的AK类型。

2.点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

3.为了防止您的AK被盗用，请您务必配置refer白名单，只有该白名单中的网站才能成功发起调用。如下方示例所示，配置了*.mysite.com*为域名白名单，即代表域名中包含.mysite.com的网站=才可以使用该AK访问JS API的服务

2、API引用

方式一： nuxt.config.js

head: {
    ...
    script: [
      {
        type: 'text/javascript',
        src:
          'https://api.map.baidu.com/api?v=2.0&ak=您的密钥',
        body: true
      }
    ]
  },

方式二：index.html

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=您的密钥">
</script>

方式三：vue-baidu-map

想了解其详细使用方法可点击官方了解，这里不做过多介绍vue-baidu-map 官方地址

$ npm install vue-baidu-map --save

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
 
<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

注意：如果出现下图引用加载百度地图报错问题

该报错说明浏览器阻止加载其js

可查看浏览器设置/隐私、搜索和服务，设置相关跟踪防护，如下图所示：

3、废话不多说直接上代码（检索和标记简单功能）

<template>
    <el-autocomplete
      ref="address-autocomplete"
      v-model="queryAddress"
      :fetch-suggestions="queryAddressSearchAsync"
      :trigger-on-focus="false"
      placeholder="搜索关键字"
      clearable
      @select="handleAddressSelect"
    >
      <template slot-scope="{ item }">
        <div class="address-box">
          <i class="el-icon-search"/>
          <div>
            <div class="address-title">{{ item.title }}</div>
            <span class="address ellipsis">{{ item.address }}</span>
          </div>
        </div>
      </template>
    </el-autocomplete>
    <div id="bd-map-container"/>
</template>

data() {
    return {
        zoom: 16,
        bdmap: {},
        mk: '', // Marker实例
        longitude: null,
        latitude: null,
    }
}

methods: {
    queryAddressSearchAsync(str, cb) {
      let options = {
        onSearchComplete: function(res) {
          //检索完成后的回调函数
          let s = []
          if (local.getStatus() === BMAP_STATUS_SUCCESS) {
            for (let i = 0; i < res.getCurrentNumPois(); i++) {
              s.push(res.getPoi(i))
            }
            cb(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
          } else {
            cb(s)
          }
        }
      }
      let local = new BMap.LocalSearch(this.bdmap, options) //创建LocalSearch构造函数
      local.search(str) //调用search方法，根据检索词str发起检索
    },
    handleAddressSelect(item) {
      const value = this.$refs['address-autocomplete'].value
      this.getAddrByPoint(item.point, value)
    },
    /**
     * 逆地址解析函数（根据坐标点获取详细地址）
     * @param {Object} point  百度地图坐标点，必传
     */
    getAddrByPoint(point, address = '') {
      let that = this
      let geco = new BMap.Geocoder()
      geco.getLocation(point, function(res) {
        that.mk.setPosition(point) //重新设置标注的地理坐标
        that.bdmap.panTo(point) //将地图的中心点更改为给定的点
        that.address = address || res.address //记录该点的详细地址信息
        that.longitude = point.lng.toFixed(6)
        that.latitude = point.lat.toFixed(6)
        that.$forceUpdate()
      })
    },
    initBaiDuMap() {
      this.bdmap = new BMap.Map('bd-map-container')
      this.mk = new BMap.Marker(new BMap.Point(116.404,39.915)) //创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
      this.bdmap.addOverlay(this.mk) //将覆盖物添加到地图中
      this.getAddrByPoint(new BMap.Point(116.404,39.915))
      this.bdmap.centerAndZoom(new BMap.Point(116.404,39.915), this.zoom)
      //添加地图类型控件
      this.bdmap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      // 缩放级别按钮
      let toprightnavigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_ZOOM
      })
      this.bdmap.addControl(toprightnavigation)
      this.bdmap.addEventListener('click', e => {
        this.getAddrByPoint(new BMap.Point(e.point.lng, e.point.lat))
      })
    },
}

<style lang="scss" scoped>
    #bd-map-container {
      height: 300px;
    }
</style>