Öffnen Sie das Straßenkarten-Werkzeug, um das Bild-Overlay genau zu positionieren?

Question

Zunächst einmal bin ich völlig bewusst, dass eine ähnliche Frage here

ich die JSFiddle in der akzeptierte Antwort vorgeschlagen verwendet gefragt wurde - JsFiddle

Der Code gibt mir koordiniert beide Marker als

erwartet

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

Mein Problem ist, dass ich Open Street Map verwende und nachdem ich mein Bild positioniert und die Koordinaten in meiner Anwendung verwendet habe, ist das Bild nicht richtig positioniert wie im JSFiddle.

Ich habe festgestellt, dass sowohl Google Maps als auch Open Street Map einen signifikanten Unterschied zu ihren Koordinaten haben.

Wie kann ich die richtige Position für das Overlay finden?

Answer 1

Es gibt Tutorials im Internet OSM Kacheln auf Google Maps angezeigt werden, ein in der OSM-Dokumentation aus einer schnellen Suche: Google Maps Example

Combining that with the Google Maps example yields this fiddle

Code-Schnipsel:

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>