代码之家 › 专栏 › 技术社区 › Okeydoke

V2和V3谷歌地图API能在同一个页面上共存吗?

google-maps-api-2 google-maps-api-3 google-maps javascript

7

Okeydoke · 技术社区 · 16 年前

嘿,我有一个问题/错误,当我试图在网页上同时有一个v3和v2谷歌地图。

我们应用程序的核心使用了API的v2,并添加了一些新的功能,我们决定使用API的v3,因为v2已被弃用。所以我在应用程序的另一个“标签”中动态加载API的v3版本。

问题是,如果单击v3映射,然后单击v2映射,则v2映射将开始跟随鼠标光标移动,就像单击开始拖动但从未释放鼠标按钮一样。在你重新加载页面之前

下面是一个示例,其中简单说明了如何复制 http://jsbin.com/googlemapv3v2/1

奇怪的是,如果你先点击/玩v2地图,然后点击/玩v3地图,一切都很好。

因此,我尝试在加载v3 api后在v2映射上触发自定义的click/mousedown事件来“欺骗”它,请参见 http://jsbin.com/googlemapv3v2/2

但运气不好,有人有什么主意吗?

编辑 :应该注意,它似乎只发生在Chrome、Firefox、Safari中,还没有尝试过Opera。

1 回复 | 直到 16 年前

1

2

Daniel Vassallo 16 年前

我认为这两个API并不打算在同一个页面上共存。我尝试了一个非常基本的例子,它恰巧和你的有同样的问题。在Chrome5.0和火狐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>