Question

我有一张地图，它使用for循环和单独的函数添加标记集合

function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

...

        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }
}

function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (pointer + 1)).css('background', 'red');
        });


        pointer++;
    }

正如您所看到的，我正在尝试在底部添加一个click事件，该事件将执行不同的操作，具体取决于单击的标记（或相同的操作，但不同的表行）。但是，它不起作用。调试看起来好像click事件被每个for循环替换而不是创建一个新循环，所以它总是会改变最后一个表行的背景颜色（在这种情况下是第四个）。

任何帮助都非常感激。

克里斯

编辑：这是我的所有代码

<script type="text/javascript">

    var pointerArray = new Array();
    var map;
    var lat;
    var long;
    var pointer = 0;

    $(document).ready(function () {

        initialize();

    });

    function initialize() {
        // Go and fetch the pointers from the database and create an array of them here
        pointerArray.push(new pointers("meet coach", 51.4550, -0.969088));
        pointerArray.push(new pointers("meet coach", 51.4530, -0.964195));
        pointerArray.push(new pointers("meet coach", 51.0530, -0.714195));
        pointerArray.push(new pointers("meet coach", 51.3530, -0.114195));

        var bounds = new google.maps.LatLngBounds(); ;
        for (i = 0; i < pointerArray.length; i++) {
            bounds.extend(new google.maps.LatLng(pointerArray[i].lat, pointerArray[i].long));
        }

        // set map options
        var myOptions = {
            zoom: 16,
            center: bounds.getCenter(), /* Center on the group here */
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            streetViewControl: false,
            scaleControl: false,
            rotateControl: false
        };

        // Generate map to draw on
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.fitBounds(bounds);

        // my position
        for (i = 0; i < pointerArray.length; i++) {
            setTimeout(function () {
                addMarkers();
            }, (i + 1) * 200);
        }

    }


    function addMarkers() {
        var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: pointerArray[pointer].title,
            icon: "/images/icons/pointer-" + (pointer + 1) + ".png"
        });

        var currPointer = pointer;
        google.maps.event.addListener(marker, 'click', function () {
            $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red');
        });


        pointer++;
    }


    function pointers(title, lat, long) {
        this.title = title;
        this.lat = lat;
        this.long = long;
    }




</script>

解决了：）

在此处找到此文章：http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

基本上，必须将click事件中的函数移动到外部函数，该函数返回具有所需效果的函数。看起来这可能是一个常见的Javascript事情，而不仅仅与地图有关。只是我的经验不足！

希望这能帮助你们所有人。

Answer 1

解决了：）

在此处找到此文章：http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

基本上，必须将click事件中的函数移动到外部函数，该函数返回具有所需效果的函数。看起来这可能是一个常见的Javascript事情，而不仅仅与地图有关。只是我的经验不足！

希望这能帮助你们所有人。

Answer 2

变量pointer的定义位置和方式是什么？事件处理程序未被替换，但每次调用它时都会读取pointer全局变量，该变量在地图上创建所有标记后应始终为4。

尝试替换

    google.maps.event.addListener(marker, 'click', function () {
        $('#mapDirections tr#' + (pointer + 1)).css('background', 'red');
    });

与

    var currPointer = pointer;
    google.maps.event.addListener(marker, 'click', function () {
        $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red');
    });

Google会映射v3标记事件

2 个答案: