Google 地图信息窗口位置

Question

这是一个具有三个多边形的 sample google map。我将每个多边形的信息窗口设置为，

 for (var i in coordinates) {
           arr = [];

   for (var j=0; j < coordinates[i].length; j++) {
              arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[i][j][0]),
                    parseFloat(coordinates[i][j][1])
              ));

              bounds.extend(arr[arr.length-1])
            }

  // Construct the polygon.
  polygons.push(new google.maps.Polygon({
                paths: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);      

            var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

google.maps.event.addListener(polygons[polygons.length-1], 'click', function(event) {
  infowindow.open(map);
  infoWindow.setPosition(event.latLng);
  });     

}

但是信息窗口显示在左上角。如何将其设置在点击多边形的中心？

Answer 1

两期：

你的点击监听代码有错，javascript区分大小写，infowindow和infoWindow是不同的对象，所以你没有设置信息窗口的位置正确。
```
infowindow.open(map);
infoWindow.setPosition(event.latLng);
```
您当前将信息窗口放置在单击的位置 infoWindow.setPosition(event.latLng);。

如果您希望信息窗口位于多边形边界的中心，您需要将其放置在那里：

updated fiddle

代码片段：

var map, infoWindow;
var infoWindow = new google.maps.InfoWindow({
  content: "Hello World!"
});

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bounds = new google.maps.LatLngBounds();
  var polygons = [];
  var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (var i in coordinates) {
    arr = [];
    var polyBounds = new google.maps.LatLngBounds();
    for (var j = 0; j < coordinates[i].length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[i][j][0]),
        parseFloat(coordinates[i][j][1])));

      bounds.extend(arr[arr.length - 1]);
      polyBounds.extend(arr[arr.length - 1]);
    }
    var IWpoint = polyBounds.getCenter();
    // Construct the polygon.
    polygons.push(new google.maps.Polygon({
      paths: arr,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      IWpoint: IWpoint
    }));
    polygons[polygons.length - 1].setMap(map);
    var centerMark = new google.maps.Marker({
      map: map,
      position: IWpoint,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        anchor: new google.maps.Point(3.5, 3.5),
        size: new google.maps.Size(7, 7)
      },
      title: "polygon " + i
    });
    google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {
      infoWindow.setPosition(this.IWpoint);
      infoWindow.open(map);
    });

  }
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, 'load', initialize);
// Define the LatLng coordinates for the polygon's path.
var coordinates = {
  "feed1": [
    [25.774252, -80.190262],
    [18.466465, -66.118292],
    [32.321384, -64.75737],
    [25.774252, -80.190262]
  ],

  "feed2": [
    [26.774252, -81.190262],
    [19.466465, -67.118292],
    [33.321384, -65.75737],
    [26.774252, -81.190262]
  ],

  "feed3": [
    [27.774252, -82.190262],
    [20.466465, -68.118292],
    [34.321384, -66.75737],
    [27.774252, -82.190262]
  ]
};

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

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

如果你想把它放在多边形 "centroid" 上，你需要计算它并将它放在那里：

// from 
function get_polygon_centroid(pts) {
   var first = pts[0], last = pts[pts.length-1];
   if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first);
   var twicearea=0,
   x=0, y=0,
   nPts = pts.length,
   p1, p2, f;
   for ( var i=0, j=nPts-1 ; i<nPts ; j=i++ ) {
      p1 = pts[i]; p2 = pts[j];
      f = p1.lat()*p2.lng() - p2.lat()*p1.lng();
      twicearea += f;          
      x += ( p1.lng() + p2.lng() ) * f;
      y += ( p1.lat() + p2.lat() ) * f;
   }
   f = twicearea * 3;
   return new google.maps.LatLng(y/f, x/f);
}

jsfiddle

Google 地图信息窗口位置

Google map infowindow position

javascript

google-maps

events

infowindow