Strumento Google Maps per posizionare con precisione la sovrapposizione di immagini?

Question

Spero che qualcuno possa indicarmi la giusta direzione.

Ho una mappa di Google che carica i marcatori da un file XML, insieme a vari altri elementi della mappa, funziona alla grande. Tuttavia ora ho bisogno di sovrapporre un'immagine PNG sulla mappa.

Ho cercato per ore di allineare correttamente il PNG sulla parte superiore del sito ma non riesco a trovare esattamente le due coordinate necessarie (sud-ovest e nord-est). C'è uno strumento per farlo? In teoria, carica l'immagine e trascina gli angoli per adattarli e restituisce le due coordinate (lat/lng) necessarie?

Ho provato a utilizzare questo strumento: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - ma ha tre punti di contatto.

Ho anche provato a utilizzare questo strumento: http://www.birdtheme.org/useful/customoverlay.html - ma non è possibile ridimensionare l'immagine una volta caricata sulla mappa e si ha una possibilità di fare clic sul marcatore sud-ovest!

Posso anche usare Google Earth per allineare perfettamente il PNG, ma non riesco a vedere un modo di emettere i punti di lat/lng.

Qualsiasi consiglio sarebbe molto apprezzato.

Answer 1

Ho dovuto risolvere questo problema esatto per un cliente non molto tempo fa. La mia soluzione era semplicemente creare due marcatori; uno su ciascun LatLng per l'overlay LatLngBounds che, se spostato, aggiornerebbe l'overlay e registrerà lo LatLndBounds nel riferimento a console. Ho anche aggiunto dei reticoli (linee verticali e orizzontali) che vengono mostrati durante il trascinamento di un marker, quindi è stato più facile posizionare visivamente la sovrapposizione.

Non riesco a condividere il codice dalla soluzione con voi, ma è necessario lavorare con un OverlayView per convertire le coordinate LatLng da e verso i pixel tramite MapCanvasProjection.

Come te, non avevamo bisogno di questa funzionalità per gli utenti finali, quindi ho aggiunto una "modalità di authoring" che viene attivata fornendo un parametro debug alla stringa di query della soluzione.

Answer 2

Prova questo strumento. Basta fare doppio clic sulla mappa sul primo punto. Apparirà una scatola rectagolare ridimensionabile. Estendilo fino al punto finale e prendi LatLngBounds di cui hai bisogno.

jsfiddle.net/yV6xv/16/embedded/result/ 

http://jsfiddle.net/yV6xv/16/embedded/result/

Answer 3

Mi piace usare quello che si trova qui:

http://googlemapsapi.blogspot.com/2007/05/v280-making-image-overlays-easy-with.html

E 'tutt'altro che ideale, e genera Google Maps versione 2 del codice API, ma è comunque possibile utilizzare le coordinate di logitudine/latitudine.

Answer 4

Ecco un esempio funzionante della spiegazione di André Dion.

http://jsfiddle.net/4cWCW/3/

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