vue2+高德地图web端开发（三）

前言·：

本章根据关键字获取相关的地点 POI 信息

官方文档：

输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)

搜索地点-入门教程-地图 JS API 2.0 | 高德地图API (amap.com)

参考手册-地图 JS API 2.0 | 高德地图API (amap.com)

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

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

AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
  var autoOptions = {
    //城市，默认全国
    city: "北京",
    //使用联想输入的 input 的 id
    input: "input",
  };
  var autocomplete = new AMap.AutoComplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    city: "北京",
    map: map,
  });
  autocomplete.on("select", function (e) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name);
  });
});

下面是具体步骤：

老生常谈了，依然是添加插件和变量

 

 

再将其实例化以及调用search方法就可以了：

展示：