javascript-单击时,Google Maps API v3中的多个标记链接到不同页面
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-单击时,Google Maps API v3中的多个标记链接到不同页面，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2142字，纯文字阅读大概需要4分钟。
内容图文
我有一个带有多个标记的地图,这些标记是通过数组填充的.每个标记都是可点击的,并且应将用户带到每个标记的不同网址.
问题在于,所有标记在显示正确标题时都使用数组中最后一个条目的网址.
这是我的代码：
var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("bigmap"), myOptions);
setMarkers(map, properties);
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['213 Bennett Avenue',40.8574384,-73.9333426,'Mjkz'],
['50 Overlook Terrace',40.8543752,-73.9362542,'Mjky'],
['850 West 176 Street',40.8476012,-73.9417571,'OTM='],
['915 West End Avenue',40.8007478,-73.9692155,'Mjkx']];
function setMarkers(map, buildings) {
var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var bounds = new google.maps.LatLngBounds;
for (var i in buildings) {
var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
bounds.extend(myLatLng);
var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
}
map.fitBounds(bounds);
}
使用此代码,单击任何标记会将用户带到“详细信息？b = Mjkx”
我究竟做错了什么？
解决方法:
问题是您的点击处理程序正在使用外部函数中的i变量.
执行循环不会在每次迭代中单独复制变量,因此您的回调函数对所有回调都使用相同的i值.
要解决此问题,请编写一个单独的函数来生成回调.
例如：
function buildClickHandler(i) {
return function() { window.location = ('detail?b=' + buildings[i][3]); };
}
for(var i = 0; i < buildings.length; i++) {
//...
google.maps.event.addListener(marker, 'click', buildClickHandler(i));
}
(您需要在setMarkers中定义buildClickHandler,以便它可以使用buildings参数)
顺便说一句,当遍历数组时,您将选择shouldn’t use a for in loop,因为它还会遍历数组对象上的所有其他成员.
内容总结
以上是互联网集市为您收集整理的javascript-单击时,Google Maps API v3中的多个标记链接到不同页面全部内容，希望文章能够帮你解决javascript-单击时,Google Maps API v3中的多个标记链接到不同页面所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。