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

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

如果你不想使用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.forEach((e) => {
              resultList.push(e);// resultList是先接口请求系统相关的项目数据，处理好适合高德地图需要的经纬度信息等，方便渲染点/定位
            });
            mapStore.setSearchResult(resultList);
          }
        });
      });

由于地图跟检索结果的渲染不在同一个组件，我是使用Pinia更新检索结果数据。拿到结果列表，就可以按照正常的Vue写法去渲染了。

优化：点击列表某项时添加高亮效果，以凸显与其他项的不同，达到更好的用户体验。

至此我们的需求就完成啦^-^

​