为什么地图图钉上的单击事件不起作用

我想向必应地图添加一个图钉，当用户单击图钉时，应该会出现一个信息框。

<!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 或其他东西？

显示信息框的Pushpin click处理程序未触发的原因是您为映射定义的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) 不会引用以前定义的任何内容，因此也会崩溃。由于执行在地图单击时崩溃，因此事件不会传播到图钉单击处理程序，这就是您看不到信息框的原因。如果您注释掉上面的代码，您将看到单击图钉时会出现信息框。

您可以使用浏览器中的开发人员工具来跟踪此类问题，以备将来使用。

当我将地图工程拆分为内容页面时，我遇到了这个问题。

我通过附加这样的事件来解决它

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

相关内容

最新更新

热门标签：