Question

我的自定义Google Map使用点击侦听器在多个标记上平滑地放大（即，一次放大一个级别），从而显示体育游戏位置的多边形区域。其中两个标记可以正确放大；其他三个步骤只需一步即可放大-立即从11级缩放到15级。其他点击事件正常触发。

我试图将点击侦听器和for循环函数移至代码的不同部分（在标记构造函数之内和之外）。如果在构造函数中四处移动，则功能不会改变，或者会导致格式化错误，从而破坏整个脚本。

我还将for循环中的变量从传统的“ i”更改为“ z”，以防对父for循环产生某种干扰（也使用“ i”）。注意：我是一个没有经验的javascript用户，所以我不知道这是否相关，或者每个for循环是否完全自包含，明智的使用变量名。

        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>']
        ];

起作用的两个是“帕金森运动场”和“任务运动场”。其余立即放大。我认为这可能与地图的默认视口有关，该视口的中心为49.876837，-119.461071。这一点比其他领域更接近帕金森和米申。

Answer 1

如果有人碰巧发现了这个问题并且有类似的问题，我确实找到了解决方法。

            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功能失败。最靠近地图原点的标记能够平滑缩放，而离原点较远的标记无法缩放而不重新居中。

平滑的单击缩放功能可在某些标记上使用，而在其他标记上不可用

1 个答案: