搜索地点 最后更新时间: 2024年07月12日

1.1 准备

1.2 创建地图

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});

1.3 引入和创建搜索服务插件，搜索关键字并查看结果

与前面提到的控件的引入和安装一样，推荐使用异步安装插件。通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。插件引入方式 插件的使用。

AMap.plugin(["AMap.PlaceSearch"], function () {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5, //单页显示结果条数
    pageIndex: 1, //页码
    city: "010", //兴趣点城市
    citylimit: true, //是否强制限制在设置的城市内搜索
    map: map, //展现结果的地图实例
    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
    autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
  });
  placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果
});

因为实例化插件时，使用了panel参数（panel: 'my-panel'），所以执行了search()之后，搜索结果将展示在结果面板中：

注意：你可以通过CSS自定义结果面板的样式，包括宽高、位置等属性

//在回调函数中使用插件功能
placeSearch.search("北京大学", function (status, result) {
  //查询成功时，result 即对应匹配的 POI 信息
});