Open Street Map 工具精确定位图像叠加？

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

我的问题是我使用的是 Open Street Map，在定位我的图像并在我的应用程序中使用坐标后，图像没有像在 JSFiddle 中那样正确定位。

我发现 Google 地图和 Open Street Map 的坐标有显着差异。

如何找到叠加层的正确位置？

Answer 1

网络上有在 Google 地图上显示 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>

Open Street Map 工具精确定位图像叠加？

Open Street Map tool for accurately positioning image overlay?

google-maps

overlay

openstreetmap