打开每个多边形谷歌地图V3的InfoWindow [英] Open InfoWindow for each polygon google maps V3
本文介绍了打开每个多边形谷歌地图V3的InfoWindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在点击时为我的用户创建的每个多边形打开一个信息窗口。
我使用了相同的代码作为标记并且效果很好，但是我无法使它适用于每个多边形。
关于如何解决此问题的任何想法？
谢谢。
var contentString ='< div id =content>'+
'< div id =siteNotice>'+
'< / div>'+
'< h2>测试< / h2> ;'+
'< / div>';
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
//显示区域
<？php foreach（$ field-> result（）as $ f）：？>
//用每个区域的coordan创建一个数组
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; ？>
];
//创建一个面积为点的多边形
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
}）;
//将区域添加到地图。
area<？= $ f-> id？> .setMap（map）;
google.maps.event.addListener（area <？= $ f-> id？>，'click'，function（）{
infowindow.open（map，area< ？= $ f-> id？>）
}）;
<？php endforeach;？>
解决方案
不能使用 InfoWindow.open 用于标记的多边形（没有标记通过）。
从文档
打开（地图？：Map | StreetViewPanorama，anchor？：MVCObject）
返回值：无
打开给定地图上的InfoWindow。可选地，InfoWindow可以与锚点关联。 在核心API中，唯一的锚点是Marker类。但是，锚点可以是任何公开用于计算pixelOffset的LatLng位置属性和Point anchorPoint属性的任何MVCObject（请参阅InfoWindowOptions）。 ）
您需要专门设置您想要的位置在调用open方法（点击的时间点通常是一个不错的选择）和InfoWindow.setPosition（）之间打开。
代码段：
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））; } google.maps.event.addDomListener（window，'load'，initialize）;函数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（）;如果（长度> 1000）{html + =length =+ poly.Distance（）。toFixed（3）/ 1000 +km; } else {html + =length =+ poly.Distance（）。toFixed（3）+meters; } for（var i = 0; i
body，html {height：100％; width：100％;}
< script src = http://maps.google.com/maps/api/js?libraries=geometry\"> ;</script><table border =1style =height：100％; width：100％> < TR> < TD> < div id =map_canvasstyle =width：100％; height：100％>< / div> < / TD> < td width =200> < div id =report>< / div> < / TD> < / table>
Hope someone can help me with this issue. I'm trying to open an info windows on click for each polygon that my users created. I used the same code for a marker and works well but i couldn't make it work for each polygon.
Any thoughts on how to solve this problem?
Thanks.
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2>Test</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Show Areas
<?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;?>
解决方案
You can't use the same form of InfoWindow.open for a polygon as you use for a marker (there is no marker to pass in).
From the documentation
open(map?:Map|StreetViewPanorama, anchor?:MVCObject)
Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.)
You need to specifically set the place you want it to open when you call the open method (the latlng of the click is usually a good choice) with InfoWindow.setPosition().
code snippet:
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>
这篇关于打开每个多边形谷歌地图V3的InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
