1

我想向 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 或其他东西？

4

2 回答 2

3

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

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

于 2012-09-19T18:23:30.797 回答
0

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

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

    if (window.addEventListener) 
    { 
        window.addEventListener("load", BingMap, false); 
    }
    else if (window.attachEvent) 
    {
     window.attachEvent("onload", BingMap);
    }
于 2012-09-24T16:53:53.843 回答