标记数组,其中包含Google地球中每个标记的链接

时间:2011-11-22 12:34:42

标签: javascript google-maps-api-3

以下代码在用户点击特定Google地球标记时无法重定向用户。其他一切都很好。有什么指针吗?

javascript:

$(function() {
    var latArray = ($("#google_map_section").attr("data-lat")).split(", ");
    var longArray = ($("#google_map_section").attr("data-long")).split(", ");
    var nameArray = ($("#google_map_section").attr("data-name")).split(", ");
    var urlArray = ($("#google_map_section").attr("data-url")).split(", ");
    var mylatlngs = [];
    var markers = [];
    var counter = 0;
    var bounds = new google.maps.LatLngBounds();

    while(counter < latArray.length){
       mylatlngs.push(new google.maps.LatLng(
           parseFloat(latArray[counter]),
           parseFloat(longArray[counter]))
        );
        counter++
    };
    var myOptions = {
        zoom: 12,
        center: mylatlngs[mylatlngs.length-1],
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("google_map_section"),
        myOptions
    );
    counter = 0;
    while (counter < mylatlngs.length){
        markers.push(new google.maps.Marker({
            position: mylatlngs[counter], 
            map: map,
            title: nameArray[counter],
            url: urlArray[counter]
        }));
        bounds.extend(mylatlngs[counter]);
        counter++
    };
    counter = 0;
    while (counter < markers.length){
        google.maps.event.addListener(markers[counter], 'click', function() {
            window.location.href = this[counter].url;
        });
        counter++
    };
    map.fitBounds(bounds);
  });

HTML网页来源:

<div id="google_map_section" data-url="http://localhost:3000/impacts/12, http://localhost:3000/events/9, http://localhost:3000/impacts/10, http://localhost:3000/events/7" data-name="Dead fish!, Oil spill, Acid River Pollution, AMD Seepage" data-lat="-34.0, -34.0333333, -33.638271, -33.724289" data-long="17.0, 18.35, 18.990891, 18.95591"></div>

更新

Firebug在event.addListener函数中提供以下警告: “未捕获的TypeError:无法读取未定义的属性'url'”

进一步更新:

好的,问题是这一行中对url的分配:

url: urlArray[counter]

现在这很有趣,如果我将数组的元素直接分配给EventListener,如下所示:

google.maps.event.addListener(markers[counter], 'click', function() {
    window.location.href = urlArray[counter];
});

它仍然不起作用,但硬编码的网址呢!所以这个:

google.maps.event.addListener(markers[counter], 'click', function() {
    window.location.href = 'http://www.google.com';
});

作品!怎么了?

1 个答案:

答案 0 :(得分:1)

啊哈!得到它了。由于某种原因,必须在单独的函数中分配事件侦听器。无论如何,适用于标记的代码如下:

while (counter < mylatlngs.length){
    marker = new google.maps.Marker({
        position: mylatlngs[counter], 
        map: map,
        title: nameArray[counter],
        url: urlArray[counter]
    });
    addListen(marker);
    markers.push(marker);
    bounds.extend(mylatlngs[counter]);
    counter++;
};

map.fitBounds(bounds);

function addListen(markerPass){
    google.maps.event.addListener(markerPass, 'click', function() {
        window.location.href = markerPass.url;
    });
};

仍然欢迎有人评论为什么会这样做......