Narzędzie Google Maps do dokładnego pozycjonowania nakładki obrazu?

Question

Mam nadzieję, że ktoś może wskazać mi właściwy kierunek.

Mam Mapę Google, która ładuje znaczniki z pliku XML, wraz z różnymi innymi elementami mapy, działa świetnie. Jednak teraz muszę nałożyć obraz PNG na mapę.

Próbowałem godzinami poprawnie wyrównać PNG na górze strony, ale po prostu nie mogę znaleźć dokładnie dwóch współrzędnych, których potrzebuję (południowy-zachód i północny-wschód). Czy istnieje narzędzie do robienia tego? Idealnie przesłać obraz i przeciągnąć narożniki, aby dopasować, i wyprowadza dwa współrzędne (łac/lng), których potrzebujesz?

Próbowałem używać tego narzędzia: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - ale ma trzy punkty kontaktowe.

Próbowałem również użyć tego narzędzia: - ale nie można zmienić rozmiaru obrazu po przesłaniu na mapę i masz jedną szansę na kliknięcie na znaczniku południowo-zachodnim!

Mogę też użyć Google Earth, aby idealnie dopasować PNG, ale nie widzę sposobu na wyprowadzenie punktów lat/lng.

Każda rada byłaby mile widziana.

Answer 1

Musiałem rozwiązać ten problem dla klienta niedawno. Moim rozwiązaniem było po prostu utworzenie dwóch markerów; po jednym przy każdym LatLng dla nakładki LatLngBounds, która po przeniesieniu aktualizowałaby nakładkę i rejestrowała LatLndBounds do console, aby mógł się do mnie odnieść. Dodałem również siateczki (linie pionowe i poziome), które są wyświetlane podczas przeciągania znacznika, dzięki czemu łatwiej było wizualnie ustawić nakładkę.

Nie mogę udostępnić kodu z rozwiązania, ale wiąże się to z pracą z OverlayView w celu konwersji współrzędnych LatLng do iz pikseli za pomocą MapCanvasProjection.

Podobnie jak Ty, nie potrzebowaliśmy tej funkcji dla użytkowników końcowych, więc dodałem "tryb tworzenia treści", który jest przełączany przez podanie parametru debug do ciągu zapytania w roztworze.

Answer 2

Wypróbuj to narzędzie. Wystarczy dwukrotnie kliknąć na mapie w pierwszym punkcie. Zostanie wyświetlone zmienne pole prostokątne. Rozciągnij go do punktu końcowego i zdobądź potrzebne Ci LatLngBounds.

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

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

Answer 3

Chciałbym użyć jednego znaleźć tutaj:

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

to daleko od ideału, a to generuje Mapy Google w wersji 2 kod API, ale nadal można używać współrzędne logitude/szerokość geograficzna.

Answer 4

Oto działający przykład wyjaśnienia André Diona.

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