从链接中调用google maps v3中的事件侦听器

时间:2010-09-30 19:53:02

标签: javascript google-maps google-maps-api-3

我正在尝试从链接中调用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);
        });         
}

我在尝试触发链接中的地图事件时使用的是:

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

这不起作用。有人有想法吗?

1 个答案:

答案 0 :(得分: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的{​​{1}}功能中执行相同的操作。解决方案是使用marker2函数内的google.maps.event.addListener()函数来侦听链接中的click事件。那就是:

initialize