0

我有一个屏幕，其中显示了两件事。

  1. 使用 Openlayers 渲染 Google 街道地图。
  2. 渲染侧面板以显示国家列表及其年度人口增长。

下面的代码解释了这个想法。代码是用 HTML 编写的。

<body>
 <div id="map" style="z-index:0;"></div>
 <div id="sidePanel" style="position:absolute;
                            top:0px;
                            left:0px;
                            width:30%;
                            height:100%;
                            z-index:1;
                            background-color:black">
 //content in this div will be filled dynamically through ajax call
 </div>
</body>

一切都完美显示。但是，当我单击#sidepanel并按住鼠标单击时，如果我拖动，则#map接收鼠标单击并且屏幕上发生“平移操作”。

我不希望“#map”在点击时接收鼠标点击#sidepanel。此外，当我将鼠标#sidepanel放在该 div 上并双击时，#map正在接收双击并且正在发生缩放操作。我想分开#mapand #sidepanel。

我仅在使用 Firefox 和 Chrome 浏览器时遇到此问题。IE 可以很好地满足我的要求。请提出一些想法。谢谢你的耐心。

这是我的完整代码

<html>
<head>
<title>Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="RenderGoogleMap();">
<div id="Map_Screen" style="z-index: -1;"></div>
<div id="sidePanel" style="overflow:hidden;position:absolute;top:0px;left:0px;width:35%;height:100%;background-color:black;"></div>
</body>
</html>
<script type="text/javascript">
function RenderGoogleMap() {
        var options = {
            projection : "EPSG:900913",
            units : "m",
            maxResolution : 156543.0339,
            maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34),
            displayProjection : new OpenLayers.Projection("EPSG:4326")
        };
        map = new OpenLayers.Map('Map_Screen', options);
        var gmap = new OpenLayers.Layer.Google("GoogleMap", { 'sphericalMercator' : true, numZoomLevels : 18 });
        map.addLayers([ gmap ]);
            map.zoomTo(3);
        var control = map.addControl( new OpenLayers.Control.Navigation() );
        control.activate();
    }
</script>
4

2 回答 2

1

可能是因为您将侧面板的位置设置为绝对位置，结果侧面板 div 位于地图顶部？尝试position:absolute从您的 sidePanel CSS 代码中删除。

更新：

问题是您的地图宽度设置为 100%，并且您的侧面板覆盖在它上面。我没有这样做，而是将侧面板保持在 35% 的宽度，添加 2% 的右边距，并将地图设置为 62%。这样，您的侧面板和地图不会重叠，因此当您单击侧面板时，地图不会受到任何影响。

见代码：

<html>
<head>
<title>India</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function RenderGoogleMap() {
        var options = {
            projection : "EPSG:900913",
            units : "m",
            maxResolution : 156543.0339,
            maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34),
            displayProjection : new OpenLayers.Projection("EPSG:4326")
        };
        map = new OpenLayers.Map('Map_Screen', options);
        var gmap = new OpenLayers.Layer.Google("GoogleMap", { 'sphericalMercator' : true, numZoomLevels : 18 });
        map.addLayers([ gmap ]);
        var control = map.addControl( new OpenLayers.Control.Navigation() );
        control.activate();
    }
</script>
</head>
<body onload="RenderGoogleMap();">
<div id="sidePanel" style="float:left;width:35%;margin-right:2%;height:100%;background-color:black;"></div>
<div id="Map_Screen" style="float:left;width:62%;"></div>
</body>
</html>

更新 2：

如果您想要覆盖但不希望侧面板操作地图，请尝试此代码。它将地图设置z-index为 -1，叠加层z-index设置为 999。

<html>
<head>
<title>Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="RenderGoogleMap();">
<div id="Map_Screen" style="z-index: -1;"></div>
<div id="sidePanel" style="z-index:999;overflow:hidden;position:absolute;top:0px;left:0px;width:35%;height:100%;background-color:black;"></div>
</body>
</html>
<script type="text/javascript">
function RenderGoogleMap() {
        var options = {
            projection : "EPSG:900913",
            units : "m",
            maxResolution : 156543.0339,
            maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34),
            displayProjection : new OpenLayers.Projection("EPSG:4326")
        };
        map = new OpenLayers.Map('Map_Screen', options);
        var gmap = new OpenLayers.Layer.Google("GoogleMap", { 'sphericalMercator' : true, numZoomLevels : 18 });
        map.addLayers([ gmap ]);
            map.zoomTo(3);
        var control = map.addControl( new OpenLayers.Control.Navigation() );
        control.activate();
    }
</script>
于 2013-01-19T21:31:29.827 回答
0

如果事件处理程序没有以某种方式拦截它们，Javascript 事件通常会在 DOM 中以特定顺序冒泡到其他元素。通常意味着首先调用最顶层（具有最高 z-index）的元素事件处理程序，然后调用下一个事件处理程序，以此类推（如果没有干扰冒泡）。

您可以附加一个停止冒泡的事件处理程序#sidePanel- 对于不同的浏览器，这样做的方式不同。如果你使用 jQuery，你可以简单地做

$("#sidePanel").on("click", function(event) {
  event.stopPropagation();
});

更多关于事件冒泡 http://www.quirksmode.org/js/events_order.html

因此，您应该捕获#sidePanel您需要阻止冒泡到您的#map. 这些可能包括onmousedown等onmouseup。

于 2013-01-19T22:38:03.897 回答