无法在 Google 地图中绘制多边形答案

【问题标题】：Cannot Draw Polygons in Google Maps无法在 Google 地图中绘制多边形
【发布时间】：2020-04-13 22:40:54
【问题描述】：

我有一个 Google Maps API 文件，我正在尝试在其中绘制折线和多边形。但是，当我输入用于绘制这些的代码时，我在 Google Chrome 中收到一个错误，提示我的“未捕获的语法错误：输入意外结束”结束脚本括号 ()。

这是我的代码：

<script>

  var map;
  function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    //center on the US
    center: {lat: 39.8283, lng: -98.5795},
    zoom: 5
  });

  // Define the LatLng coordinates for the polygon's path.
  var sampleCounty = [
    {lat: 32.344437, lng: -86.496774},
    {lat: 32.402814, lng: -86.717897},
    {lat: 32.340803, lng: -86.814912},
  ];

  // Construct the polygon.
  var samplePolygon = new google.maps.Polygon({
    paths: sampleCounty,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  });

  //place polygon in map
    samplePolygon.setMap(map);

  //make HTML element change color when polygon is hovered over
  google.maps.event.addListener(samplePolygon, 'mouseover', function (event) {
    document.getElementById("sampleDescription").style.color = "blue";
  });

  //make HTML element change color when polygon is not hovered over
  google.maps.event.addListener(samplePolygon, 'mouseout', function (event) {
    document.getElementById("sampleDescription").style.color = "red";
});

</script><!--end google maps API-->
<!--api link here--><script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete" async defer></script>

在我的代码中，我的 API 密钥在那里。有谁知道为什么会发生这种情况/如何解决？

【问题讨论】：

使用好的 IDE 或将您的代码粘贴到在线 Javascript 验证器中，它会告诉您问题所在。

标签： javascript google-maps-api-3 polygon polyline

【解决方案1】：

您的代码有两个问题：

在initMap 函数上缺少关闭}（导致Uncaught SyntaxError: Unexpected end of input 错误）。
脚本中包含&callback=initAutocomplete（导致"initAutocomplete is not a function" 错误），您的代码中没有initAutocomplete 函数，应该是initMap。

如果我更改这些并添加所需的 HTML/CSS，它就可以工作。

工作代码 sn-p:（注意我还更改了中心和缩放，以便您可以看到多边形）

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    //center on the US
    center: {
      lat: 32.402814,
      lng: -86.717897
    },
    zoom: 10
  });

  // Define the LatLng coordinates for the polygon's path.
  var sampleCounty = [{
      lat: 32.344437,
      lng: -86.496774
    },
    {
      lat: 32.402814,
      lng: -86.717897
    },
    {
      lat: 32.340803,
      lng: -86.814912
    },
  ];

  // Construct the polygon.
  var samplePolygon = new google.maps.Polygon({
    paths: sampleCounty,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  });

  //place polygon in map
  samplePolygon.setMap(map);

  //make HTML element change color when polygon is hovered over
  google.maps.event.addListener(samplePolygon, 'mouseover', function(event) {
    document.getElementById("sampleDescription").style.color = "blue";
  });

  //make HTML element change color when polygon is not hovered over
  google.maps.event.addListener(samplePolygon, 'mouseout', function(event) {
    document.getElementById("sampleDescription").style.color = "red";
  });
}

#map {
  height: 100%;
  width: 100%;
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

【讨论】：