Comment appeler fromLatLngToDivPixel dans Google Maps API V3?

Question

Je sais que cette méthode existe et est documentée, mais je ne sais pas comment obtenir un objet MapCanvasProjection.

Answer 1

Regardez http://qfox.nl/notes/116

 overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var point = overlay.getProjection().fromLatLngToDivPixel(latLng); 
 

Laid en effet. Beaucoup plus facile en v2 - une autre faille de google api v3!

Answer 2

Je pense que le plus simple est d'ignorer Google désir de rendre notre vie plus difficile par la suppression et de cacher fonctions utiles au lieu d'en ajouter de nouveaux, et de simplement écrire vos propres méthodes qui font la même chose.

Voici une version de la fonction de quelqu'un posté quelque part d'autre (je ne le trouve pas pour le moment), qui a fonctionné pour moi:

fromLatLngToPixel: function (position) {
  var scale = Math.pow(2, Map.getZoom());
  var proj = Map.getProjection();
  var bounds = Map.getBounds();

  var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
      bounds.getNorthEast().lat(),
      bounds.getSouthWest().lng()
    ));
  var point = proj.fromLatLngToPoint(position);

  return new google.maps.Point(
    Math.floor((point.x - nw.x) * scale),
    Math.floor((point.y - nw.y) * scale));
},

Maintenant, vous pouvez appeler à tout moment et n'importe où vous voulez. J'ai surtout besoin pour personnaliser les menus contextuels, et il fait de son travail à la perfection.

EDIT: j'ai aussi écrit une fonction d'inversion, fromPixelToLatLng qui fait exactement le contraire. Il est simplement basé sur le premier, avec certains de mathématiques appliquées:

fromPixelToLatLng: function (pixel) {
  var scale = Math.pow(2, Map.getZoom());
  var proj = Map.getProjection();
  var bounds = Map.getBounds();

  var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
      bounds.getNorthEast().lat(),
      bounds.getSouthWest().lng()
    ));
  var point = new google.maps.Point();

  point.x = pixel.x / scale + nw.x;
  point.y = pixel.y / scale + nw.y;

  return proj.fromPointToLatLng(point);
}

Answer 3

Je n'étais pas satisfait des réponses ici. J'ai donc fait quelques expériences et trouvé le plus "simple" solution de travail, qui est proche de Ralph réponse, mais j'espère que plus compréhensible. (Je voudrais que Google fait de cette fonctionnalité plus accessible!)

Tout d'abord vous déclarer une sous-classe de OverlayView quelque part comme ceci:

function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};

Puis quelque part d'autre dans votre code lorsque vous instanciez la carte, vous aussi instancier cette OverlayView et définir sa carte, comme suit:

var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

// Add canvas projection overlay so we can use the LatLng to pixel converter
var canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

Ensuite, chaque fois que vous devez utiliser fromLatLngToContainerPixel, vous faites simplement ceci:

canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);

Notez que parce que le MapCanvasProjection objet ne sera disponible qu'une fois draw() est appelée, ce qui est quelque temps avant de la carte, idle, je suggère la création d'un booléen "mapInitialized" drapeau, attribuez la valeur true à la première carte de l' idle de rappel. Et puis faire ce que vous devez faire seulement après que.

Answer 4

var map;
// Create your map
MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.prototype.onAdd = function() { }
MyOverlay.prototype.onRemove = function() { }
MyOverlay.prototype.draw = function() { }
function MyOverlay(map) { this.setMap(map); }
var overlay = new MyOverlay(map);
var projection = overlay.getProjection();

Answer 5

Pour obtenir un MapCanvasProjection vous pourrait dériver une classe à partir de OverlayView et d'appeler la getProjection() méthode qui renvoie une MapCanvasProjection type

onAdd(), draw() et onRemove() doit être mis en œuvre pour en tirer OverlayView.

function MyOverlay(options) {
    this.setValues(options);

    var div = this.div_= document.createElement('div');

    div.className = "overlay";
};

// MyOverlay is derived from google.maps.OverlayView
MyOverlay.prototype = new google.maps.OverlayView;

MyOverlay.prototype.onAdd = function() {

    var pane = this.getPanes().overlayLayer;
    pane.appendChild(this.div_);

}

MyOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

MyOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.getMap().getCenter());

    var div = this.div_;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
};

ensuite, lorsque vous créez votre carte

var OverLayMap = new MyOverlay( { map: map } );

Pour La V2 vous devriez être en mesure d'appeler fromLatLngToDivPixel de votre GMap2 exemple

var centerPoint = map.fromLatLngToDivPixel(map.getCenter());