javascript - 从链接调用 google maps v3 中的事件监听器

Question

我正在尝试通过链接调用 google.maps.event.addListener。这是我到目前为止的代码:

        var divcc = '#badaba'; //click color
            var divhc = '#ffffce'; //hover color
            var divoc = '#FFF'; //original color
            var lastopenwin;
            var marker1;
        var marker2;
//MAP---------------------------------------------------
  function initialize() {
    //pin icons
    var image1 = '../images/marker.png';
    var temp1 = new google.maps.MarkerImage(image1);
    var image2 = '../images/coldmarker.png';
    var temp2 = new google.maps.MarkerImage(image2);
    //pins coords
    var latlng1 = new google.maps.LatLng(33.528782,-112.343972);
    var latlng2 = new google.maps.LatLng(32.996381,-112.231125);
    //info windows
    var content1 = '<div style="width:300px;">Hello World!!!</div>';
    var infowindow1 = new google.maps.InfoWindow({
            content: content1
        });
    var content2 = '<div style="width:300px;">Hello Universe!!!</div>';
    var infowindow2 = new google.maps.InfoWindow({
            content: content2
        });
    //map options
    var myOptions = {
      zoom: 8,
      center: latlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //place map
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    //place pins
   var marker1 = new google.maps.Marker({
          position: latlng1,
          icon: temp1,
          title:"Hello World!"
    });
    marker1.setMap(map);
    var marker2 = new google.maps.Marker({
          position: latlng2,
          icon: temp1,
          title:"Hello Universe!"
    });
    marker2.setMap(map);
    //listeners
    google.maps.event.addListener(marker1, 'click', function() {
        //alert(lastopenwin);
        if(lastopenwin){
            //alert(lastopenwin);
            lastopenwin.close();
        }
        document.getElementById("item1").style.background = divcc;
          infowindow1.open(map,marker1);
          lastopenwin = infowindow1;
        });
        google.maps.event.addListener(marker1, 'mouseover', function() {
            document.getElementById("item1").style.background = divhc;
            marker1.setIcon(temp2);
        });
        google.maps.event.addListener(marker1, 'mouseout', function() {
            document.getElementById("item1").style.background = divoc;
            marker1.setIcon(temp1);
        });
        google.maps.event.addListener(marker2, 'click', function() {
            //alert(lastopenwin);
            if(lastopenwin){
                lastopenwin.close();
            }
            document.getElementById("item2").style.background = divcc;
          infowindow2.open(map,marker2);
          lastopenwin = infowindow2;
        });
        google.maps.event.addListener(marker2, 'mouseover', function() {
            document.getElementById("item2").style.background = divhc;
            marker2.setIcon(temp2);
        });
        google.maps.event.addListener(marker2, 'mouseout', function() {
            document.getElementById("item2").style.background = divoc;
            marker2.setIcon(temp1);
        });         
}

我用来尝试在我的链接中触发 map 事件的是:

href="javascript:google.maps.event.trigger(marker2, 'click');"

这是行不通的。有人有想法吗？

Answer 1

问题是您引用的变量在全局范围内不存在。

为了说明发生了什么，请考虑以下代码:

function initialize() {
    var my_local_variable = "Hello there!";
    alert("From function scope: " + my_local_variable)
}
initialize();
// Will alert "From function scope: Hello there!"
alert("From global scope: " + my_local_variable); 
// Will alert "From global scope: undefined"

您在 initialize 函数中使用 marker2 做同样的事情。解决方案是在 initialize 函数中使用 google.maps.event.addListener() 函数来监听链接中的点击事件。即:

google.maps.event.addListener(
        document.getElementById("your_link_id"), 
        'click', 
        function() {
            // Work your magic here
});