Question

我正在尝试阻止某些用户（鼠标）事件触发我在我网站上使用的Google Maps API实例。我正在向API实例上的事件添加事件侦听器，如下所示：

google.maps.event.addListener(map, 'click', mapClickHandler);

然后非常简单地定义mapClickHandler事件：

function mapClickHandler (e) { e.preventDefault(); }

我也尝试过以下变化：

function mapClickHandler (e) { e.stopPropagation(); }
// or //
function mapClickHandler (e) { e.stopImmediatePropagation(); }

对于上述所有三个，我得到错误：TypeError：e.preventDefault / e.stopPropagation / e.stopImmediatePropagation不是函数

但是，当我使用此技术时，似乎无法阻止在我的页面中加载的Google Maps实例触发该事件。

我也尝试过以下所有情况：

google.maps.event.addListener(map, 'contextmenu', mapContextMenuHandler);
google.maps.event.addListener(map, 'dblclick', mapDoubleClickHandler);
google.maps.event.addListener(map, 'mousedown', mapMouseDownHandler);
google.maps.event.addListener(map, 'mouseup', mapMouseUpHandler);
google.maps.event.addListener(map, 'mousemove', mapMoveHandler);

他们都给出了与上述类似处理程序定义完全相同的问题。我后来才知道这是因为在google.maps.event上由鼠标活动触发的事件是一个与正常浏览器/ DOM事件不同的MouseEvent，甚至没有其他事件类型与它相关联 - 尽管我因为某种原因尝试添加这些类型的侦听器时没有任何错误。

那么有没有其他方法可以在Maps API实例上的鼠标事件上使用preventDefault，stopPropagation，stopImmediatePropagation或类似的东西？我可以使用哪种方法不会引发错误？

最后，虽然这些功能已成功阻止鼠标单击，双击鼠标和鼠标移动事件，但我发现没有阻止右键单击事件。换句话说，上述听众（包括click，mouseup，mousedown，contextmenu等）都无法阻止我双击Maps API实例进行缩小。

我错过了什么？它似乎不应该这么难。这是我整个JS和CSS嵌入的代码。

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>

        <!-- embedded CSS styles -->
        <style type="text/css">
            #mapCanvas {
                background: transparent;
                height: 450px; width: 250px;
                position: absolute;
                top: 0; left: 0;
                pointer-events: none;
            }
            #mapElement {
                height: 450px; width: 250px;
                position: absolute;
                top: 0; left: 0;
            }
        </style>

        <!-- JavaScript includes and embedded custom source -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            var map;

            function init() {
                var mapOptions = {
                    zoom: 15,
                    <!-- coords in order lon, lat despite function name -->
                    <!-- note: smaller longitudes move the CAMERA north (BEWARE negatives!) -->
                    <!-- note: smaller latitudes move the CAMERA east -->
                    center: new google.maps.LatLng(34.243, -118.5285),
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                };

                map = new google.maps.Map(document.getElementById("mapElement"), 
                                        mapOptions);

                google.maps.event.addListener(map, 'click', mapClickHandler);
                google.maps.event.addListener(map, 'contextmenu', mapContextMenuHandler);
                google.maps.event.addListener(map, 'dblclick', mapDoubleClickHandler);
                google.maps.event.addListener(map, 'mousedown', mapMouseDownHandler);
                google.maps.event.addListener(map, 'mouseup', mapMouseUpHandler);
                google.maps.event.addListener(map, 'mousemove', mapMoveHandler);

                $("#mapCanvas").attr('width', 250);
                $("#mapCanvas").attr('height', 450);
                var mapContext = $("#mapCanvas").get(0).getContext("2d");
                mapContext.strokeStyle = "#00FF00";
                mapContext.lineWidth = 3;
                mapContext.rect(20,20,150,100);
                mapContext.stroke();
            }

            function mapClickHandler (e) { e.stopImmediatePropagation(); }
            function mapContextMenuHandler (e) { e.preventDefault(); }
            function mapDoubleClickHandler (e) { e.preventDefault(); }
            function mapMouseDownHandler (e) { e.preventDefault(); }
            function mapMouseUpHandler (e) { e.preventDefault(); }
            function mapMoveHandler (e) { e.preventDefault(); }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <div id="mapElement"></div>
        <canvas id="mapCanvas"></canvas>
    </body>
</html>

更新

也许值得一提的是，我的目标是阻止所有鼠标输入到Maps API EXCEPT进行单击。我使用解决方案来解决另一个问题，以防止鼠标输入。。

disable zooming dragging in Google maps by clicking on a button

。。。但我希望能够通过单击鼠标点击并使用我的自定义处理程序执行自定义操作，并阻止典型的Google Maps API功能。这甚至可能吗？

我的最终目标，也许是无关的，但提供一些背景，是将纬度/经度坐标转换为地图上的x / y坐标。这样，未来地图数据的任何细微变化都不会导致我在画布上绘制的任何绘图都会从实际地图数据的中心绘制出来。也许我正在思考它。但是很难相信他们已经很难获得这些数据/没有提供获取这些数据的简单方法。

更新2：

有用的评论者建议使用某种HTML叠加来捕获和阻止鼠标事件，并使用Google Maps对象属性根据需要关闭地图功能的特定块。这些工作，我很感谢有功能的解决方法，但我仍然无法干净利落地直接使用鼠标触发的事件对象，就像我在普通的浏览器行为中一样。

还测试了由Google Maps API本身提供的stop（）函数，而不是preventDefault（）等，但似乎Google自己的API也没有提供承诺的功能，或以无用的方式提供它，因为似乎其他人也遇到了麻烦，因为我也使用了stop（）函数：

Google Map's Double Click Event Propagation

{preventDefault，stopPropagation，stopImmediatePropagation}都不是Google Maps Web API事件的函数，stop（）不起作用

0 个答案: