vue使用百度地图带自动定位及搜索地址_根据公司名称获取地址 百度地图 vue

展示效果：

开始前可以先去申请一个百度地图秘钥，点击

1.创建一个loadBMap.js,调用百度地址api js

/**
 * 动态加载百度地图api函数
 * @param {String} ak  百度地图AK，必传
 */
 export default function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof window.BMap !== 'undefined') {
      resolve(window.BMap)
      return true
    }
    window.onBMapCallback = function() {
      resolve(window.BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.创建组件

<template>
  <div>
    <el-form label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="搜索地址">
          <el-autocomplete
            style="width:100%;"
            popper-class="autoAddressClass"
            v-model="addressInfo.address"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="详细地址"
            
1
2
3
4
5
6
7
8
9
10
11
12
13