高德地图POI搜索

高德地图POI搜索

参考：《输入提示与POI搜索》

输入提示插件 & POI搜索插件

1. 输入提示插件：AMap.Autocomplete
2. POI搜索插件：AMap.PlaceSearch

实际应用中会将输入提示插件和POI搜索插件结合使用

输入提示和POI搜索插件结合使用

演示：高德地图 - 输入提示和POI搜索插件结合使用

通常Autocomplete和PlaceSearch结合使用，使用时只需在select事件的响应函数中调用PlaceSearch的相关查询方法，这里我们使用PlaceSearch包装好的map属性来实现POI搜索结果的显示：

let map = new AMap.Map('mapContainer', {
  resizeEnable: true,
  // center: [116.397428, 39.90923],//地图中心点
  // zoom: 13,//地图显示的缩放级别
  // keyboardEnable: false
});

AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
  let autoOptions = {
    // city: "北京", //城市，默认全国
    input: 'keyword'
  };

  let autocomplete = new AMap.Autocomplete(autoOptions);

  let placeSearch = new AMap.PlaceSearch({
    // city:'北京',
    map
  });
  AMap.event.addListener(autocomplete, 'select', (e) => {
    // TODO 针对选中的POI实现自己的功能
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);
  });
  
  // 以下加入POI后生成的marker的点击事件代码
});

另外，加上POI搜索以后生成的marker的点击事件，用于获取经纬度：

// POI后生成的marker的点击事件
AMap.event.addListener(placeSearch, 'markerClick', (e) => {
let location = e.data.location;
setTimeout(() => {
  alert(`名称：${e.data.name}\n经纬度：${location.lng},${location.lat}`);
}, 800);
});