2010-09-30 77 views
2

我試圖從鏈接調用google.maps.event.addListener。這裏是我的代碼至今:從鏈接調用Google地圖v3中的事件偵聽器

 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

問題是,您正在引用全局範圍中不存在的變量。

爲了說明發生了什麼,考慮下面的代碼:

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功能與​​。解決方法是使用initialize函數中的google.maps.event.addListener()函數來監聽鏈接中的點擊事件。那就是:

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

好吧,我創建了一個聽衆,給了一個鏈接鏈接1的ID,並相應地調整聽者使用該ID。我只在函數內部有一個警告('hi'),但當我點擊鏈接時它仍然不運行。 – John 2010-10-01 13:03:26

+3

想想我現在明白了。我不得不使用addListener,而是使用addListener。感謝您指引我朝着正確的方向。 – John 2010-10-01 14:04:05

相關問題