Google maps 谷歌地图工具精确定位图像覆盖？

我希望有人能给我指出正确的方向

我有一个Google地图，它可以从XML文件中加载标记，以及其他各种地图元素，效果非常好。但是我现在需要在地图上覆盖一个PNG图像

我已经试了几个小时来正确地将PNG对准网站顶部，但就是找不到我需要的两个坐标（西南和东北）。有这样做的工具吗？理想情况下，上传图像并拖动角点以适应，然后输出所需的两个坐标（lat/lng）

我尝试过使用此工具：-但它有三个接触点

我也尝试过使用这个工具：-但是一旦上传到地图上，你就不能调整图像的大小，你有机会点击西南标记

我也可以使用Google Earth完美地对齐PNG，但我看不到输出lat/lng点的方法

---

任何建议都将不胜感激

不久前，我不得不为一位客户解决这个问题。我的解决方案是简单地创建两个标记；覆盖层的

LatLng

每个

LatLngBounds

，移动时，将更新覆盖层并将

LatLndBounds

记录到

控制台

，供我参考。我还添加了在拖动标记时显示的十字线（垂直线和水平线），以便更容易直观地定位覆盖

我无法与您共享解决方案中的代码，但它涉及使用

OverlayView

，以便通过将

LatLng

坐标转换为像素

---

与您一样，最终用户也不需要此功能，因此我添加了一个“创作模式”，通过向解决方案的查询字符串提供

debug

参数来切换该模式。

我喜欢使用位于以下位置的参数：

---

这远远不够理想，它会生成GoogleMapsVersion2API代码，但您仍然可以使用logitude/latitude坐标

这是安德烈·迪翁解释的一个有效例子

---

不清楚上传/拖动功能是用于开发还是作为最终用户功能？@Beetroot Beetroot我认为它是一次性的最终用户功能，比如将图片对齐一次，然后保存所需的数据，并在每次旋转或缩放时仅显示图像“使用Google Earth完美对齐PNG，但我看不到输出lat/lng点的方法。“我相信您将输出为KML，并从中提取数字。参见Keyhole Markup Language教程中的地面覆盖：是的，我也有一种模式，只有当用户有足够的权限执行该操作时才会触发一次，这样才能稍微挑动你的大脑创建左下角的标记，然后用户添加右上角的标记。用户看到图像偏离3/10/20度，因此向上拖动左下角的标记，然后您只需重新绘制图像。通过移动NE或SW标记，您可以倾斜图像覆盖。我忘了提到，作为一个先决条件，用于覆盖的图像需要与地图的方向相同（即，图像的顶部是北方）。您可能是建造该图像的同一个人吗？在这个解决方案中，您也需要做很多Trig吗？我还想知道构建此解决方案是否与此解决方案类似？除非你只是用你的用户指定的标记词替换机器人左/右上的硬编码词？不，那不是我。我的解决方案不涉及任何三角学，尽管它有子类

google.maps.CustomOverlay

。我做了你喜欢的事情，但当你将NE标记放在SW标记下方时，图像似乎在边界框下方：（这会让我惊讶不已！但是OSM和谷歌地图之间的坐标有差异…我需要OSM的坐标…这太棒了，谢谢这帮了我大忙！！

var overlay;

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

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(40.743388,-74.007592)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328);
  var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

   console.log(map);
  var srcImage = 'http://robincwillis.com/top/splash/04.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();