javascript - Google map v3 标记事件

Question

我有一个 map ，它使用 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++;
    }

如您所见，我正在尝试在底部添加一个点击事件，该事件将根据点击的标记执行不同的操作(或相同的操作但针对不同的表格行)。但是，它不起作用。调试似乎点击事件被每个 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

本质上，必须将点击事件中的函数移动到一个外部函数，该函数返回一个具有我想要的效果的函数。看起来这可能是一个常见的 Javascript 东西，而不仅仅是与 map 有关。只是我经验不足!

希望对大家有帮助。

Answer 1

解决了:)

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

本质上，必须将点击事件中的函数移动到一个外部函数，该函数返回一个具有我想要的效果的函数。看起来这可能是一个常见的 Javascript 东西，而不仅仅是与 map 有关。只是我经验不足!

希望对大家有帮助。