我有两张使用 div 覆盖的地图。但是,每当我平移地图时,只有底图上方的地图会移动,而底图不会移动。请告知是否有某种方法可以同时为两个地图启用鼠标平移。谢谢阿莎
<style type='text/css'>
/*<![CDATA[*/
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
margin: auto;
text-align: left;
width: 800px;
height: 532px;
position:absolute;
pointer-events:none;
}
.message {
width: 800px;
height: 532px;
background-color: #fff;
opacity: .35;
filter: alpha(opacity=35);
position:absolute;
pointer-events:none;
}
/*]]>*/
</style>
<script type="text/javascript" src="http://nls.tileserver.com/api.js"></script>
<script src="http://maps.google.com/maps? file=api&v=2&sensor=false&key=ABQIAAAA9pSslyaYyyl6x8HKrHAZvxS4-alJFZ9Cxp3qiYSlGHIYxF9uHhT0NLb9B9BXGUGGDctSO4QVa1jLLA" type="text/javascript">
</script>
<script src="http://nls.tileserver.com/opacity-control.js" type="text/javascript"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script language="javascript">
function whereami(lat, lon) {
load(lat,lon);
}
/*
function pull() {
var location=JSON.parse(locater.getLocation());
whereami(location.lat, location.lon);
}*/
function load(latitude,longitude)
{
if (GBrowserIsCompatible()) {
//var latitude = 55.96;
//var longitude = -3.2;
var MyIcon = new GIcon();
var zoom = 18;
var map = new GMap(document.getElementById("map"));
map.setCenter(new GLatLng(latitude,longitude), zoom);
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
"Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
var copyrightCollection = new GCopyrightCollection();
copyrightCollection.addCopyright(copyright);
var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
tilelayer.getTileUrl = NLSTileUrlOS;
var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
map.addMapType(nlsmap);
map.setMapType(nlsmap);
var map1 = new GMap(document.getElementById("map1"));
map1.setCenter(new GLatLng(latitude,longitude), zoom);
var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)), 1,
"Historical maps from <a href='http://geo.nls.uk/maps/api/'>NLS Maps API<\/a>");
var copyrightCollection = new GCopyrightCollection();
copyrightCollection.addCopyright(copyright);
var tilelayer = new GTileLayer(copyrightCollection, 1, NLSTileUrlOS('MAXZOOM'));
tilelayer.getTileUrl = NLSTileUrlOS;
var nlsmap = new GMapType([tilelayer], G_NORMAL_MAP.getProjection(), "Historical");
map1.addMapType(nlsmap);
map1.setMapType(nlsmap);
// put div over map
Position.clone($("map"), $("map1").setStyle({'pointer-events': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
var marker = new GMarker( new GLatLng(latitude,longitude));
var myIcon=new GIcon(marker.getIcon());
myIcon.image='pushpin.png';
myIcon.iconSize = new GSize (40,40);
var marker2 = new GMarker( new GLatLng(latitude,longitude), myIcon);
map.addOverlay(marker2);
}
}
</script >
</head>
<body onload = whereami(55.96,-3.2)>
<div class="modal">
<div class="overlay" id="map">
</div>
<div class="message" id="map1"></div>
</div>