2つのものが表示される画面があります。
- Google ストリート マップは、Openlayers を使用してレンダリングされます。
- サイド パネルがレンダリングされ、国とその年間人口増加のリストが表示されます。
以下のコードは、アイデアを説明しています。コードは 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し、ズーム操作が発生します。#mapと を分離したい#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>