谷歌地圖V3觸發地圖之外的事件

我無法弄清楚我在這段代碼中做錯了什麼。我的目標是能夠點擊或鼠標移動到'< p>'元素上並具有相應的標記以顯示其信息窗口，就好像我點擊了窗口本身一樣。谷歌地圖V3觸發地圖之外的事件

這是我的代碼：

<style type="text/css" > 

    html { height: 100% } 

    body { height: 100%; margin: 0; padding: 0 } 

</style> 



<script type="text/javascript" 

    src="http://maps.googleapis.com/maps/api/js?sensor=true"> 

</script> 

<script type="text/javascript"> 

function bindInfoWindow(marker, map, infoWindow, html) 
{ 
    google.maps.event.addListener(marker, 'mouseover', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
} 



//Different icons if coupon or no coupon 
var customIcons = { 
     yes: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     no: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     } 
    }; 


// Download XML from AJAX 
function downloadUrl(url, callback) 
{ 
    var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

    request.onreadystatechange = function() 
    { 
     if (request.readyState == 4) 
     { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 


//AJAX: Send all locations within bounds of map 
function get_locations(neLat, neLng, swLat, swLng, map, infoWindow) 
{ 
    downloadUrl("Scripts/googlemap_ajax.php?neLat="+neLat+"&neLng="+neLng+"&swLat="+swLat+"&swLng="+swLng,  function(data) 
    { 
     var side_html= ''; 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) 
     { 
       var name = markers[i].getAttribute("name"); 
       var tags = markers[i].getAttribute("tags"); 
       var coupon = markers[i].getAttribute("coupon"); 
       var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("latitude")), 
         parseFloat(markers[i].getAttribute("longitude"))); 
       var html = "<b>" + name + "</b> <br/>" + tags;  
       var icon = customIcons[coupon] || {}; 
       var marker = new google.maps.Marker(
      { 
       map: map, 
       position: point, 
       icon: icon.icon, 
       shadow: icon.shadow 
      }); 

      //TEST Side bar 
      side_html += '<p onMouseOver="click_sidebar()">' + name + '</p>'; 


      bindInfoWindow(marker, map, infoWindow, html); 
     } 

     document.getElementById("locationSelect").innerHTML = side_html; 
    }); 
} 



function click_sidebar() 
{ 
    google.maps.event.trigger(markers[1], 'click'); 
    //alert("SOMETHING"); 
} 


function doNothing() 
{ 
} 


function initialize() //Initialize the map 

{ 
    var last_ne_lat; 

    var latlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $long; ?>); 

    var myOptions = { 

     zoom: 16, 

     center: latlng, 
     streetViewControl: false, 

     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 

    var infoWindow = new google.maps.InfoWindow; 


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var image = '/View/Images/map_icon.png'; 

    var beachMarker = new google.maps.Marker({ 

     position: latlng, 

     map: map, 

     icon: image, 

     title:"YOU ARE HERE" 

    }); 

    // Add listener to map 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = this.getBounds(); 
     var ne = bounds.getNorthEast(); 
     var neLat = bounds.getNorthEast().lat(); 
     var neLng = bounds.getNorthEast().lng(); 
       var sw = bounds.getSouthWest(); 
     var swLat = bounds.getSouthWest().lat(); 
     var swLng = bounds.getSouthWest().lng(); 
     if(neLat != last_ne_lat) 
     { 
      get_locations(neLat, neLng, swLat, swLng, map, infoWindow); 
      last_ne_lat = neLat; 
     } 
    }); 

} 


</script> 


<body onload="initialize()"> 
    <div id="locationSelect" style="width:100%"></div> 

    <div id="map_canvas" style="width:70%; height:90%"></div> 

</body>

在 'get_locations' 功能I輸出一些HTML，我通過鼠標懸停調用一個函數。這個函數被正確調用（現在註釋掉的警報正在工作），但是沒有任何事情發生。有沒有人看到我出錯的地方？

來源

2011-12-16 OrangeGrover

首先我會建議您使用jQuery進行Ajax調用。這些實現在瀏覽器之間有所不同，並且您的代碼不能在所有瀏覽器中運行。 JQuery包裝，所以你不必在意。 – 2011-12-16 14:34:31

編輯了我的回答 – 2011-12-20 09:09:39

您的click_sidebar函數無法訪問您在get_locations函數中定義的markers對象。

你使用Firebug或其他調試器嗎？使用調試器逐步執行代碼將幫助您更輕鬆地發現這些類型的錯誤。

編輯： 這將是很好，如果你開始使用適當的對象，並堅持更面向對象的風格。但是，在此期間要解決您的迫切問題，將markers的聲明移至全局範圍（例如，customIcons）

來源

2011-12-16 14:38:11

谷歌地圖V3觸發地圖之外的事件

回答

相關問題