谷歌地图工具准确定位图像叠加?
我希望有人能指引我走向正确的方向。谷歌地图工具准确定位图像叠加?
我有一个从XML文件加载标记的Google Map,以及其他各种地图元素,效果很好。不过,我现在需要将PNG图像叠加到地图上。
我已经尝试了几个小时来正确对齐网站顶部的PNG,但是找不到我需要的确切两个坐标(西南和东北)。有没有一个工具可以做到这一点?理想情况下,上传图片并拖动角落以适应,并输出您需要的两个坐标(lat/lng)?
我试过使用这个工具:http://overlay-tiler.googlecode.com/svn/trunk/upload.html - 但它有三个接触点。
我也尝试过使用这个工具:http://www.birdtheme.org/useful/customoverlay.html - 但是一旦上传到地图就不能调整图片大小,点击西南地图就有机会!
我也可以使用谷歌地球完美对齐PNG,但我看不到输出经纬度的方法。
任何意见将不胜感激。
不久前,我不得不为客户解决这个确切的问题。我的解决方案是简单地创建两个标记;其中每个LatLng
覆盖的LatLngBounds
,移动时,将更新覆盖并记录LatLndBounds
到console
供我参考。我还添加了在拖动标记时显示的网格线(垂直线和水平线),以便更容易在视觉上定位叠加层。
我无法与您共享解决方案中的代码,但它涉及使用OverlayView
进行工作,以便通过MapCanvasProjection
将LatLng
坐标转换为像素以及从像素转换像素。
像你一样,我们不需要终端用户的这个功能,所以我添加了一个“创作模式”,通过为解决方案的查询字符串提供debug
参数来切换。
是的,我也有一种模式,只有当用户有足够的权限执行时才会触发一次动作 所以挑选你的大脑一点点 您创建左下标记 然后用户添加右上标记 用户看到图像是3/10/20度关闭,所以他们拖动左下角标记向上,然后在此之后您只需重新绘制图像 – 2013-07-08 07:09:02
通过移动NE或SW标记,可以扭曲图像叠加层。我忘记提到,作为先决条件,用于叠加的图像需要与地图处于相同的方向(即图像的顶部为北)。 – 2013-07-08 19:12:14
你可能是建立[appnotmap上的thannmap](http://thannmap.appspot.com/)的同一个人吗? 您是否也必须在此解决方案中执行多少Trig? 我也想知道构建这个解决方案是否类似于[google/overlays#CustomOverlays](https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays)解决方案?你可以用你的用户指定的标记符号替换左侧/右上角的硬编码合作伙伴吗? – 2013-07-09 07:49:26
试试这个工具。只需双击第一点上的地图。一个可调整大小的矩形框将出现。将其跨度到终点,并获取所需的LatLngBounds。
jsfiddle.net/yV6xv/16/embedded/result/
这是一个非常酷的小工具,用于视觉化Overlay,但它不提供旋转,有时您可能会看到覆盖层可能是3/4度 – 2013-07-08 07:01:25
我喜欢用一个设在这里:
http://googlemapsapi.blogspot.com/2007/05/v280-making-image-overlays-easy-with.html
这是很不理想,并生成谷歌地图API第2版的代码,但你仍然可以使用纬度/纬度坐标。
继承人是AndréDion的解释的实例。
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();
Finnaly我在找什么!但是OSM和Google地图之间的坐标有所不同...我需要与OSM一样的.. – Weedoze 2016-08-04 12:36:05
目前尚不清楚,上传/拖拽能力是否用于开发目的或最终用户功能? – 2013-07-03 04:43:55
@ Beetroot-Beetroot我认为它是一次性的最终用户功能,比如将图片对齐一次,然后保存所需的数据,并在每次旋转或缩放时显示图像 – 2013-07-04 12:23:16
“使用Google地球调整PNG完美,但我看不出输出经纬度的方法。“我相信你输出为KML,并从中提取数字。请参阅Keyhole标记语言地面叠加层教程:https://developers.google.com/kml/documentation/kml_tut?hl = it – ToolmakerSteve 2014-09-17 05:32:34