从可点击的多边形 Googlemaps 打开信息窗口答案

【问题标题】：Opening an InfoWindow from a clickable Polygon Googlemaps从可点击的多边形 Googlemaps 打开信息窗口
【发布时间】：2016-12-06 05:57:53
【问题描述】：

在研究答案时，我查阅了 API 文档和示例、stackflow 上的许多类似查询和一些 Youtube 示例，但没有一个正是我想要创建的，我无法理解我哪里出错了。

在这种情况下，我们希望通过在多边形的定义边界内单击而不是通过选择标记来显示信息窗口。我了解 Googlemaps 允许您执行此操作，只要您为信息窗口提供 LatLng 位置。

我不明白为什么信息窗口没有打开......

请您查看代码，如果您能发现我遗漏的任何明显内容，请告诉我。（希望在代码注释中很清楚，但我希望在同一张地图上创建许多不同的多边形）

<!DOCTYPE html>
<html>
<head>
<title>TBC</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
  #map {
    height: 100%;
  }
/* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }


#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}


</style>
</head>
<body>
<div id="map"style="width:800px;height:1200px;"></div>

 <script>
  var map;
  function initMap() {{
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 17.247253, lng: 79.1},
      zoom: 6,
      mapTypeId: 'satellite'
    });





//BEGINNING AREA CODE 1
// Define the LatLng coordinates for the polygon.
    var hyderabadCoords = [

{lat:17.3876090549752,lng:78.5106470783611},
{lat:17.4637690550461,lng:78.5161870783663},
{lat:17.4391290550232,lng:78.4386270782939},
{lat:17.3876090549752,lng:78.5106470783611},


         ];

// Construct the polygon.            
  var hyderabadBorder = new google.maps.Polygon({
      paths: hyderabadCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.0
    });
    hyderabadBorder.setMap(map);

//Content of infobox

var hyderLatLng = {lat: 17.39, lng: 78.50};     
var contentString = "TBC"
var hyderinfowindow = new google.maps.InfoWindow({
      content: contentString,  
  position:hyderLatLng
    });

 // Add a listener for the click event.
  hyderabadBorder.addListener('click', showArrays);

hyderinfowindow = new google.maps.InfoWindow;
}
//END AREA CODE 1
//BEGINNING AREA CODE 2...(Repeat 1 with new area details)
//END ALL AREA CODES


/** @this {google.maps.Polygon} */
 function showArrays(event) {
var vertices = this.getPath();
}


}   
        </script>
 <script src="https://maps.googleapis.com/maps/api/js?        key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

您有 2 个问题：

您正在用空的内容覆盖其中包含内容的 InfoBox：

hyderinfowindow = new google.maps.InfoWindow;

你永远不会打电话给hyderinfowindow.open(map);

function showArrays(event) {
  hyderinfowindow.open(map);
}

proof of concept fiddle

代码 sn-p：

var map;

function initMap() {
  {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 17.247253,
        lng: 79.1
      },
      zoom: 9,
      mapTypeId: 'satellite'
    });

    // Construct the polygon.            
    var hyderabadBorder = new google.maps.Polygon({
      paths: hyderabadCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.0
    });
    hyderabadBorder.setMap(map);

    //Content of infobox
    var hyderLatLng = {
      lat: 17.39,
      lng: 78.50
    };
    var contentString = "TBC"
    var hyderinfowindow = new google.maps.InfoWindow({
      content: contentString,
      position: hyderLatLng
    });

    // Add a listener for the click event.
    hyderabadBorder.addListener('click', showArrays);
  }
  //END AREA CODE 1
  //BEGINNING AREA CODE 2...(Repeat 1 with new area details)
  //END ALL AREA CODES

  /** @this {google.maps.Polygon} */
  function showArrays(event) {
    hyderinfowindow.open(map);
  }
}
google.maps.event.addDomListener(window, "load", initMap);
//BEGINNING AREA CODE 1
// Define the LatLng coordinates for the polygon.
var hyderabadCoords = [

  {
    lat: 17.3876090549752,
    lng: 78.5106470783611
  }, {
    lat: 17.4637690550461,
    lng: 78.5161870783663
  }, {
    lat: 17.4391290550232,
    lng: 78.4386270782939
  }, {
    lat: 17.3876090549752,
    lng: 78.5106470783611
  },
];

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

【讨论】：