簡體   English   中英

如何使用div同時平移兩個地圖疊加

[英]how to pan two maps simultaneously overlay using div

我有兩個使用 div 覆蓋的地圖。 但是,每當我平移 map 時,只有基礎 map 上方的 map 移動,而不是基礎 Z1D78DC8ED51214E51AEZFE8B51。 請告知是否有某種方法可以同時為兩個地圖啟用鼠標平移。 謝謝阿莎

<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&amp;v=2&amp;sensor=false&amp;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>

可能您可以使用 map 1 中的 getCenter 並使用 latlang 在您移動鼠標的事件中設置第二個中心

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM