infowindow不工作
infowindow不工作
提问于 2012-10-29 11:10:35
我已经尝试了几个小时来解决这个问题，但是一直没有成功。希望有人能给我一个解决方案。
我有几个多边形，当单击它们时，我希望显示它们在siteName中的值。我没有得到一个错误，但我也没有得到信息窗口显示。
提前感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<p id="demo">coordinates</p>
</br>
<p id="coords">coordinates</p>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization,MVCObject">
</script>
<script>
var map;
function initialize() {
var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668);
var mapOptions = {
zoom: 10,
center: kansas_city,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Create a <script> tag and set the geoJSON file as the source.
var script = document.createElement('script');
// (In this example we use a locally stored copy instead.)
script.src = 'sector.json';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
var siteNames;
window.sector_callback = function(results) {
for (var i = 0, len = results.features.length; i < len; i++) {
var coords = results.features[i].geometry.coordinates[0];
siteNames = results.features[i].properties.Name; // added for site names
var path = [];
for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
}
var polygons = new google.maps.Polygon({
path: path,
map: map
});
var contentString = siteNames;
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(polygons, 'click', function() {
infowindow.open(map,polygons);
content: contentString
});
google.maps.event.addListener(polygons, 'mouseover', function() {
var currentPolygon = this;
currentPolygon.setOptions({ // setOptions is a method and properties below
fillOpacity: 0.45,
fillColor: "#FF0000",
})
});
google.maps.event.addListener(polygons, 'mouseout', function() {
var currentPolygon = this;
currentPolygon.setOptions({
fillOpacity: 0.35,
fillColor: "#000000"
})
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-29 11:17:04
这可能不是唯一的问题，但它绝对是一个问题。文本content: contentString挂在不知名的地方；我想您希望它是这样的：
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(polygons, 'click', function() {
infowindow.open(map,polygons);
});编辑
这里有第二个问题：infowindow在循环的每次迭代中都会被覆盖。它需要被煮熟：
google.maps.event.addListener(polygons, 'click', (function(infowindow) {
return function() {
infowindow.open(map,polygons);
content: contentString
}
})(infowindow)
);Stack Overflow用户
发布于 2012-10-29 14:23:12
将信息窗口内容与多边形关联的一种方法是使用function closure。你还需要设置infowindow的显示位置，如果你没有使用标记，唯一允许的锚点(至少目前)是一个标记。
一个可能的"createClickablePoly“函数：
function createClickablePoly(poly, html) {
google.maps.event.addListener(poly, 'click', function(evt) {
infowindow.setContent(html);
infowindow.setPosition(evt.latLng);
infowindow.open(map);
});
}Example using function closure
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13115430
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号