显示卫星图像 - 传单地图（javascript / jquery / css）

Question

我想要显示两个这样的卫星地图图像：

我有图像边界，4个参数定义了一个图块（正方形）：

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

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

21.00997925,42.72179487

这里初始化地图：

<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

如果要显示两个地图，则需要创建两个单独的地图。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;