Comment appeler depuisLatLngToDivPixel dans Google Maps API V3?

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

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

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

    Vrai en effet. Beaucoup plus facile en v2 – un autre défaut de google api v3!

    Je pense que le moyen le plus simple est d'ignorer le désir de Google de rendre notre vie plus difficile en supprimant et en cachant des fonctions utiles au lieu d'en ajouter de nouvelles et simplement d'écrire vos propres méthodes qui font la même chose.

    Voici une version d'une fonction que quelqu'un a posté ailleurs (je ne peux pas le trouver maintenant), cela 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 l'appeler n'importe quand et n'importe où. J'ai particulièrement besoin de cela pour les menus contextuels personnalisés, et ça fait parfaitement son travail.

    EDIT : J'ai également écrit une fonction inverse, dePixelToLatLng qui fait exactement le contraire. Il est simplement basé sur le premier, avec quelques 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); } 

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

    D'abord, vous déclarez 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(){}; 

    Ensuite, ailleurs dans votre code où vous créez une instanciation de la carte, vous devez également créer une instanciation de cette OverlayView et définir sa carte, de la manière suivante:

     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 , il suffit de faire ceci:

     canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng); 

    Notez que, parce que l'objet MapCanvasProjection ne sera disponible qu'une fois que draw() est appelé, ce qui est un peu avant l' idle la carte, je suggère de créer un indicateur booléen "mapInitialized", le définir comme vrai sur le premier rappel de la carte idle . Et puis faites ce que vous devez faire seulement après cela.

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

    Pour obtenir une MapCanvasProjection, vous pouvez dériver une classe de OverlayView et appeler la méthode getProjection () qui renvoie un type MapCanvasProjection

    OnAdd (), draw () et onRemove () doivent être implémentés pour dériver de 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'; }; 

    Alors lorsque vous créez votre carte

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

    Pour V2, vous devriez pouvoir appeler depuisLatLngToDivPixel depuis votre instance GMap2

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