vue使用百度地图带自动定位及搜索地址

最新推荐文章于 2024-09-06 16:12:22 发布

三妹_day

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量2.2k

点赞数

分类专栏： vue js问题文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/qq_26841153/article/details/128136155

版权

本文介绍如何在Vue项目中集成百度地图，并实现自动定位和搜索地址功能。首先，你需要获取百度地图API的秘钥。接着，创建一个loadBMap.js文件引入并初始化地图API。然后，定义一个地图组件，包括地图容器和搜索框。最后，在Vue应用中使用该组件，即可看到带有定位和搜索功能的地图展示。

摘要由CSDN通过智能技术生成

展示效果：

在这里插入图片描述
开始前可以先去申请一个百度地图秘钥，点击

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)
  })
}

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="详细地址"