Могут ли API Карт Google версии 2 и 3 сосуществовать на одной странице? - PullRequest
Новая
       6

Могут ли API Карт Google версии 2 и 3 сосуществовать на одной странице?

7 голосов
/ 19 июля 2010

Привет, у меня возникли проблемы / ошибка при попытке одновременно разместить на странице карты Google v3 и v2.

Ядро нашего приложения использует v2 API и добавив некоторые новые функции, мы решили использовать v3 API, поскольку v2 устарела.Поэтому я динамически загружаю версию API для v3 в другую «вкладку» приложения.

Проблема в том, что если вы щелкнете по карте v3, а затем щелкните по карте v2, карта v2 начнет следовать послеНаведите курсор мыши, как если бы вы нажали, чтобы начать перетаскивание, но никогда не отпускали кнопку мыши.И в основном глючит, пока вы не перезагрузите страницу

Вот пример с простыми инструкциями о том, как копировать http://jsbin.com/googlemapv3v2/1

Странная вещь, если вы сначала нажимаете / играете с картой v2затем кликните / поиграйтесь с картой v3, все это прекрасно работает.

Итак, я попытался «обмануть» его, запустив пользовательские события click / mousedown на карте v2 после загрузки API v3, см. http://jsbin.com/googlemapv3v2/2

Но не повезло, у кого-нибудь есть идеи?

РЕДАКТИРОВАТЬ : Следует заметить, что это происходит только в chrome, firefox, safari еще не пробовалопера.

1 Ответ

2 голосов
/ 19 июля 2010

Я не думаю, что два 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>
...