Question

我想在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或其他内容？

Answer 1

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

您可以使用浏览器中的开发人员工具来追踪未来的问题。

Answer 2

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

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

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

为什么地图上的点击事件不起作用？

2 个答案: