計算邊界靜谷歌地圖圖像

Question

的盒子可以說，我從谷歌靜態地圖API

https://maps.googleapis.com/maps/api/staticmap?center=52.591370,-2.110748&zoom=18&size=600x600&maptype=satellite&markers=color:blue|52.591370,-2.110748

請求該圖像我得到52.591370，-2.110748中心的600px的X 600px的圖像。鑑於中心，圖像大小和縮放級別，我怎麼能計算出圖像的邊框中緯度經度座標。更具體地說，我如何計算左下角和右上角的緯度/經度。

我做了一些研究，看着墨卡託投影，但文章提到保持瓷磚的大小這是不是在這種情況下，相關的。

任何人都可以幫忙嗎？

Answer 1

我可以解釋如何計算使用地圖的JavaScript API邊框的東北，西南百分點。

您有一箇中心位置，並知道從中心到東北的距離和西南是在這兩個軸300個像素。

看一看下面的代碼計算NE和SW指出

var map; 
 
function initMap() { 
 
    var latLng = new google.maps.LatLng(52.591370, -2.110748); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: latLng, 
 
     zoom: 18, 
 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(map, "idle", function() { 
 
     //Verical and horizontal distance from center in pixels 
 
     var h = 300; 
 
     var w = 300; 
 

 
     var centerPixel = map.getProjection().fromLatLngToPoint(latLng); 
 
     var pixelSize = Math.pow(2, -map.getZoom()); 
 

 
     var nePoint = new google.maps.Point(centerPixel.x + w*pixelSize, centerPixel.y - h*pixelSize); 
 
     var swPoint = new google.maps.Point(centerPixel.x - w*pixelSize, centerPixel.y + h*pixelSize); 
 

 
     var ne = map.getProjection().fromPointToLatLng(nePoint); 
 
     var sw = map.getProjection().fromPointToLatLng(swPoint); 
 

 
     var neMarker = new google.maps.Marker({ 
 
     position: ne, 
 
     map: map, 
 
     title: "NE: " + ne.toString() 
 
     }); 
 

 
     var swMarker = new google.maps.Marker({ 
 
     position: sw, 
 
     map: map, 
 
     title: "SW: " + sw.toString() 
 
     }); 
 

 
     var polygon = new google.maps.Polygon({ 
 
      paths: [ne, new google.maps.LatLng(ne.lat(),sw.lng()), sw, new google.maps.LatLng(sw.lat(),ne.lng())], 
 
      map: map, 
 
      strokeColor: "green" 
 
     }); 
 

 
     console.log("NE: " + ne.toString()); 
 
     console.log("SW: " + sw.toString()); 
 

 
    }); 
 
}

#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=geometry&callback=initMap" 
 
    async defer></script>

您可以在jsbin看到這個例子還有：http://jsbin.com/jahocos/edit?html,output

希望這有助於！

Answer 2

const _C = { x: 128, y: 128 }; 
const _J = 256/360; 
const _L = 256/(2 * Math.PI); 

function tb(a) { 
    return 180 * a/Math.PI 
} 

function sb(a) { 
    return a * Math.PI/180 
} 

function bounds(a, b, c) { 
    null != b && (a = Math.max(a, b)); 
    null != c && (a = Math.min(a, c)); 
    return a 
} 

function latlonToPt(ll) { 
    a = bounds(Math.sin(sb(ll[0])), -(1 - 1E-15), 1 - 1E-15); 
    return { 
    x: _C.x + ll[1] * _J, 
    y: _C.y + 0.5 * Math.log((1 + a)/(1 - a)) * - _L 
    } 
} 

function ptToLatlon(pt) { 
    return [tb(2 * Math.atan(Math.exp((pt.y - _C.y)/-_L)) - Math.PI/2),(pt.x - _C.x)/_J] 
} 


function calculateBbox(ll, zoom, sizeX, sizeY) { 
    const cp = latlonToPt(ll); 
    const pixelSize = Math.pow(2, -(zoom+1)); 
    const pwX = sizeX*pixelSize; 
    const pwY = sizeY*pixelSize; 

    return { 
     ne: ptToLatlon({x: cp.x + pwX, y: cp.y - pwY}), 
     sw: ptToLatlon({x: cp.x - pwX, y: cp.y + pwY}) 
    } 
} 

此解決方案不需要包括Google地圖客戶端地圖。見例如： https://jsfiddle.net/1wy1mm7L/6/