2015-06-04 1 views
2

У меня есть страница api google map, которая не возвращает правильные координаты из события мыши в firefox, когда div div карты не находится в верхнем левом углу (0,0) окна браузера , Если я поместил любое дополнение или марку css на div карты, происхождение mouseevent на картах google все равно начинается с левого верхнего угла окна браузера, а не с div div. Мышь работает правильно в IE & Chrome возвращает правильный lat/lng, но не Firefox. У кого-нибудь есть предложения по исправлению?google map mouseevent в firefox показывает неправильные координаты

Я создал очень простой пример в http://jsfiddle.net/fNPvf/15426/, который показывает координаты, когда мышь перемещается по карте. Вы можете видеть в левом верхнем углу изображения карты, координаты должны быть 0,0, но Firefox показывает 50,50. В инфоиндусте отображается правильный лат/lng центра карты, и вы можете увидеть разницу в координатах (сдвиг 50 пикселей вверху слева) при перемещении мыши к этой точке.

<html> 
<head> 
<meta charset="utf-8"> 
<style> 
body {font:12px arial; margin:0px} 
#map { 
    height:400px; 
    width:400px; 
} 
</style> 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
    var map; 
    coord = new google.maps.LatLng(38.939201, -94.747640) 

    function initialize() { 
     var mapOptions = { 
      zoom: 16, 
      center: coord 
     }; 
     map = new google.maps.Map(document.getElementById('map'), mapOptions); 

     google.maps.event.trigger(map, 'resize'); 

     var coordInfoWindow = new google.maps.InfoWindow(); 
     coordInfoWindow.setContent('38.939201, -94.747640'); 
     coordInfoWindow.setPosition(coord); 
     coordInfoWindow.open(map); 

     google.maps.event.addListener(map, "mousemove", function (event) { 
      document.getElementById("footer").innerHTML = "Mouse X Y:" + event.pixel.toString() + " - Lat Lng:" + event.latLng.toString() + "<br />" 
       }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<div id="map" style="margin-left:50px;margin-top:50px;"></div> 
<div id="footer" style="margin-left:50px; padding:10px;"></div> 
</body> 
</html> 
+0

Работает исправно для меня в FF (38.0.5) –

+0

Удивительный, спасибо. Похоже на проблему с изменением версии с Firefox от v38 до 39. – user4974882

+0

Эта ошибка была добавлена ​​в Bugzilla несколько дней назад: https://bugzilla.mozilla.org/show_bug.cgi?id=1180744 – Marc

ответ

1

Решение:

Добавить параметр v = 3 раз вызова карты Google апи. Скрипка, предоставленная user4974882, вызывает 3.exp - не работает.

работы:

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 

Live example

Не работает правильно:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 

Live example

(оба фидель из user4974882)

фона:

Проблема возникла с Firefox версии 39. Mozilla-команда реализованы некоторые новые функциональные возможности в отношении OffsetX/Y (HTTPS bugzilla.mozilla.орг/show_bug.cgi? ID = 69787). К сожалению, API Карт Google уже так или иначе играет с этим (https code.google.com/p/gmaps-api-issues/issues/detail?id=8278), и поэтому - после того, как FF39 был запущен, проблема возникла.

1

Проблема с последней версией FF v39. Работала ранее в v38.0.5.

1

Я могу подтвердить, что прослушивается следующее, учитывая карту с фиксированным размером и краем 64px, «Hello World!». появится, когда вы поместите указатель мыши на -64, -64 относительно маркера. Оказывается, что внутри Maps, позиция указателя компенсируется х/у на карте элемента относительно верхнего левого угла клиентской области Firefox»

Эта проблема появилась в последние несколько дней

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple markers</title> 
    <style> 
     #map-canvas 
     { 
     width: 640px; 
     height: 480px; 
     margin: 64px; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html> 
0

При создании маркера используйте параметр {optimized: false}. Он решает проблему в firefox 39.0.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple markers</title> 
    <style> 
     #map-canvas 
     { 
     width: 640px; 
     height: 480px; 
     margin: 64px; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Hello World!', 
     optimized: false 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html> 
0

Как указано - эта ошибка заполнена FF 39.

В вашем примере, замените параметр v=3.exp с только v=3

Так было бы

src="https://maps.googleapis.com/maps/api/js?v=3" 
Смежные вопросы