如何显示特定于标记的infowindow中的内容?
我根据搜索结果创建了带有标记数量的Google地图(api v3)。当我点击一个标记时,它会打开一个infowindow。让infowindow显示与其标记相关的信息的最佳方式是什么?与所有标记相关的信息位于我从ajax请求接收的json对象中。如何显示特定于标记的infowindow中的内容?
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'specific information associated to the marker clicked'
});
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infowindow.open(map, this);
});
不完全确定你在做什么。您尝试加载哪个/哪些内容?
google.maps.event.addListener(marker, 'click', (function(event, index) {
return function(){
infowindow.content = markersArray[index].yourcontent;
// or
infowindow.content = yourcontentarray[index];
infowindow.open(map,this);
}
})(marker,i));
请确保您在函数外声明了标记和infowindow变量。
这段代码有几个缺陷。首先,** event **是IIFE的一个参数,它应该是返回函数的参数。这里的事件实际上等于传入的标记,而不是事件。标记甚至不需要传入。接下来,您应该使用infowindow的setContent方法,而不是直接设置content属性。虽然设置属性将起作用,但它会绕过MVCObject的KVO优势。例如,使用setContent将触发infowindow的content_changed事件,直接设置该属性不会。 – puckhead 2012-03-09 16:21:29
您的例子一些错别字(proint)在你循环的顶部:
for (i=0; i < result.point.length; i++) {
var info_window_content = result.point[i].Latitude + '<br />';
info_window_content += result.point[i].Longitue + '<br />';
// etc for any value in you json object
// create your marker as is.
...
var infowindow = new google.maps.InfoWindow({
content: info_window_content
});
// etc, etc.
你确实需要一个事件监听添加到每个标记,因为你在做什么。我没有看到任何问题。 除了我会使用infoWindow.open(地图,标记)与此。
有可能是一个更有效的方法来做到这一点,即infoWindow.open();之后; infoWindow.setContent(info_window_content)
谢谢埃里克!我首先使用了'this',这样infowindow就会根据标记进行定位。我实施了您的解决方案,但可能会因为内容保持不变而出错。寻找加载与标记关联的内容的方法。 – 2012-03-09 01:28:23
首先,您应该将forWindow的创建从for循环移出。
下一页下,更改附加click事件到这一点:
google.maps.event.addListener(markersArray[i], 'click', function(content) {
return function(event){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));
你想用,而不是这标记。 这个将引用事件发生的对象,而标记将引用创建的最后一个标记。
以下链接由其他人发布。这是我想要实现的一个完美例子。 http://updates.orbitz.com/ – 2012-03-09 02:30:10
上面应该得到你想要的。如果不是,你能提供更新的代码吗?另外,以JavaScript格式代替PHP的JSON示例会更有帮助。 – puckhead 2012-03-09 02:49:33
它最终奏效! synthax错误... Shane,傻瓜,我非常感谢你的帮助。 – 2012-03-09 03:08:24
如上建议只创建1个infoWindow。
标记内的内容存储:
var marker = new google.maps.Marker({
position: latLng,
title: i.toString(),
//set your content here
content:'your specific content'
//map: map
});
窗口的开放:
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
试试这个,它的工作原理我测试了它已经
// Add markers
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
// marker info start
var infowindow = new google.maps.InfoWindow();
(function (marker, result.point[i]) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
var infoContent: "specific information associated to the marker clicked"
});
infoWindow.setContent(infoContent);
infowindow.open(map, marker);
});
// selected marker 4 infowindow
(marker, result.point[i]);
markersArray.push(marker);
}
链接到居住码将是有价值的。 – andresf 2012-03-08 23:40:40
你想要多个信息窗口还是只有一个?您的代码现在的方式是为每个标记创建一个新的信息窗口,但是只会显示最后一个创建的信息窗口。如果你的意图是只有一个,那么你应该把它的创建移出for循环。 – puckhead 2012-03-08 23:52:26
我同意更多的代码会有帮助,至少是JSON对象。 – puckhead 2012-03-09 00:01:25