【高德地图】地址关键词模糊检索，重写原生效果

原创

已于 2023-05-21 00:20:05 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-05-20 11:06:37 首次发布

本文介绍了如何使用高德地图JSAPI进行地址检索，包括返回文字结果和使用自定义面板。通过监听输入框事件，调用AMap.Autocomplete进行搜索，并在回调中处理数据。检索结果通过Pinia在不同组件间同步，并优化了用户交互体验，如高亮选中项。

目前高德地图地址检索的模式有两种，一种仅显示文字结果，一种返回面板，如下图

如果你不想使用JS API的结果面板，panel可以缺省或者赋值false，然后可以在search()的回调中处理自己的逻辑。

placeSearch.search('北京大学', function (status, result) {
   // 查询成功时，result即对应匹配的POI信息
});

也可以根据项目的风格，重新自定义

首先在template写好输入框，请注意需要给该元素标识唯一id（tipinput），监听回车事件，调用以下api。若需要结合系统的数据，请注意需处理经纬度问题，因为高德是火星坐标系，不一致的话会出现定位不准确的问题。

AMap.plugin(['AMap.AutoComplete'], function () {
        const autoComplete = new AMap.Autocomplete({
          input: 'tipinput',
        });
        autoComplete.search(keyword, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            result.tips.forEac