目前高德地图地址检索的模式有两种,一种仅显示文字结果,一种返回面板,如下图
如果你不想使用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写法去渲染了。
优化:点击列表某项时添加高亮效果,以凸显与其他项的不同,达到更好的用户体验。
至此我们的需求就完成啦^-^