码云前端开发 2021-11-17

超详细的vue3+高德地图实现模糊搜索功能

文章目录隐藏

第一步：完善高德地图 api 的基本配置
第二步：在 vue3 项目中使用高德地图 api
最后附上完整代码

高德地图官网地址：点击进入

我的配置：

打包用的是 webpack，vite 踩坑后打算再观望一阵。

第一步：完善高德地图 api 的基本配置

先注册开发者账号，进入应用管理界面，应用管理界面就是咱右上角的那个头像，hover 之后会有个弹窗，找到「应用管理」点击进入。
找到右侧的「应用管理」菜单，点开后选择我的应用。
点击右上角创建新应用，应用类型看自己软件的定位。
点击创建好应用的添加按钮。
设置应用配置。
ps：服务平台要选 web 端(JS API) ，不要选 web 服务；
域名不写表示所有域都可以访问。
添加完成后，中间有个 key，很长一段文字的，待会要用到:

第二步：在 vue3 项目中使用高德地图 api

复制刚刚创建好的 key。
在 pulic/index.html 通过 CDN 引入高德地图 api。
ps：CDN 在这里的意指通过链接加载的某些组件库，而不是通过 npm，组件通过 CDN 加载可以启到一定程度的加速效果。
```
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=粘贴刚刚复制好的 key"></script>
```

在项目根目录创建文件 vue.config.js ，注意配置文件最好别用 ts，在 js 文件中粘贴以下代码:

module.exports = {
    configureWebpack: {
        externals: {
            'AMap': 'AMap' // 表示 CDN 引入的高德地图
        }
    }
}

新建 vue 文件，粘贴以下 css 代码和结构。
ps：css 代码是搜索框的样式，高德地图也有自带。

<template>
  <div class="box">
    <div id="container" style="width:500px; height:300px"></div>
    <div class="info">
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text" style="width:8rem;">请输入关键字</span>
        </div>
        <input id='tipinput' type="text">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "~@/styles/scss/_global.scss";
.info {
  padding: .5rem .7rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 15rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid $themeTextColor;
    border-radius: .2rem;
    .input-item-prepend {
      margin-right: -1px;
    }
    .input-item-prepend {
      width: 35%;
      font-size: 13px;
      border-right: 1px solid $themeTextColor;
      height: 100%;
      display: flex;
      align-items: center;
      background: rgba(240, 131, 0, .1);
      span {
        text-align: center;
      }
    }
    input {
      width: 60%;
      background: #fff;
      padding: .2rem .6rem;
      margin-left: .3rem;
      border: none;
    }
  }
}
</style>

在 srcipt 标签中引入AMap（高德地图）组件，并且在onMounted生命周期中使用，具体用意可以看代码中的注释。
ps：不能在setup周期中使用，因为那时候 DOM 元素还未创建，找不到 DOM 元素。

<script>
import AMap from 'AMap' // 引入高德地图
import { onMounted } from 'vue'
export default {
  name: 'Login',
  setup () {
    onMounted(() => {
      const map = new AMap.Map('container', { // 这里表示创建地图 第一个参数表示地图的 div 的 id
        resizeEnable: true // 表示是否在加在所在区域的地图，如果定了别的区域，比如北京，就会默认加载北京
      })
      // 使用 AMap 插件 第一个是搜索框插件，第二个地址信息（经纬度名字之类）的插件
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
        const autoOptions = {
          // 使用联想输入的 input 的 div 的 id
          input: 'tipinput'
        }
        const autocomplete = new AMap.Autocomplete(autoOptions)
        const placeSearch = new AMap.PlaceSearch({
          city: '北京', // 默认城市，一定要有，不然没有放大效果
          map: map // 地图，选中会有放大功能，绑定上面创建的地图即可
        })
        AMap.event.addListener(autocomplete, 'select', function(e) {
          console.log(e.poi.location) // 获取选中的的地址的经纬度
          placeSearch.search(e.poi.name)
        })
      })
    })
    return {
    }
  }
}
</script>

最后附上完整代码

<template>
  <div class="box">
    <div id="container" style="width:500px; height:300px"></div>
    <div class="info">
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text" style="width:8rem;">请输入关键字</span>
        </div>
        <input id='tipinput' type="text">
      </div>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap' // 引入高德地图
import { onMounted } from 'vue'
export default {
  name: 'Login',
  setup () {
    onMounted(() => {
      const map = new AMap.Map('container', { // 这里表示创建地图 第一个参数表示地图的 div 的 id
        resizeEnable: true // 表示是否在加在所在区域的地图，如果定了别的区域，比如北京，就会默认加载北京
      })
      // 使用 AMap 插件 第一个是搜索框插件，第二个地址信息（经纬度名字之类）的插件
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
        const autoOptions = {
          // 使用联想输入的 input 的 div 的 id
          input: 'tipinput'
        }
        const autocomplete = new AMap.Autocomplete(autoOptions)
        const placeSearch = new AMap.PlaceSearch({
          city: '长沙',
          map: map
        })
        AMap.event.addListener(autocomplete, 'select', function(e) {
          console.log(e.poi.location) // 获取选中的的地址的经纬度
          placeSearch.search(e.poi.name)
        })
      })
    })
    return {
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/scss/_global.scss";
.info {
  padding: .5rem .7rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 15rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid $themeTextColor;
    border-radius: .2rem;
    .input-item-prepend {
      margin-right: -1px;
    }
    .input-item-prepend {
      width: 35%;
      font-size: 13px;
      border-right: 1px solid $themeTextColor;
      height: 100%;
      display: flex;
      align-items: center;
      background: rgba(240, 131, 0, .1);
      span {
        text-align: center;
      }
    }
    input {
      width: 60%;
      background: #fff;
      padding: .2rem .6rem;
      margin-left: .3rem;
      border: none;
    }
  }
}
</style>

最后效果：