Question

我已经在StackOverflow和Google搜索中阅读了很多其他帖子，但我仍然无法使其正常运行。我认为它与我的for循环有关。我已经为信息窗口设置了鼠标悬停事件，但我想要的是当你点击它并将其放在地图中心时，地图可以放大标记。我试过了：

google.maps.event.addListener(marker,'click',function(e) {
                map.setZoom(9);
                map.setCenter(e.latLng);
            });

哪种效果最好，但仍然并不总是以标记为中心，尤其是在多次点击后。有时标记甚至不在视野中。

我真正想要使用的代码片段是：

// add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }

因为假设有平滑的变焦。但是我几乎无法让这个人工作。标记上的大多数点击都会转到纽约长岛或其他地方。

我的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(42, -97),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var jobs = [
        ['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
        ['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
        ['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
        ['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
        ['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
        ['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
        ['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
        ['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
        ['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
    ];

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infoWindow = new google.maps.InfoWindow;

        for (var i = 0; i < jobs.length; i++) {
            var city = jobs[i][0];
            var state = jobs[i][1];
            var lat = jobs[i][2];
            var lng = jobs[i][3];
            var desc = jobs[i][4];
            var z = i;
            var myLatLng = new google.maps.LatLng(lat, lng);

            var content = '<div class="map-content"><h3>' + city + ', ' + state +
                 '</h3>' + desc + '</div>';

            var marker = new google.maps.Marker({
                map: map,
                title: city + state,
                position: myLatLng,
                zIndex: z
            });

            google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
                return function() {
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                }
            })(marker, content));

            // add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }
        }
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
    <div id="map-canvas"/>
</body>
</html>

如果我删除用于尝试缩放单击事件的代码并将其从循环中取出，则它仅适用于我的长岛标记（因为这是处理的数组中的最后一个信息）。任何关于如何使这个以点击标记为中心的帮助都会很棒。我无法真正找到任何已在数组和循环上实现的搜索。我是Google API的新手，我只做了基本的Javascript。

编辑：An example of this is here.

Answer 1

看起来你有一个范围问题。

尝试使用eventlistener：

google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
});

这可以在这里工作：

http://jsfiddle.net/iambnz/mQEwh/

Answer 2

试试这个以使smoothZoom工作：

从smoothZoom函数的行中删除“self”，即

else {
                y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                    google.maps.event.removeListener(y);
                    smoothZoom(map, max, cnt + 1);

基本上它对我不起作用，所以我在浏览器上调出了错误控制台，所以在这一点上说错误就是说self.smoothZoom不是函数。

我删除了“自我”并且它有效。有一些玩耍与setTimeout变量，使其更顺畅。但至少它有效：）

Google地图只需点击多个标记即可放大标记

2 个答案: