web-dev-qa-db-fra.com

Outil Google Maps pour positionner avec précision la superposition d'images?

J'espère que quelqu'un pourra m'orienter dans la bonne direction.

J'ai une carte Google qui charge les marqueurs d'un fichier XML, ainsi que divers autres éléments de la carte, fonctionne très bien. Cependant, je dois maintenant superposer une image PNG sur la carte.

J'ai essayé pendant des heures d'aligner correctement le PNG sur le haut du site, mais je ne trouve tout simplement pas les deux coordonnées exactes dont j'ai besoin (sud-ouest et nord-est). Existe-t-il un outil pour ce faire? Idéalement, téléchargez l'image et faites glisser les coins pour l'ajuster, et elle produit les deux coordonnées (lat/lng) dont vous avez besoin?

J'ai essayé d'utiliser cet outil: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - mais il a trois points de contact.

J'ai également essayé d'utiliser cet outil: http://www.birdtheme.org/useful/customoverlay.html - mais vous ne pouvez pas redimensionner l'image une fois téléchargée sur la carte et vous avez une chance de cliquer sur le marqueur sud-ouest!

Je peux également utiliser Google Earth pour aligner parfaitement le PNG, mais je ne vois pas de moyen de sortir les points lat/lng.

Tout conseil serait très apprécié.

google-mapsgoogle-maps-api-3overlay
21
LearnCode

Voici un exemple de travail de l'explication d'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();
25
Robin

J'ai dû résoudre ce problème exact pour un client il n'y a pas longtemps. Ma solution était de simplement créer deux marqueurs; un à chaque LatLng pour le LatLngBounds de l'overlay qui, une fois déplacé, mettrait à jour l'overlay et enregistrerait le LatLndBounds dans le console pour que je puisse le référencer. J'ai également ajouté des réticules (lignes verticales et horizontales) qui s'affichent lorsque vous faites glisser un marqueur afin qu'il soit plus facile de positionner visuellement la superposition.

Je ne peux pas partager le code de la solution avec vous, mais cela implique de travailler avec un OverlayView afin de convertir LatLng les coordonnées vers et depuis les pixels via MapCanvasProjection .

Comme vous, nous n'avions pas besoin de cette fonctionnalité pour les utilisateurs finaux, j'ai donc ajouté un "mode de création" qui est basculé en fournissant un paramètre debug à la chaîne de requête de la solution.

9
André Dion

J'aime utiliser celui qui se trouve ici:

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

C'est loin d'être idéal et il génère le code API de Google Maps version 2, mais vous pouvez toujours utiliser les coordonnées logitude/latitude.

2
bmsauer

Essayez cet outil. Double-cliquez simplement sur la carte sur le premier point. Une boîte rectangulaire redimensionnable apparaîtra. Étendez-le jusqu'au point final et obtenez les LatLngBounds dont vous avez besoin.

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

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

1
sharic19