打开每个多边形谷歌地图V3的InfoWindow

Question

希望有人可以帮我解决这个问题.我正在尝试为用户创建的每个多边形单击打开信息窗口.我使用相同的代码作为标记,并且运行良好,但我无法使其适用于每个多边形.

有关如何解决这个问题的任何想法？

谢谢.

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2>Test</h2>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

//显示区域

<?php foreach ($field->result() as $f):?>

// Create an array with the coordanates of each area

var field<?=$f->id?>Coords = [
    <?php $latlng=$this->resources_data->field_latlng($f->id);?>
    <?php foreach ($latlng->result() as $point):?>
    new google.maps.LatLng(<?=$point->lat?>, <?=$point->lng?>),
    <?php endforeach;?>
];

// Create a polygon with the points of the area

var area<?=$f->id?>=new google.maps.Polygon({
    paths: area<?=$f->id?>Coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

// Add the area to the map.

area<?=$f->id?>.setMap(map);

google.maps.event.addListener(area<?=$f->id?>,'click',function(){
    infowindow.open(map,area<?=$f->id?>)
});

<?php endforeach;?>

Answer 1

您不能使用相同形式的InfoWindow.open作为用于标记的多边形(没有要传入的标记).

从文档中

打开(地图？:地图| StreetViewPanorama,锚？:MVCObject)

返回值:无

在给定的地图上打开此InfoWindow.可选地,InfoWindow可以与锚相关联.在核心API中,唯一的锚是Marker类.但是,锚可以是任何公开LatLng位置属性的MVCObject,也可以是用于计算pixelOffset的Point anchorPoint属性(请参阅InfoWindowOptions).anchorPoint是从锚点位置到InfoWindow顶端的偏移量.)

当您使用InfoWindow.setPosition()调用open方法(点击的latlng通常是一个不错的选择)时,您需要专门设置要打开的位置.

例

代码段:

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function initialize() {
  var geolib = google.maps.geometry.spherical;
  var myOptions = {
    zoom: 20,
    center: new google.maps.LatLng(32.738158, -117.14874),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  bounds = new google.maps.LatLngBounds();

  var polygon1 = new google.maps.Polygon({
    map: map,
    path: [geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 0),
      geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 120),
      geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, -120)
    ],
    name: "polygon1"
  });
  google.maps.event.addListener(polygon1, 'click', function(event) {
    var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6);
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
  for (var i = 0; i < polygon1.getPath().getLength(); i++) {
    bounds.extend(polygon1.getPath().getAt(i));
  }
  var polygon2 = new google.maps.Polygon({
    map: map,
    path: [geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 180),
      geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 60),
      geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, -60)
    ],
    name: "polygon2"
  });
  google.maps.event.addListener(polygon2, 'click', function(event) {
    var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6);
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
  for (var i = 0; i < polygon2.getPath().getLength(); i++) {
    bounds.extend(polygon2.getPath().getAt(i));
  }

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function createClickablePoly(poly, html, label, point) {
  gpolys.push(poly);
  if (!point && poly.getPath && poly.getPath().getLength && (poly.getPath().getLength > 0) && poly.getPath().getAt(0)) {
    point = poly.getPath().getAt(0);
  }
  var poly_num = gpolys.length - 1;
  if (!html) {
    html = "";
  } else {
    html += "<br>";
  }
  var length = poly.Distance();
  if (length > 1000) {
    html += "length=" + poly.Distance().toFixed(3) / 1000 + " km";
  } else {
    html += "length=" + poly.Distance().toFixed(3) + " meters";
  }
  for (var i = 0; i < poly.getPath().getLength(); i++) {
    html += "<br>poly[" + poly_num + "][" + i + "]=" + poly.getPath().getAt(i);
  }
  html += "<br>Area: " + poly.Area() + " sq meters";
  // html += poly.getLength().toFixed(2)+" m; "+(poly.getLength()*3.2808399).toFixed(2)+" ft; ";
  // html += (poly.getLength()*0.000621371192).toFixed(2)+" miles";
  var contentString = html;
  google.maps.event.addListener(poly, 'click', function(event) {
    infowindow.setContent(contentString);
    if (event) {
      point = event.latLng;
    }
    infowindow.setPosition(point);
    infowindow.open(map);
    // map.openInfoWindowHtml(point,html); 
  });
  if (!label) {
    label = "polyline #" + poly_num;
  }
  label = "<a href='javascript:google.maps.event.trigger(gpolys[" + poly_num + "],\"click\");'>" + label + "</a>";
  // add a line to the sidebar html
  //  side_bar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />';
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<table border="1" style="height:100%; width:100%">
  <tr>
    <td>
      <div id="map_canvas" style="width:100%; height:100%"></div>
    </td>
    <td width="200">
      <div id="report"></div>
    </td>
  </tr>
</table>