script - ¿Herramienta de Google Maps para posicionar con precisión la superposición de imágenes?
marcar puntos en google maps api (4)
Espero que alguien pueda apuntarme en la dirección correcta.
Tengo un mapa de Google que carga marcadores de un archivo XML, junto con otros elementos del mapa, funciona muy bien. Sin embargo, ahora necesito superponer una imagen PNG en el mapa.
He intentado durante horas alinear correctamente el PNG en la parte superior del sitio, pero simplemente no puedo encontrar las dos coordenadas exactas que necesito (sur-oeste y noreste). ¿Hay alguna herramienta para hacer esto? ¿Lo ideal es que cargue la imagen y arrastre las esquinas para que se ajuste, y se muestren las dos coordenadas (lat / lng) que necesita?
He intentado usar esta herramienta: http://overlay-tiler.googlecode.com/svn/trunk/upload.html , pero tiene tres puntos de contacto.
También he intentado usar esta herramienta: http://www.birdtheme.org/useful/customoverlay.html - ¡pero no puede cambiar el tamaño de la imagen una vez cargada en el mapa y tiene una oportunidad de hacer clic en el marcador sudoeste!
También puedo usar Google Earth para alinear el PNG a la perfección, pero no puedo ver una forma de generar los puntos de latencia / latencia.
Cualquier consejo sería muy apreciado.
He aquí un ejemplo práctico de la explicación de 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();
Me gusta usar el que se encuentra aquí:
http://googlemapsapi.blogspot.com/2007/05/v280-making-image-overlays-easy-with.html
Está lejos de ser ideal y genera el código API de la versión 2 de Google Maps, pero aún puede usar las coordenadas de logitude / latitude.
Prueba esta herramienta. Simplemente haga doble clic en el mapa en el primer punto. Aparecerá una caja rectangular de tamaño variable. Extiéndelo hasta el punto final y obtenga los LatLngBounds que necesita.
jsfiddle.net/yV6xv/16/embedded/result/
Tuve que resolver este problema exacto para un cliente no hace mucho tiempo. Mi solución fue simplemente crear dos marcadores; una en cada LatLng para los LatLng de la superposición que, cuando se moviera, actualizaría la superposición y registraría los LatLndBounds en la console para que los pueda consultar. También agregué retículas (líneas verticales y horizontales) que se muestran al arrastrar un marcador para que sea más fácil colocar visualmente la superposición.
No puedo compartir el código de la solución con usted, pero implica trabajar con un OverlayView para convertir LatLng coordenadas LatLng en y desde los píxeles a través de MapCanvasProjection .
Al igual que usted, no necesitábamos esta funcionalidad para los usuarios finales, así que agregué un "modo de creación" que se alterna al proporcionar un parámetro de debug a la cadena de consulta de la solución.