Google Maps工具可准确定位图片叠加？ [英] Google Maps tool for accurately positioning image overlay?
问题描述
我有一个从XML文件加载标记的Google Map，以及其他各种地图元素，效果很好。不过，我现在需要将PNG图像叠加到地图上。
我已经尝试了好几个小时来正确对齐网站顶部的PNG，但却找不到我需要的确切两个坐标（西南和北 - 东）。有没有一个工具可以做到这一点？理想情况下，上传图片并拖动角落以适应，并输出您需要的两个坐标（lat / lng）？
我曾尝试使用此工具： http://overlay-tiler.googlecode.com/svn/trunk/upload.html - 但它有三个联系点。
我也尝试过使用这个工具： http://www.birdtheme.org/useful/customoverlay.html - 但您无法在上载到地图后重新调整图片大小，您只需点击一下西南方向即可获得一次机会！
我也可以使用Google地球完美对齐PNG，但我看不到输出经纬度点的方法。
任何建议将不胜感激。
a href =http://jsfiddle.net/4cWCW/3/ =noreferrer> http://jsfiddle.net/4cWCW/3/
var overlay;
DebugOverlay.prototype = new google.maps.OverlayView（）;
函数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）;
}）;
函数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 ='绝对';
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 ='绝对';
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 =函数（边界）{
this.bounds_ = bounds;
this.draw（）;
};
DebugOverlay.prototype.onRemove = function（）{
this.div_.parentNode.removeChild（this.div_）;
this.div_ = null;
};
initialize（）;
I am hoping someone can point me in the right direction.
I have a Google Map that loads markers from an XML file, along with various other map elements, works great. However I now need to overlay a PNG image onto the map.
I have tried for hours to correctly align the PNG over the top of the site but just cannot find the exact two co-ordinates I need (south-west and north-east). Is there a tool for doing this? Ideally upload the image and drag the corners to fit, and it outputs the two co-ordinates (lat/lng) you need?
I have tried using this tool: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - but it has three contact points.
I have also tried using this tool: http://www.birdtheme.org/useful/customoverlay.html - but you cannot resize the image once uploaded to the map and you get one chance at clicking the south-west marker!
I can also use Google Earth to align the PNG perfectly, but I can't see a way of outputting the lat/lng points.
Any advice would be much appreciated.
Heres a working example of André Dion's explanation.
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();
这篇关于Google Maps工具可准确定位图片叠加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
