如何在Google Map API网页中实现点击按钮显示三角形？求问题排查

嗨，Marco！我来帮你排查这个问题~ 要实现点击按钮在地图上显示三角形，通常需要检查几个关键环节，我先列一些常见的坑，你可以先对照自查，同时如果能把你的.js和.html代码片段贴出来，会更容易定位具体问题哦：

• 地图实例是否正确初始化：确保你已经成功创建了Google Maps的Map实例，并且按钮的点击事件绑定是在地图初始化完成之后执行的，不然可能找不到地图对象。
• 多边形（三角形）的坐标是否正确：三角形需要三个有效的经纬度坐标，要确认坐标格式是{lat: 纬度值, lng: 经度值}，并且坐标点在地图可视范围内。
• 点击事件绑定是否正确：检查按钮的addEventListener是否正确绑定，有没有拼写错误，比如按钮的id是否匹配，或者是否在DOM加载完成后才绑定事件。
• 多边形是否正确添加到地图：创建google.maps.Polygon对象时，一定要把map属性设置为你的地图实例，或者创建后调用setMap(map)方法把它添加到地图上。

举个简单的正确示例供你参考：

HTML部分 #

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Triangle Demo</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script src="your-script.js"></script>
    <style>
      #map { height: 400px; width: 100%; }
    </style>
  </head>
  <body>
    <button id="testBtn">测试按钮</button>
    <div id="map"></div>
  </body>
</html>

JS部分 #

let map;

function initMap() {
  // 初始化地图
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.7128, lng: -74.0060 }, // 纽约坐标示例
    zoom: 12,
  });

  // 绑定按钮点击事件
  document.getElementById("testBtn").addEventListener("click", () => {
    // 创建三角形多边形
    const triangle = new google.maps.Polygon({
      paths: [
        { lat: 40.7128, lng: -74.0060 },
        { lat: 40.7308, lng: -73.9918 },
        { lat: 40.7064, lng: -73.9882 }
      ],
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map // 直接关联到地图实例
    });
  });
}

// 确保页面加载完成后初始化地图
window.onload = initMap;

你可以对比自己的代码，看看有没有遗漏上述的关键步骤。如果还是有问题，把你的代码贴出来，我帮你具体分析~

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