google Firefox 中的地图鼠标事件显示不正确的坐标
google map mouseevent in firefox shows incorrect coordinates
我有一个 google 地图 api 页面,当地图 div 不在顶部时,它 return 来自 firefox 鼠标事件的正确坐标浏览器左侧 (0,0) window。如果我在地图 div 上放置任何 css 填充或边距,google 地图中的鼠标事件原点仍然从浏览器 window 的左上角开始,而不是地图 div。鼠标事件在 IE 和 Chrome return 正确的 lat/lng 中正常工作,但在 Firefox 中不正常。有人有任何纠正建议吗?
我在 http://jsfiddle.net/fNPvf/15426/ 创建了一个非常简单的示例,它显示了鼠标在地图上移动时的坐标。您可以在地图图像的左上角看到坐标应为 0,0,但 Firefox 显示为 50,50。信息window 显示了正确的lat/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>
最新版本的 FF v39 有问题。以前在 v38.0.5 中工作。
我可以确认以下内容存在错误,给定大小固定且边距为 64 像素的地图,"Hello World!" 仅当您将鼠标指针放在相对于标记的 -64、-64 处时才会出现.似乎在地图内部,指针位置偏移了地图元素相对于 Firefox 客户区左上角
的 x/y
最近几天出现了这个问题
<!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>
创建标记时使用选项 {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>
如前所述 - 此错误随 FF 39
一起出现。
在您的示例中,将 v=3.exp
参数替换为 v=3
所以会是
src="https://maps.googleapis.com/maps/api/js?v=3"
解法:
在调用 google 映射后添加参数 v=3 api。 user4974882 提供的 fiddle 正在调用 3.exp - 不起作用。
作品:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
不能正常工作:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
(来自用户 4974882 的 fiddle)
背景:
问题出现在 Firefox 版本 39 中。Mozilla 团队实施了一些关于 offsetX/Y 的新功能 (https bugzilla.mozilla.org/show_bug.cgi?id=69787)。不幸的是,Google 地图 API 已经以某种方式解决了这个问题(https code.google.com/p/gmaps-api-issues/issues/detail?id=8278),所以 - 一旦 FF39 推出 - 问题就出现了.
我有一个 google 地图 api 页面,当地图 div 不在顶部时,它 return 来自 firefox 鼠标事件的正确坐标浏览器左侧 (0,0) window。如果我在地图 div 上放置任何 css 填充或边距,google 地图中的鼠标事件原点仍然从浏览器 window 的左上角开始,而不是地图 div。鼠标事件在 IE 和 Chrome return 正确的 lat/lng 中正常工作,但在 Firefox 中不正常。有人有任何纠正建议吗?
我在 http://jsfiddle.net/fNPvf/15426/ 创建了一个非常简单的示例,它显示了鼠标在地图上移动时的坐标。您可以在地图图像的左上角看到坐标应为 0,0,但 Firefox 显示为 50,50。信息window 显示了正确的lat/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>
最新版本的 FF v39 有问题。以前在 v38.0.5 中工作。
我可以确认以下内容存在错误,给定大小固定且边距为 64 像素的地图,"Hello World!" 仅当您将鼠标指针放在相对于标记的 -64、-64 处时才会出现.似乎在地图内部,指针位置偏移了地图元素相对于 Firefox 客户区左上角
的 x/y最近几天出现了这个问题
<!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>
创建标记时使用选项 {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>
如前所述 - 此错误随 FF 39
一起出现。
在您的示例中,将 v=3.exp
参数替换为 v=3
所以会是
src="https://maps.googleapis.com/maps/api/js?v=3"
解法:
在调用 google 映射后添加参数 v=3 api。 user4974882 提供的 fiddle 正在调用 3.exp - 不起作用。
作品:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
不能正常工作:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
(来自用户 4974882 的 fiddle)
背景:
问题出现在 Firefox 版本 39 中。Mozilla 团队实施了一些关于 offsetX/Y 的新功能 (https bugzilla.mozilla.org/show_bug.cgi?id=69787)。不幸的是,Google 地图 API 已经以某种方式解决了这个问题(https code.google.com/p/gmaps-api-issues/issues/detail?id=8278),所以 - 一旦 FF39 推出 - 问题就出现了.