在某些标记上使用的单击对Zoom功能平滑,而不是其他标记



我的自定义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&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&amp;color=%23691426&amp;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&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&amp;color=%23691426&amp;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&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&amp;color=%23691426&amp;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&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&amp;color=%23691426&amp;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&amp;height=500&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=blackbeancreative.com_mgj0i3q12ang1as82p8ggf3fuc%40group.calendar.google.com&amp;color=%23691426&amp;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功能失败了。最接近地图原点的标记能够平稳缩放,而远离原点的标记则无法放大而无需重新介绍地图。

最新更新