javascript - 显示卫星图像 - 传单 map (javascript/jquery/css)

Question

所有我想显示的两个卫星 map 图像是这样的:

我有图像边界，4 个定义图 block (正方形)的参数:

21.00997925,42.72179487,21.00860596,42.72078596
22.00997925,43.72179487,22.00860596,43.72078596

或者我可以使用正方形的中心，例如:

21.00997925,42.72179487

此处 map 已初始化:

<div class="row">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
    <div class="col-xs-12">
        <h1>MAP</h1>
        <div style="width:500px; height:500px" id="map"></div>
    </div>
</div>
<script type="text/javascript">
(function() {
    var map = new L.Map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
    var googleLayer = new L.Google('SATELLITE');
    map.addLayer(googleLayer);

})();
</script>

基于此link我可以这样做:

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

我在这里创建了一个 JS Fiddle

请问谁能帮我，如何根据经纬度显示两张卫星图像？

Answer 1

如果要显示两张 map ，则需要创建两张单独的 map 。

var map = new L.Map('map', {
  center: new L.LatLng(51.51, -0.11),
  zoom: 9
});
var googleLayer = new L.Google('SATELLITE');
map.addLayer(googleLayer);

var map2 = new L.Map('map2', {
  center: new L.LatLng(51.51, -0.11),
  zoom: 15
});
var googleLayer = new L.Google('SATELLITE');
map2.addLayer(googleLayer);

html {
  height: 90%;
  width: 90%
}
body {
  margin: 10px;
  height: 100%;
}
#map,
#map2 {
  height: 50%;
  width: 100%;
  border: 1px black solid;
}

<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<div id="map"></div>
<div id="map2"></div>