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 clickInfobox を表示するハンドラーが起動しない理由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を参照しているため、クラッシュします。また、投稿したコードでは、以前に定義されたものを参照していないため、同様にクラッシュします。マップのクリックで実行がクラッシュしたため、イベントは画鋲のクリック ハンドラーに伝達されません。これが、Infobox が表示されない理由です。上記のコードをコメントアウトすると、画鋲をクリックしたときに Infobox が表示されることがわかります。 PushpintryPixelToLocation()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 に答える