谷歌地图mouseevent在Firefox显示不正确的坐标

我有一个谷歌地图api页面，不返回从Firefox中的鼠标事件正确的坐标时，地图div不在浏览器窗口的左上角（0,0）。如果我在地图div上放置任何css填充或边距，Google地图中的mouseevent原点仍然从浏览器窗口的左上角开始，而不是从地图div开始。 mouseevent在IE中正常工作& Chrome返回正确的纬度/经度，但不是Firefox。任何人有任何更正的建议？谷歌地图mouseevent在Firefox显示不正确的坐标

我在http://jsfiddle.net/fNPvf/15426/上创建了一个非常简单的示例，它显示了鼠标在地图上移动时的坐标。您可以在地图图像的左上角看到坐标应为0,0，但Firefox显示为50,50。 infowindow显示地图中心的正确纬度/经度，当您将鼠标移动到该点时，您可以看到坐标的差异（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>

来源

2015-06-04 user4974882

FF中的作品正确无误（38.0.5） –

太棒了，谢谢。看起来像v38的Firefox版本更改问题到39. – user4974882

几天前在Bugzilla中添加了此错误：https：//bugzilla.mozilla.org/show_bug.cgi？id = 1180744 – Marc

解决方案：

添加参数V = 3一旦调用谷歌地图API。 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）。不幸的是，Google Maps API已经以某种方式玩弄了（https code.google.com/p/gmaps-api-issues/issues/detail?id=8278），所以 - 一旦FF39推出 - 问题就会出现。

来源

2015-07-23 09:12:35 user5147322

最新发布的FF v39问题。以前在v38.0.5中工作过。

来源

2015-06-05 13:32:40 user4974882

我可以确认，以下是错误的，给定一个固定大小和64px页边距的地图，“Hello World！”。只有当您将鼠标指针放置在相对于标记的-64，-64时才会出现。看来，内部地图，指针位置由地图元素相对的x/y偏移到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>

来源

2015-07-10 08:56:02 Pez

创建标记时，请使用{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>

来源

2015-07-15 14:25:49 DarkerBG

如上所述 - 此错误悄悄进入FF 39。

在你的榜样，更换v=3.exp参数只有v=3

因此，这将是

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

来源

2015-07-22 05:08:15 Jules

谷歌地图mouseevent在Firefox显示不正确的坐标

回答

相关问题