我的自定义Google Map使用单击侦听器在几个标记上顺畅放大(即一次的缩放级别(,从而揭示了运动游戏位置的多场。这些标记中的两个正确放大;其他三个步骤一直放大 - 从缩放级别11立即跳到15。其他点击事件通常会开火。
我尝试将点击侦听器和循环函数移动到我的代码的不同部分(在我的标记构造函数和外部外部(。如果在构造函数函数中移动,则不会改变功能,或者导致格式化错误打破了整个脚本。
我还将for循环中的变量从传统的" i"更改为" z",以防父母有某种干扰循环(也使用'i'(。注意:我是一个没有经验的JavaScript用户
var marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
title: markers[i][0],
label: {
text: markers[i][0],
fontSize: "12px",
fontWeight: "bold"
},
map: map,
icon: markerIcon,
calURL: markers[i][3]
});
google.maps.event.addListener(marker, 'click', function() {
map.setCenter(this.getPosition());
for (z = 1; z < 16; z++) {
map.setZoom(z)
}
var calsec = document.getElementById('capture');
calsec.innerHTML = this.calURL;
});
用于构造标记的数组的数组如下:
markers = [
['Parkinson Sports Fields', 49.88264, -119.46045, '<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&color=%23691426&ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>'],
['Rutland Sports Fields', 49.89953, -119.38019, '<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&color=%23691426&ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>'],
['Mission Sports Fields', 49.83979, -119.47623, '<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&color=%23691426&ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>'],
['Rosewood Sports Field', 49.87567, -119.56956, '<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&color=%23691426&ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>'],
['Shannon Woods Sports Field', 49.8669, -119.60595, '<iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&color=%23691426&ctz=America%2FVancouver" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>']
];
工作的两个是"帕金森运动场"one_answers"任务运动场"。其余的立即缩小。我认为它可能与地图的默认视口有关,该视口的默认视口为49.876837,-119.461071。这一点比其他领域更接近帕金森和任务。
如果有人碰巧找到这个问题并有类似的问题,我确实找到了解决方案。
google.maps.event.addListener(marker, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log(latitude);
map.setCenter(new google.maps.LatLng(latitude, longitude));
setTimeout(function() {
for (z = 1; z < 16; z++) {
map.setZoom(z)
}
}, 100);
我最初添加的setCenter线无法正确抓住单击标记的latlng对象。如上所述,重建事件侦听器可以正确抓住两个值,然后从中构建一个latlng对象。在缩放功能中添加短暂的超时为近来的映射时间,这似乎有助于缩放的光滑度。
平滑变焦适用于某些标记而不是其他标记的原因是因为SetCenter功能失败了。最接近地图原点的标记能够平稳缩放,而远离原点的标记则无法放大而无需重新介绍地图。