javascript - Firefox 中的谷歌地图 mouseevent 显示不正确的坐标

标签 javascript google-maps firefox mouseevent

本地图 div 不在浏览器窗口的左上角 (0,0) 时,我有一个 google map api 页面,该页面不会从 Firefox 中的鼠标事件返回正确的坐标。如果我在 map div 上放置任何 css 填充或边距,则 google map 中的 mouseevent 原点仍然从浏览器窗口的左上角开始,而不是从 map div 开始。 mouseevent 在 IE 和 Chrome 中正常工作,返回正确的纬度/经度,但在 Firefox 中则不然。有人有任何建议来纠正吗?

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

最佳答案

解决方案:

调用谷歌地图 API 后添加参数v=3。 user4974882 提供的 fiddle 正在调用 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

(来自用户4974882的 fiddle )

背景:

问题发生在 Firefox 版本 39 上。Mozilla 团队实现了一些有关 offsetX/Y 的新功能 (https bugzilla.mozilla.org/show_bug.cgi?id=69787)。不幸的是,Google Maps API 已经以某种方式解决了这个问题(https code.google.com/p/gmaps-api-issues/issues/detail?id=8278),因此 - 一旦 FF39 推出 - 问题就出现了。

关于javascript - Firefox 中的谷歌地图 mouseevent 显示不正确的坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30651839/

相关文章:

javascript - 动态更改 ng-repeat 元素的宽度

javascript - Asp.net MVC 5 将所有脚本 bundle 在一个文件中

javascript - 获取 GoogleMaps 自动完成 HTML 输入建议的地址列表

Javascript, 火狐 : how to disable the browser specific cell controls?

javascript - 在 Firefox OS 验证器中检测到 CSP 违规

javascript - JS : How to make logic (using loops) to insert data into this table?

javascript - 复制数组会产生奇怪的结果 ('copying' ==引用)

ios - Swift,谷歌地图适用于所有标记

android - 如何在 getMyLocationAddress 方法中的 onLocationChanged 中访问我的当前位置?

css - 使用 CSS "max-height:100%"调整动态图像大小在具有固定页眉/页脚的 Firefox 和 IE 中不起作用