Google maps api 3 OSX和Windows for Safari的窗格事件不一致
在OSX上使用Safari时,窗格的Google Map v3实现不一致,并且根据使用的窗格阻止标记单击事件运行 如果启用“开发”菜单,然后覆盖用户代理以报告为Safari for Windows,则实现将匹配所有其他浏览器(FF、IE、Chrome等)。这似乎表明这是GoogleAPI中的一个问题,因为更改的只是用户代理字符串 顺便说一句,将标记添加到覆盖平面(#6)实际上会将标记添加到覆盖阴影(#2)窗格。因此,目前无法在任何浏览器或平台上向窗格6添加任何内容 使用以下示例,可以通过将鼠标悬停在每个标记上来观察问题。如果标记器接收到悬停事件,它将变为绿色Google maps api 3 OSX和Windows for Safari的窗格事件不一致,google-maps-api-3,Google Maps Api 3,在OSX上使用Safari时,窗格的Google Map v3实现不一致,并且根据使用的窗格阻止标记单击事件运行 如果启用“开发”菜单,然后覆盖用户代理以报告为Safari for Windows,则实现将匹配所有其他浏览器(FF、IE、Chrome等)。这似乎表明这是GoogleAPI中的一个问题,因为更改的只是用户代理字符串 顺便说一句,将标记添加到覆盖平面(#6)实际上会将标记添加到覆盖阴影(#2)窗格。因此,目前无法在任何浏览器或平台上向窗格6添加任何内容 使用以下示例,可以通过将鼠标悬
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
for (var i = 0; i <= 5; i++) {
var m = new marker(i);
m.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function marker(index) {
this._latlng = new google.maps.LatLng(-34.397 + (index * .1), 150.644 + (index * .1));
this._div = null;
this._index = index;
}
marker.prototype = new google.maps.OverlayView();
marker.prototype.onAdd = function () {
var div = document.createElement('DIV');
var label = document.createTextNode(this._index + 1);
div.appendChild(label);
div.id = this._index + 1;
div.style.border = "1px solid black";
div.style.backgroundColor = "red";
div.style.width = "20px";
div.style.height = "20px";
div.style.position = "absolute";
google.maps.event.addDomListener(div, 'mouseover', function () {
this.style.backgroundColor = "green";
});
google.maps.event.addDomListener(div, 'mouseout', function () {
this.style.backgroundColor = "red";
});
this._div = div;
var panes = this.getPanes();
switch (this._index) {
case (0):
panes.overlayLayer.appendChild(div);
break;
case (1):
panes.overlayShadow.appendChild(div);
break;
case (2):
panes.overlayImage.appendChild(div);
break;
case (3):
panes.floatShadow.appendChild(div);
break;
case (4):
panes.overlayMouseTarget.appendChild(div);
break;
case (5):
panes.overlayShadow.appendChild(div);
break;
}
}
marker.prototype.draw = function () {
var projection = this.getProjection();
if (projection) {
var div = this._div;
var point = projection.fromLatLngToDivPixel(this._latlng);
if (point && div != null) {
div.style.left = point.x - 10 + 'px';
div.style.top = point.y + -10 + 'px';
}
}
}
</script>
<div id="map_canvas"></div>
html,正文,#地图#画布
{
保证金:0;
填充:0;
身高:100%;
}
var映射;
函数初始化(){
变量myOptions={
缩放:7,
中心:新google.maps.LatLng(-34.397150.644),
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map(document.getElementById('map\u canvas'),myOptions);
对于(var i=0;i关于您的问题的一部分,您说“Google Map v3窗格的实现不一致,并且根据正在使用的窗格阻止标记单击事件运行,”问题似乎是您可能试图在不打算使用鼠标事件的窗格上使用鼠标事件:
窗格1:overlayer
-来自:它可能不会接收DOM事件。
窗格2:overlyshadow
-从:它可能不会接收DOM事件。
关于您的问题中集中在地图窗格上的部分
:
顺便说一句,将标记添加到覆盖平面(#6)实际上会增加
将标记改为覆盖阴影(#2)窗格。因此它不是
当前可以在任何浏览器或浏览器上向窗格6添加任何内容
站台
首先,没有overlayPane
;如果您谈论的是窗格6,从下到上,我相信您的意思是:floatPane
。此外,我认为问题实际上是您的开关中的一个bug
语句代码:
switch (this._index) {
case (0):
panes.overlayLayer.appendChild(div);
break;
case (1):
panes.overlayShadow.appendChild(div);
break;
case (2):
panes.overlayImage.appendChild(div);
break;
case (3):
panes.floatShadow.appendChild(div);
break;
case (4):
panes.overlayMouseTarget.appendChild(div);
break;
case (5):
// This code is a duplicate of the code in case(1):
panes.overlayShadow.appendChild(div);
// I believe what you want here is:
panes.floatPane.appendChild( div );
break;
}
我希望这会有所帮助-您应该将此作为一个bug发布在网站上。我在那里没有看到任何类似问题的参考。感谢您找到我的bug。我猜这就是您匆忙时发生的情况。尽管如此,我仍然对DOM事件感到好奇,因为只有mapPane、OverlyLayer和OverlyShadow(图层0、1和2)有文档记录可能没有收到DOM事件。没问题;很乐意提供帮助。我假设只有您放置在窗格1和窗格2上的项目(看起来不像您正在使用窗格0)在单击时会出现问题。如果您放置在其他窗格(不是0、1或2)上的项目没有正确处理鼠标事件,您是否会遇到问题?