javascript - v2 和 v3 Google Maps API 能否在同一页面中共存?

标签 javascript google-maps google-maps-api-3 google-maps-api-2

嘿,我在尝试在页面上同时显示 v3 和 v2 谷歌地图时遇到问题/错误。

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

问题是,如果您单击 v3 map ,然后单击 v2 map ,则 v2 map 开始跟随鼠标光标移动,就像您单击开始拖动但从未松开鼠标按钮一样。基本上会出错,直到您重新加载页面

这是一个示例,其中包含有关如何复制的简单说明 http://jsbin.com/googlemapv3v2/1

奇怪的是,如果您先点击/玩 v2 map ,然后点击/玩 v3 map ,一切都会很好。

因此,一旦加载了 v3 api,我就尝试通过在 v2 map 上触发自定义点击/鼠标按下事件来“欺骗”它,请参阅 http://jsbin.com/googlemapv3v2/2

但是没有运气,有人有什么想法吗?

编辑:应该注意,它似乎只发生在 chrome、firefox、safari 中,还没有尝试过 opera。

最佳答案

我不认为这两个 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>

关于javascript - v2 和 v3 Google Maps API 能否在同一页面中共存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3278008/

相关文章:

javascript - Google map javascript 路线错误 Direction.display.setMap(map)

javascript - 使用 javascript api 谷歌地图从 json 导入标记

javascript - 函数参数传值,如何通过Object.defineProperty劫持一个对象的属性

php - 使用javascript两次创建缓存图像

javascript - 华丽的弹出窗口 - 忽略图库中的图像

java - 使用 FusedLocationProviderClient 时的 onLocationChanged

ios - Swift 3 Google map iOS SDK - 通过触摸添加标记

javascript - 使用 Knockout JS 删除数组中的重复名称

c# - 处理谷歌地图的纬度/经度坐标

javascript - 无法从 jQuery AJAX API 调用获取 JSON 数据