爲什麼地圖上的點擊事件不起作用？

我想添加一個圖釘到Bing地圖，當用戶點擊圖釘時，應該會出現一個信息框。爲什麼地圖上的點擊事件不起作用？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function BingMap(){ 
      var map = null; 
      var pinInfobox = null; 

      this.showMap = function(latitude, longitude){ 

       var mapOptions = { 
         credentials: "mycredentials", 
         center: new Microsoft.Maps.Location(latitude, longitude), 
         mapTypeId: Microsoft.Maps.MapTypeId.aerial, 
         zoom: 18, 
         showScalebar: false 
       } 

       map = new Microsoft.Maps.Map(document.getElementById("map_canvas"), mapOptions); 
       Microsoft.Maps.Events.addHandler(map, 'click', function(event) { 
        var point = new Microsoft.Maps.Point(event.getX(), event.getY()); 
        var loc = event.target.tryPixelToLocation(point); 
        that.addNewMarker(loc.latitude, loc.longitude); 
       }); 

      }; 

      this.addMarker = function(id, title, latitude, longitude){ 
       var loc = new Microsoft.Maps.Location(latitude, longitude); 

       var pin = new Microsoft.Maps.Pushpin(loc); 

       pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
         {title: title, 
         description: 'This pushpin is located at (0,0).', 
         visible: false, 
         offset: new Microsoft.Maps.Point(0,15)}); 

       Microsoft.Maps.Events.addHandler(pin, 'click', function(event) { 
        pinInfobox.setOptions({ visible:true }); 
       }); 

       map.entities.push(pin); 
       map.entities.push(pinInfobox); 
      }; 
     } 


     $(document).ready(function() { 
      var map = new BingMap(); 
      map.showMap(50.364302, 7.559795); 

      map.addMarker("1", "title", 50.364302, 7.559795); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id='map_canvas' style="position:absolute; width:400px; height:400px;"></div> 
    </body> 
</html>

我把代碼放到我創建的實例，並調用showMap和addMarker方法的類。不幸的是，沒有調用顯示信息框的事件。

只有在將代碼放在類方法內部時，纔會出現此問題。下面的代碼工作原理：http://msdn.microsoft.com/en-us/library/gg508987.aspx

難道我不知何故必須更新DOM或其他？

來源

2012-09-19 Alexander

之所以Pushpinclick處理這說明信息框在不觸發是因爲您爲地圖定義在click處理程序錯誤：

Microsoft.Maps.Events.addHandler(map, 'click', function(event) { 
       var point = new Microsoft.Maps.Point(event.getX(), event.getY()); 
       var loc = event.target.tryPixelToLocation(point); 
       that.addNewMarker(loc.latitude, loc.longitude); 
      });

event.target.tryPixelToLocation(point)會崩潰，因爲event.target指Pushpin對象，它沒有定義的tryPixelToLocation()函數。此外，對於您發佈的代碼，that.addNewMarker(loc.latitude, loc.longitude)不會引用之前定義的任何內容，因此也會崩潰。由於執行在地圖點擊時崩潰，事件不會傳播到圖釘點擊處理程序，這就是爲什麼您沒有看到信息框。如果你註釋掉上面的代碼，當你點擊一個圖釘時，你會看到信息框出現。

您可以使用瀏覽器中的開發人員工具來追蹤這些未來的問題。

來源

2012-09-19 18:23:30

我在將地圖項目分割爲內容頁面時遇到此問題。

我解決它通過附加的事件，像這樣

if (window.addEventListener) 
    { 
     window.addEventListener("load", BingMap, false); 
    } 
    else if (window.attachEvent) 
    { 
    window.attachEvent("onload", BingMap); 
    }

來源

2012-09-24 16:53:53 clamchoda

爲什麼地圖上的點擊事件不起作用？

回答

相關問題