码云前端 2021-11-17

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

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

我的配置：

打包用的是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>

最后效果：