谷歌地图API信息窗口
Google Maps API InfoWindows
我有一个带有多个标记的谷歌地图。我试图在我的信息窗口中显示每个标记的信息:
function initializeMaps() {
var latlng = new google.maps.LatLng(59.4920, 37.3010);
var myOptions = {
zoom: 6,
center: latlng,
disableDefaultUI: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var mc = new MarkerClusterer(map);
var marker, i;
for (i = 0; i < data.markers.length; i++) {
var image = "/images/markers/green-marker.png";
marker = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
map: map,
title: data.markers[i].name,
icon: image,
});
/*jshint loopfunc: true */
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
for (i=0; i<data.markers.length; i++) {
infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
infoWindow.open(map, marker);
}
});
})(marker, data);
latlngbounds.extend(marker.position);
mc.addMarker(marker);
}
var bounds = new google.maps.LatLngBounds();
}
但它只在地图上的每个标记infoWindow上显示我的数组的最后一个元素信息。在我的JSON文件下面:
var data = {
"markers":[
{
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "redsquare_location",
"description": "Descr Sample Text",
"lat": "51.4910",
"lng": "31.2985",
"link": "images/infowindows/rs_rp.png",
},
{
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "pchurch_location",
"description": "Descr Sample Text",
"lat": "51.4925",
"lng": "31.3007",
"link": "images/infowindows/pc_rp.png",
},
{
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "muschool_location",
"description": "Decr Sample Text",
"lat": "51.4932",
"lng": "31.3054",
"link": "images/infowindows/ms_rp.png",
}
]
}
我的错误是什么?
由于这个,您只能看到最后一个元素信息
var marker, i;
for (i = 0; i < data.markers.length; i++) {
var image = "/images/markers/green-marker.png";
marker = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
map: map,
title: data.markers[i].name,
icon: image,
});
google.maps.event.addListener(marker, "click", function (e) {
...
});
}
您正试图在"for"循环中设置事件侦听器。因此,您的情况与在中为循环传递参数不起作用而创建的Javascript多个动态addEventListener非常相似。
如果你使用这样的东西,这个代码就会起作用:
data.markers.forEach(function(marker){
var image = "/images/markers/green-marker.png";
var mapMarker = new google.maps.Marker({
position: new google.maps.LatLng(marker.lat, marker.lng),
map: map,
title: marker.name,
icon: image,
});
google.maps.event.addListener(marker, "click", function(e) {
...
});
mc.addMaker(mapMarker);
})
问题的重复:Google Maps JS API v3-简单多标记示例
您没有在点击监听器中的i
变量上获得函数闭包,并且通过点击监听器内部的循环将始终在数据的最后一个条目处留下信息窗口中的信息:
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
for (i=0; i<data.markers.length; i++) {
infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
infoWindow.open(map, marker);
}
});
})(marker, data);
最简单的解决方案是对填充信息窗口所需的数据进行函数闭包,因此您不需要在每次点击标记时迭代整个输入数据集:
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>");
infoWindow.open(map, marker);
});
})(marker, data.markers[i]);
概念验证小提琴
代码片段:
function initializeMaps() {
var latlng = new google.maps.LatLng(59.4920, 37.3010);
var myOptions = {
zoom: 6,
center: latlng,
disableDefaultUI: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var mc = new MarkerClusterer(map);
var marker, i;
for (i = 0; i < data.markers.length; i++) {
var image = "http://maps.google.com/mapfiles/ms/icons/green.png";
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
map: map,
title: data.markers[i].name,
icon: image,
});
/*jshint loopfunc: true */
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>");
infoWindow.open(map, marker);
});
})(marker, data.markers[i]);
latlngbounds.extend(marker.position);
mc.addMarker(marker);
}
// var bounds = new google.maps.LatLngBounds();
map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, "load", initializeMaps);
var data = {
"markers": [{
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "redsquare_location",
"description": "Descr Sample Text 0",
"lat": "51.4910",
"lng": "31.2985",
"link": "images/infowindows/rs_rp.png",
}, {
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "pchurch_location",
"description": "Descr Sample Text 1",
"lat": "51.4925",
"lng": "31.3007",
"link": "images/infowindows/pc_rp.png",
}, {
"city": "City Sample Text",
"name": "Name Sample Text",
"shortname": "muschool_location",
"description": "Decr Sample Text 2",
"lat": "51.4932",
"lng": "31.3054",
"link": "images/infowindows/ms_rp.png",
}]
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 防止Iframe窗体在新窗口中打开
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时,可拖动的对象会出现在容器外部
- Javascript排序的图像弹出窗口..可以't单独弹出
- 窗口大小html css
- 弹出窗口出现,然后退出
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- Javascript更新孙窗口中的表单元素
- 如何在选项卡上定义属性'的主窗口对象
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 召回窗口加载事件 - javascript
- 为什么不显示警报窗口
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- Chrome应用程序调整窗口大小保持纵横比
- 新选项卡被弹出窗口阻止程序阻止
- 如何访问UIWebView'的子窗口上下文
- 刷新父窗口后无法关闭窗口
- 自动关闭弹出窗口的Javascript
- 如何使用特定大小的浏览器窗口打开我的页面