地图POI搜索后标记不显示是怎么回事

シ慧慧提问于 2026-02-14 23:32:29 阅读 15

交互

最近在做地图应用的POI搜索功能，用的是高德地图API。按文档写完搜索接口后，虽然能拿到数据，但根据坐标生成的标记就是不显示在地图上。折腾了一下午，控制台也没报错…

我先调用AMap.placeSearch()搜索附近餐馆，成功获取到poiList数据。然后遍历数据用map.add(createMarker(item.location))添加标记，但地图上完全看不到红点。甚至连第一个手动设置的测试标记都消失了，这是怎么回事啊？

代码大概是这样的：


const search = new AMap.PlaceSearch();
search.searchNearBy('餐馆', map.getCenter(), 1000, (status, data) => {
  if (status === 'complete') {
    data.pois.forEach(poi => {
      const marker = new AMap.Marker({
        position: [poi.location.lng, poi.location.lat],
        icon: 'marker.png'
      });
      map.add(marker); // 这里没反应
    });
  }
});

连最简单的测试代码都不行：


const testMarker = new AMap.Marker({
  position: [116.397428, 39.90923], // 北京坐标
  title: '测试'
});
map.add(testMarker); // 这个也消失了

POI搜索

我来解答赞 1 收藏

反馈

1 条解答

萌新.广云 Lv1

这个问题大概率是地图实例的状态或者标记创建的方式有问题。先说几个可能的原因，然后给个解决方案。

第一种可能是地图实例的缩放层级太低，导致标记点超出了当前可视范围。你搜索到的POI点可能离中心点比较远，但地图没调整到合适的缩放级别，所以你看不到标记。建议在添加标记后手动调一下地图的缩放和中心点，比如用 map.setZoomAndCenter(15, [lng, lat])，确保地图显示范围是对的。

第二种可能是标记的图标路径有问题。icon: 'marker.png' 这里你用了相对路径，但实际上这个路径很可能找不到图片资源。高德地图API对图标的路径要求比较严格，如果图片加载失败，标记是不会显示的。建议换成绝对路径或者直接使用高德提供的默认图标试试，比如把 icon 参数去掉，默认就会用红色的标记点。

第三种可能是地图实例的状态被意外覆盖了。你提到连测试代码都不行，这说明问题可能出在地图实例本身。如果你在其他地方重新初始化了地图，或者对地图实例做了某些操作（比如清空覆盖物），那之前添加的标记都会被移除。检查一下代码中有没有类似 map.clearMap() 或者重复初始化地图的操作。

最后，给你一段修复后的代码示例：

const search = new AMap.PlaceSearch();

search.searchNearBy('餐馆', map.getCenter(), 1000, (status, data) => {

  if (status === 'complete') {

    data.poiList.pois.forEach(poi => {

      const marker = new AMap.Marker({

        position: [poi.location.lng, poi.location.lat],

        // 换成默认图标，避免路径问题

        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'

      });

      map.add(marker);

    });

    // 调整地图视野，确保所有标记可见

    map.setFitView();

  }

});



// 测试标记也加上

const testMarker = new AMap.Marker({

  position: [116.397428, 39.90923], // 北京坐标

  title: '测试'

});

map.add(testMarker);

map.setZoomAndCenter(15, [116.397428, 39.90923]); // 确保测试标记在视野内

总结一下：先确认地图的缩放和中心点是否合理，检查图标路径是否有问题，最后排查地图实例的状态是否被覆盖。按这个思路应该能解决你的问题。如果还不行，再看看有没有其他代码干扰了地图实例。

2026-02-15 00:03