如何在Google Map中同时展示热力图与标记点？

当然可以同时展示！你的问题出在标记点的代码上——你直接使用了PinElement和AdvancedMarkerElement，但这两个类属于google.maps.marker命名空间，必须加上完整的命名空间前缀，否则浏览器会因为找不到这些类而无法渲染标记点，导致看起来只能显示热力图。

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>犯罪热力图与邻里守望标记</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
var map, heatmap;

function initMap() {
  // 初始化地图
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: { lat: -28.504330, lng: 27.931830 },
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  // 初始化并添加热力图图层
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
  heatmap.set('radius', 15);

  // 创建自定义标记图标（可选，用于区分邻里守望成员）
  const pin = new google.maps.marker.PinElement({
    scale: 1.5,
    background: "#2ecc71", // 用绿色标记区分邻里守望成员
    borderColor: "#27ae60"
  });
  
  // 创建标记点并绑定到地图
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: { lat: -28.506650, lng: 27.941490 },
    content: pin.element // 绑定自定义图标
  });

  // 如果需要多个标记点，可以循环创建
  // const watchPositions = [
  //   { lat: -28.505, lng: 27.935 },
  //   { lat: -28.503, lng: 27.932 }
  // ];
  // watchPositions.forEach(pos => {
  //   new google.maps.marker.AdvancedMarkerElement({
  //     map: map,
  //     position: pos,
  //     content: pin.element
  //   });
  // });
}

// 热力图数据
function getPoints() {
  return [
    new google.maps.LatLng(-28.504440, 27.932060),
    new google.maps.LatLng(-28.504330, 27.931829)
  ];
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization,marker&callback=initMap">
    </script>
  </body>
</html>

关键说明 #

1. 命名空间修正：必须使用google.maps.marker.PinElement和google.maps.marker.AdvancedMarkerElement，不能省略命名空间前缀。
2. 图层共存逻辑：热力图（HeatmapLayer）和标记点（AdvancedMarkerElement）都是独立的地图组件，只要在初始化时将它们的map属性指向同一个地图实例，就会自动叠加显示——热力图会作为底层图层，标记点会显示在热力图上方。
3. 自定义标记（可选）：可以通过PinElement设置标记的颜色、大小等样式，方便区分不同类型的标记点。

内容的提问来源于stack exchange，提问作者Theunis Prinsloo