选定标记的缩放不正确

Question

我通过数组循环填充我的标记它工作正常。接下来是我在标记的弹出窗口内动态创建了一个按钮。现在我的问题是，当我点击按钮时，它会放大当前选中的标记，但不是。我该如何解决这个问题？这是我的代码

/* Show pop up on click */
google.maps.event.addListener(marker, 'click', function () {
    infoWindow.setContent(this.content);
    infoWindow.open(this.getMap(), this);

    /* Zoom In from current Marker */
    $('#zoomin').bind('click', function() {
        map.setCenter(marker.position);
        marker.setMap(map);
        map.setZoom(20);
    });

    /* Zoom Out from current Marker */
    $('#zoomout').bind('click', function() {          
        map.setCenter(phil);
        map.setZoom(7);
    });
});

整个代码（工作但缩放错误）

        / *用于映射的整个代码* /

    /* Initialize the map */
    function initMap() {
        /* Init. the map and center it in phil */
        var phil = {lat: 12.8797, lng: 121.7740};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: phil
        });

    /* 
    Create a marker on button click 
    google ref : event listener must be use
    */

    google.maps.event.addDomListener(document.getElementById('btn-generate'), 'click', function(evt) {
        /* get the data of lat long for the markers */
        $.ajax({  
            type: 'POST',  
            url: 'qry_map.php', 
            success: function(data) {
                var arraypath = [];
                var markers = [];
                var data1 = JSON.parse(data);
                data1 = data1.aaData;

                for (var i = 0; i < data1.length; i++) {

                    /* Get lat and long */
                    var lat1 = data1[i].lat;
                    var lng1 = data1[i].long;
                    var lat2 = data1[i+1].lat;
                    var lng2 = data1[i+1].long;


                    /* Get FSP Details for marker pop up */
                    var code     =  data1[i].code;
                    var vdate    =  data1[i].vdate;
                    var timein   =  data1[i].nt1;
                    var timeout  =  data1[i].nt2;
                    var customer =  data1[i].name;
                    var address  =  data1[i].address;
                    var type     =  data1[i].type;

                    /* for checking see map lat and long */
                    console.log(lat1 + "," + lng1);

                    /* Put the markers */
                    var marker = new google.maps.Marker({
                        position: {
                            lat: parseFloat(lat1),
                            lng: parseFloat(lng1)
                        },
                        map: map,
                        title: code
                    });

                    /* Pop up content */
                    marker.content = tableFSP(
                        code,
                        vdate,
                        timein,
                        timeout,
                        customer,
                        address,
                        type,
                        lat1,
                        lng1
                    );

                    /* Put the pop up in the markers */
                    var infoWindow = new google.maps.InfoWindow();

                    /* Show pop up on click */
                    google.maps.event.addListener(marker, 'click', function () {
                        infoWindow.setContent(this.content);
                        infoWindow.open(this.getMap(), this);

                        /* Zoom In from current Marker */
                        $('#zoomin').bind('click', function() {
                            marker.setMap(map);
                            map.setZoom(20);
                            map.setCenter(marker.position);
                        });

                        /* Zoom Out from current Marker */
                        $('#zoomout').bind('click', function() {          
                            map.setCenter(phil);
                            map.setZoom(7);
                        });
                    });

                    /* Create routing for each markers */
                    var link = 'decode.php?lat1=' + lat1 + '&lng1=' + lng1 + '&lat2=' + lat2 + '&lng2=' + lng2;
                    $.ajax({   
                        url: link, 
                        success: function(data) {
                            var data2 = data.points;
                            var arr_path = [];
                            for (var j = 0; j < data2.length; j++) {
                                var lat = data2[j].lat;
                                var lng = data2[j].lng;
                                arr_path.push({'lat' : parseFloat(lat),'lng' : parseFloat(lng)});
                            }

                            var Path = new google.maps.Polyline({
                                path: arr_path,
                                geodesic: true,
                                strokeColor:'red',
                                strokeOpacity: 1.0,
                                strokeWeight: 2
                            });
                            Path.setMap(map);
                        }
                    });
                }
            }
        });
    });
}

Answer 1

尝试：

$('#zoomin').bind('click', function() {
    marker.setMap(map);
    map.setZoom(20);
    map.setCenter(marker.position); // Moved after zoom
});

我不记得setZoom是否保留了之前的中心，因此放大后设置中心更安全，更类似于Google地图文档中的示例。