7

こんにちは、v3 と v2 の Google マップを同時にページに表示しようとすると、問題やバグが発生します。

アプリケーションのコアは API の v2 を使用し、いくつかの新しい機能を追加するために、v2 は廃止されたため、API の v3 を使用することにしました。そのため、アプリケーションの別の「タブ」に API の v3 バージョンを動的にロードしています。

問題は、v3 マップをクリックしてから v2 マップをクリックすると、クリックしてドラッグを開始したにもかかわらずマウス ボタンを放さなかったかのように、v2 マップがマウス カーソルに追従して開始されることです。基本的に、ページをリロードするまでバグが発生します

http://jsbin.com/googlemapv3v2/1を複製する方法の簡単な手順を含む例を次に示します。

奇妙なことに、最初に v2 マップをクリックして操作し、次に v3 マップをクリックして操作すると、すべてうまく機能します。

そのため、v3 API がロードされたら、v2 マップでカスタム クリック/マウスダウン イベントを発生させて「トリック」を試みました。http://jsbin.com/googlemapv3v2/2を参照してください。

しかし、そこには運がありません。誰かアイデアはありますか?

編集：注意してください、クロム、ファイアフォックス、サファリでのみ発生しているように見えますが、オペラは試していません。

4

1 に答える 1

2

2 つの API が同じページに共存することを意図しているとは思いません。非常に基本的な例を試しましたが、たまたまあなたと同じ問題がありました。Chrome 5.0 および Firefox 3.6.6 (両方とも Mac 用) でテスト済み:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps v2 and v3 on same page</title> 
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
          type="text/javascript"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body> 
  <div id="map_v3" style="width: 500px; height: 400px;"></div>
  <div id="map_v2" style="width: 500px; height: 400px; margin-top: 50px;"></div>

  <script type="text/javascript">

    var map3 = new google.maps.Map(document.getElementById('map_v3'), {
      zoom: 6,
      center: new google.maps.LatLng(-41.00, 174.00),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var map2 =  new GMap2(document.getElementById('map_v2'));
    map2.addControl(new GLargeMapControl3D());
    map2.setCenter(new GLatLng(-41.00, 174.00), 6);
  </script>

</body>
</html>
于 2010-07-19T02:37:16.923 に答える