打開街道地圖工具準確定位圖像覆蓋？

Question

首先，我完全知道，類似的問題已經被問here

我用的jsfiddle在接受的答案建議 - JsFiddle

代碼爲我提供了兩個標記座標預期

google.maps.event.addListener(markerA, 'dragend', function() { 

    var newPointA = markerA.getPosition(); 
    var newPointB = markerB.getPosition(); 
    console.log("point1"+ newPointA); 
    console.log("point2"+ newPointB); 
}); 

google.maps.event.addListener(markerB, 'dragend', function() { 
    var newPointA = markerA.getPosition(); 
    var newPointB = markerB.getPosition(); 
    console.log("point1"+ newPointA); 
    console.log("point2"+ newPointB); 
}); 

我的問題是，我正在使用打開的街道地圖，並在我的圖像和使用我的應用程序中的座標後，圖像沒有正確定位在JSFiddle中。

我發現Google地圖和打開的街道地圖都與它們的座標存在顯着差異。

如何找到覆蓋層的正確位置？

Answer 1

有在網絡上的教程從快速搜索顯示在谷歌地圖，一個OSM文檔中OSM瓦片：Google Maps Example

Combining that with the Google Maps example yields this fiddle

代碼片段：

var overlay; 
 
var map; 
 

 
DebugOverlay.prototype = new google.maps.OverlayView(); 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(40.743388, -74.007592), 
 
    mapTypeId: "OSM", 
 
    mapTypeControl: false, 
 
    streetViewControl: false 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    // 40.674018,-74.251324,40.788664,-74.116993 
 
    var swBound = new google.maps.LatLng(40.674018, -74.251324); 
 
    var neBound = new google.maps.LatLng(40.788664, -74.116993); 
 
    var bounds = new google.maps.LatLngBounds(swBound, neBound); 
 
    map.fitBounds(bounds); 
 
    var srcImage = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'; 
 

 
    overlay = new DebugOverlay(bounds, srcImage, map); 
 

 
    var markerA = new google.maps.Marker({ 
 
    position: swBound, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 

 
    var markerB = new google.maps.Marker({ 
 
    position: neBound, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 

 
    google.maps.event.addListener(markerA, 'drag', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
 
    overlay.updateBounds(newBounds); 
 
    }); 
 

 
    google.maps.event.addListener(markerB, 'drag', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
 
    overlay.updateBounds(newBounds); 
 
    }); 
 

 
    google.maps.event.addListener(markerA, 'dragend', function() { 
 

 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    console.log("point1" + newPointA); 
 
    console.log("point2" + newPointB); 
 
    }); 
 

 
    google.maps.event.addListener(markerB, 'dragend', function() { 
 
    var newPointA = markerA.getPosition(); 
 
    var newPointB = markerB.getPosition(); 
 
    console.log("point1" + newPointA); 
 
    console.log("point2" + newPointB); 
 
    }); 
 
} 
 

 
function DebugOverlay(bounds, image, map) { 
 

 
    this.bounds_ = bounds; 
 
    this.image_ = image; 
 
    this.map_ = map; 
 
    this.div_ = null; 
 
    this.setMap(map); 
 
} 
 

 
DebugOverlay.prototype.onAdd = function() { 
 

 
    var div = document.createElement('div'); 
 
    div.style.borderStyle = 'none'; 
 
    div.style.borderWidth = '0px'; 
 
    div.style.position = 'absolute'; 
 
    var img = document.createElement('img'); 
 
    img.src = this.image_; 
 
    img.style.width = '100%'; 
 
    img.style.height = '100%'; 
 
    img.style.opacity = '0.5'; 
 
    img.style.position = 'absolute'; 
 
    div.appendChild(img); 
 
    this.div_ = div; 
 
    var panes = this.getPanes(); 
 
    panes.overlayLayer.appendChild(div); 
 
}; 
 

 
DebugOverlay.prototype.draw = function() { 
 
    var overlayProjection = this.getProjection(); 
 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
 
    var div = this.div_; 
 
    div.style.left = sw.x + 'px'; 
 
    div.style.top = ne.y + 'px'; 
 
    div.style.width = (ne.x - sw.x) + 'px'; 
 
    div.style.height = (sw.y - ne.y) + 'px'; 
 
}; 
 

 

 
DebugOverlay.prototype.updateBounds = function(bounds) { 
 
    this.bounds_ = bounds; 
 
    this.draw(); 
 
}; 
 

 
DebugOverlay.prototype.onRemove = function() { 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
}; 
 

 
initialize(); 
 
//google.maps.event.addDomListener(window, 'load', initialize); 
 

 
//Define OSM map type pointing at the OpenStreetMap tile server 
 
map.mapTypes.set("OSM", new google.maps.ImageMapType({ 
 
    getTileUrl: function(coord, zoom) { 
 
    // "Wrap" x (logitude) at 180th meridian properly 
 
    // NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib 
 
    var tilesPerGlobe = 1 << zoom; 
 
    var x = coord.x % tilesPerGlobe; 
 
    if (x < 0) { 
 
     x = tilesPerGlobe + x; 
 
    } 
 
    // Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll 
 

 
    return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png"; 
 
    }, 
 
    tileSize: new google.maps.Size(256, 256), 
 
    name: "OpenStreetMap", 
 
    maxZoom: 18 
 
}));

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div> 
 
<div id="footer">&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>