Javascript 鼠标滚动不适用于Google地图上附加的div

我在谷歌地图的中心添加了一个固定标记：

div的css：

.centerMarker{
   width:30px;
   height:60px;
   margin:auto;
   position:absolute;
   top:50%;
   left:50%;
   z-index:2;
   background:url('fixedMarker.png') no-repeat center;
   background-size:30px 60px;
   margin-top:-60px;
   margin-left:-15px;
}

将div添加到映射的脚本：

$('<div/>').addClass('centerMarker').appendTo(map.getDiv())

$（“”）.addClass（'centerMarker'）.appendTo（map.getDiv（））

这会导致滚动（用于缩放）不在附加的div上工作（但在地图的其他部分上工作）。如何使滚动事件通过div并到达地图

---

编辑：我需要这个div可以点击。因此，我不应该禁用此分区上的所有事件。

由于Google Maps iframes仅在按下

ctrl

时才滚动，因此当按下

ctrl

时，您可以使用JQuery事件使

centerMarker

事件不敏感，如下所示：

$（“窗口”）.keydown（（e）=>{
如果（e.keyCode==17）{
$（“.centerMarker”）.css（“指针事件”，“无”）；
}
});
$（“窗口”）.keyup（（e）=>{
如果（e.keyCode==17）{
$（“.centerMarker”）.css（“指针事件”、“全部”）；
}
});
#父级{
位置：相对位置；
}
.中心标记{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：红色；
}

测试

由于Google Maps iFrame仅在按下
ctrl
时才滚动，因此当按下
ctrl
时，可以使用JQuery事件使
centerMarker
不区分事件，如下所示：
$（“窗口”）.keydown（（e）=>{
如果（e.keyCode==17）{
$（“.centerMarker”）.css（“指针事件”，“无”）；
}
});
$（“窗口”）.keyup（（e）=>{
如果（e.keyCode==17）{
$（“.centerMarker”）.css（“指针事件”、“全部”）；
}
});
#父级{
位置：相对位置；
}
.中心标记{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：红色；
}

测试

我真的不明白您为什么需要它，而且您还没有提供完整的代码和用例

您可以做的是：按照我的建议使用标准标记，然后在
dragstart
上隐藏标记并显示自定义的绝对元素。在
dragend
上隐藏元素，重新定位标记并再次显示。这样可以保持本机标记行为，并且在拖动时不会看到延迟

如果您想按照问题的建议使用滚轮缩放，那么您将遇到一个问题。滚轮缩放将地图缩放到鼠标光标所在的位置（而不是朝向地图中心），这意味着缩放后，标记将不再位于中心。因此，在这种情况下，您需要在缩放后重新将地图居中。我使用了以下方法：

google.maps.event.addListener(map, 'idle', function() {
  map.setCenter(marker.getPosition());
});

如果你不这样做，那么你的绝对定位标记将不再是你真正的标记所在

下面是一个工作代码片段。请注意，如果使用Infowindow，您还将面临一些问题。如果标记距离画布边缘太近（例如，如果将贴图高度设置为150px…），Infowindows会导致贴图重新定位。拖动地图时，可能还需要将其隐藏，否则它将保持在相同的位置

换句话说，这听起来像是很多黑客在拖动地图和重新定位标记时“只是”没有看到一点滞后。。。国际海事组织


函数初始化（）{
变量映射选项={
缩放：14，
中心：新google.maps.LatLng（52.5498783,13.4252090999961），
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：对
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
让图像={
网址：'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png',
尺寸：新谷歌地图尺寸（54,86），
来源：新google.maps.Point（0,0），
主播：新谷歌地图点（27,86），
};
让marker=new google.maps.marker({
地图：地图，
位置：map.getCenter（），
图标：图像
});
让infowindow=new google.maps.infowindow({
内容：“你好，来自Marker”
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
$（''）.addClass（'centerMarker'）.appendTo（map.getDiv（））；
google.maps.event.addListener（映射'idle'，函数（）{
map.setCenter（marker.getPosition（））；
});
google.maps.event.addListener（映射'dragstart'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
$（'.centerMarker'）.show（）；
});
google.maps.event.addListener（映射'dragend'，函数（）{
marker.setPosition（map.getCenter（））；
marker.setVisible（true）；
$（'.centerMarker'）.hide（）；
});
}
#地图画布{
高度：400px；
}
#地图画布。中心标记{
位置：绝对位置；
背景：url(https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2_hdpi.png)不重复；
最高：50%；
左：50%；
z指数：1；
左边距：-27px；
利润上限：-86px；
高度：86px；
宽度：54px；
光标：指针；
显示：无；
}
我真的不明白您为什么需要它，而且您还没有提供完整的代码和用例

您可以做的是：按照我的建议使用标准标记，然后在
dragstart
上隐藏标记并显示自定义的绝对元素。在
dragend
上隐藏元素，重新定位标记并再次显示。这样可以保持本机标记行为，并且在拖动时不会看到延迟

如果您想按照问题的建议使用滚轮缩放，那么您将遇到一个问题。滚轮缩放将地图缩放到鼠标光标所在的位置（而不是朝向地图中心），这意味着缩放后，标记将不再位于中心。因此，在这种情况下，您需要在缩放后重新将地图居中。我使用了以下方法：

google.maps.event.addListener(map, 'idle', function() {
  map.setCenter(marker.getPosition());
});

如果你不这样做，那么你的绝对定位标记将不再是你真正的标记所在

下面是一个工作代码片段。请注意，如果使用Infowindow，您还将面临一些问题。如果要删除标记，Infowindows可能会导致地图重新定位