选择所有Google地图标记

Question

for (i = 0; i < locations.length; i++) {
    var image = new google.maps.MarkerImage(
        'logo.png',
        null, // size
        new google.maps.Point( 0, 0 ), // origin 
        new google.maps.Point( 24, 48 ), // anchor (move to center of marker)
        new google.maps.Size( 48, 48 ) // scaled size (required for Retina display icon)
    );
    marker = new google.maps.Marker({
        icon: image,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        flat: true,
        optimized: false,
        map: map,
        visible: true,
        customInfo: locations[i][0]
    });
    google.maps.event.addListener(marker, 'click', function() {
        alert('hello');
        console.log(this);
        map.setZoom(17);
        map.setCenter(this.getPosition());
        marker.setClickable (false);
        $('#map').append('<div class="reset" id="reset">Reset</div>');
        var office;
        if (this.customInfo == "Town A"){
            office = $('.city-a').html();
        } else {
            office = $('.city-b').html();                       
        }
        $('#map').append('<div class="office" id="office">'+office+'</div>');
        var reset = document.getElementById('reset');
        google.maps.event.addDomListener(reset, 'click', function() {
            map.setZoom(9);
            map.setCenter(new google.maps.LatLng(54.403758,-2.566102));
            $('#reset, #office').remove();
            marker.setClickable (true);
        });
    });
}

使用上面我可以绘制标记，但我尝试使用marker.setClickable (false);使所有标记不可点击，但这只会更改最后绘制的标记。< / p>

当有google.maps.event.addListener(marker, 'click', function() {运行时，是否有人能够指出我可以改进代码的位置以使所有标记不可点击。

提前致谢

Answer 1

在javascript中查看closures。以下是应该有效的版本。

function setEventListener(marker) {
    google.maps.event.addListener(marker, 'click', function() {
        alert('hello');
        console.log(this);
        map.setZoom(17);
        map.setCenter(this.getPosition());
        marker.setClickable (false);
        $('#map').append('<div class="reset" id="reset">Reset</div>');
        var office;
        if (this.customInfo == "Town A"){
            office = $('.city-a').html();
        } else {
            office = $('.city-b').html();                       
        }
        $('#map').append('<div class="office" id="office">'+office+'</div>');
        var reset = document.getElementById('reset');
        google.maps.event.addDomListener(reset, 'click', function() {
            map.setZoom(9);
            map.setCenter(new google.maps.LatLng(54.403758,-2.566102));
            $('#reset, #office').remove();
            marker.setClickable (true);
        });
    });
}

---

for (i = 0; i < locations.length; i++) {
    var image = new google.maps.MarkerImage(
        'logo.png',
        null, // size
        new google.maps.Point( 0, 0 ), // origin 
        new google.maps.Point( 24, 48 ), // anchor (move to center of marker)
        new google.maps.Size( 48, 48 ) // scaled size (required for Retina display icon)
    );
    marker = new google.maps.Marker({
        icon: image,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        flat: true,
        optimized: false,
        map: map,
        visible: true,
        customInfo: locations[i][0]
    });
    setEventListener(marker);
}

---

第二种解决方案

for (i = 0; i < locations.length; i++) {
    var image = new google.maps.MarkerImage(
        'logo.png',
        null, // size
        new google.maps.Point( 0, 0 ), // origin 
        new google.maps.Point( 24, 48 ), // anchor (move to center of marker)
        new google.maps.Size( 48, 48 ) // scaled size (required for Retina display icon)
    );
    marker = new google.maps.Marker({
        icon: image,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        flat: true,
        optimized: false,
        map: map,
        visible: true,
        customInfo: locations[i][0]
    });
    google.maps.event.addListener(marker, 'click', function(marker) {
        return function() {
            alert('hello');
            console.log(this);
            map.setZoom(17);
            map.setCenter(this.getPosition());
            marker.setClickable (false);
            $('#map').append('<div class="reset" id="reset">Reset</div>');
            var office;
            if (this.customInfo == "Town A"){
                office = $('.city-a').html();
            } else {
                office = $('.city-b').html();                       
            }
            $('#map').append('<div class="office" id="office">'+office+'</div>');
            var reset = document.getElementById('reset');

            google.maps.event.addDomListener(reset, 'click', function() {
                map.setZoom(9);
                map.setCenter(new google.maps.LatLng(54.403758,-2.566102));
                $('#reset, #office').remove();
                marker.setClickable (true);
            });
        }
    })(marker));    
}