Question

在研究答案时，我已经参考了API文档和示例，关于stackflow和一些Youtube示例的许多类似查询，但没有一个正是我想要创建的，我无法理解我出错的地方。

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

我无法理解的是为什么infowindow没有开放...

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

<!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>

Answer 1

你有两个问题：

您正在覆盖包含其内容的InfoBox，其中包含一个空的：

hyderinfowindow = new google.maps.InfoWindow;

您永远不会致电hyderinfowindow.open(map);

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

proof of concept fiddle

代码段

＆＃13;

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
  },
];

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

从可点击的多边形Googlemaps

1 个答案: