因需求而生：Vue + 高德地图 API 封装选址组件的实现

2023-10-28 17:26:21

起因

之前公司有一个调用地图选址组件来实现快速定位的需求。但是使用腾讯和高德地图通过 iframe 内嵌调用都不满足要求，索性就使用零碎的高德地图 api 来自己封装一个简易的选址组件……

现状

组件设计

我们的选址组件是一个 Vue 组件，它包含一个地图容器和一个搜索输入框。地图容器使用高德地图 API 创建，搜索输入框用于搜索地址或位置。当用户在搜索输入框中输入地址或位置时，组件会使用高德地图 API 进行搜索，并将搜索结果显示在地图上。用户可以选择一个搜索结果作为选址位置，并将该位置的经纬度返回给父组件。

实现细节

组件的实现主要分为两部分：地图容器的创建和搜索功能的实现。

地图容器的创建

我们使用高德地图 API 的 AMap.Map 类来创建地图容器。在创建地图容器时，我们需要指定地图容器的 DOM 元素和地图的中心点。我们还可以设置地图的缩放级别、地图类型和地图样式。

搜索功能的实现

我们使用高德地图 API 的 AMap.Geocoder 类来实现搜索功能。当用户在搜索输入框中输入地址或位置时，组件会使用 AMap.Geocoder 类进行搜索，并将搜索结果返回给组件。我们然后将搜索结果显示在地图上，供用户选择。

组件使用

我们可以通过以下代码将组件添加到 Vue 项目中：

<template>
  <div>
    <amap-site-picker></amap-site-picker>
  </div>
</template>

<script>
import AmapSitePicker from './amap-site-picker.vue';

export default {
  components: {
    AmapSitePicker,
  },
};
</script>