Question

如何获取多个多边形的google maps infowindow？我设法得到多个多边形，但是我有问题为多边形和中心信息窗口显示信息窗口。

var editedPolygons = [
   [
      [
         {
            "lat":14.56754606924714,
            "lng":120.99225461483002
         },
         {
            "lat":14.567213783453319,
            "lng":120.9916752576828
         },
         {
            "lat":14.566736121747363,
            "lng":120.99207758903503
         }
      ],
      {
         "color":"green",
         "title":"---------------------------------------info content green"
      }
   ],
   [
      [
         {
            "lat":14.566383066777853,
            "lng":120.99221169948578
         },
         {
            "lat":14.566325954891425,
            "lng":120.99138557910919
         },
         {
            "lat":14.565635419093956,
            "lng":120.9915840625763
         },
         {
            "lat":14.565635419093956,
            "lng":120.9925840625763
         }
      ],
      {
         "color":"red",
         "title":"----------------------------------------------info content red"
      }
   ]
];

var map;

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(14.5667, 120.9927),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    for (var i = 0; i < editedPolygons.length; i++) {
        var poly = new google.maps.Polygon({
        	fillColor: editedPolygons[i][1].color,
       		strokeWeight: 2,
          path: editedPolygons[i][0],
          map: map
        });
        
    		var infowindow = new google.maps.InfoWindow({
    			content: editedPolygons[i][1].title
  			});
        
    		poly.addListener('click', function() {
    			infowindow.open(map, poly);
  			});
    }
}

google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing&ext=.js"></script>
<div id="googleMap"></div>

Answer 1

InfoWindow需要一个职位。您可以使用google.maps.Marker作为open方法的第二个参数（或使用MVCObject属性传递position），也可以在创建时设置其位置。

来自documentation

的

一个锚可以是暴露LatLng位置属性的任何MVCObject

将其设置为多边形中心的最简单方法是计算多边形边界的中心并使用它。

// use function closure to associate the infowindow with the polygon
poly.addListener('click', (function(content) {
  return function() {
    // set the content
    infowindow.setContent(content);
    // set the position
    infowindow.setPosition(this.center);
    // open it
    infowindow.open(map);
  }
})(editedPolygons[i][1].title));

proof of concept fiddle

var map;

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(14.5667, 120.9927),
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  for (var i = 0; i < editedPolygons.length; i++) {
    var bounds = new google.maps.LatLngBounds();

    var poly = new google.maps.Polygon({
      fillColor: editedPolygons[i][1].color,
      strokeWeight: 2,
      path: editedPolygons[i][0],
      map: map
    });

    for (var pathidx = 0; pathidx < poly.getPath().getLength(); pathidx++) {
      bounds.extend(poly.getPath().getAt(pathidx));
    }
    // store the computed center as a property of the polygon for easy access
    poly.center = bounds.getCenter();
    var infowindow = new google.maps.InfoWindow();
    var title = editedPolygons[i][1].title;
    // use function closure to associate the infowindow with the polygon
    poly.addListener('click', (function(content) {
      return function() {
        // set the content
        infowindow.setContent(content);
        // set the position
        infowindow.setPosition(this.center);
        // open it
        infowindow.open(map);
      }
    })(editedPolygons[i][1].title));
  }
}

google.maps.event.addDomListener(window, "load", initialize);
var editedPolygons = [
  [
    [{
      "lat": 14.56754606924714,
      "lng": 120.99225461483002
    }, {
      "lat": 14.567213783453319,
      "lng": 120.9916752576828
    }, {
      "lat": 14.566736121747363,
      "lng": 120.99207758903503
    }], {
      "color": "green",
      "title": "---------------------------------------info content green"
    }
  ],
  [
    [{
      "lat": 14.566383066777853,
      "lng": 120.99221169948578
    }, {
      "lat": 14.566325954891425,
      "lng": 120.99138557910919
    }, {
      "lat": 14.565635419093956,
      "lng": 120.9915840625763
    }, {
      "lat": 14.565635419093956,
      "lng": 120.9925840625763
    }], {
      "color": "red",
      "title": "----------------------------------------------info content red"
    }
  ]
];

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&ext=.js"></script>
<div id="googleMap"></div>

Answer 2

问题来自infowindow变量随时间变化的事实（每次i在循环内发生变化时，它指向不同的对象。）

如果您更换

poly.addListener('click', function() {
                infowindow.open(map, poly);
            });

与

(function(infowindow) {
          poly.addListener('click', function() {
            infowindow.open(map, poly);
          });
        })(infowindow);

它会起作用，因为匿名函数会强制代码跟踪好对象。

要在多边形的中心显示信息窗，您必须计算此中心的位置。然后将其传递给infowindow对象（它具有position属性）。

谷歌地图 - InfoWindows用于多个多边形

2 个答案: