javascript - puntos - ¿Cómo llamar desdeLatLngToDivPixel en Google Maps API V3?

google.maps.marker example

Question

Sé que el método existe y está documentado, pero no sé cómo obtener un objeto MapCanvasProjection.

Answer 1

Creo que la forma más fácil es ignorar el deseo de Google de hacer nuestra vida más difícil mediante la eliminación y ocultamiento de funciones útiles en lugar de agregar nuevas, y solo para escribir sus propios métodos que hagan lo mismo.

Aquí hay una versión de una función que alguien publicó en otro lugar (no puedo encontrarla ahora), que funcionó para mí:

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));
},

Ahora puede llamarlo en cualquier momento y en cualquier lugar que desee. Lo necesitaba especialmente para menús contextuales personalizados, y lo hace perfectamente.

EDITAR : También escribí una función inversa, de PixelToLatLng que hace exactamente lo contrario. Simplemente se basa en el primero, con algunas matemáticas aplicadas:

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 2

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

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

Feo de hecho Mucho más fácil en v2 - ¡Otra falla de google api v3!

Answer 3

No estaba satisfecho con las respuestas aquí. Así que hice algunos experimentos y encontré la solución de trabajo "más simple", que está cerca de la respuesta de Ralph, pero espero que sea más comprensible. (¡Ojalá Google haga que esta característica sea más accesible!)

Primero declaras una subclase de OverlayView algún lugar como este:

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

Luego, en otro lugar de tu código donde creas una instancia del mapa, también creas una instancia de esta OverlayView y configura su mapa, así:

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

Entonces, cada vez que necesite usar fromLatLngToContainerPixel , simplemente haga esto:

canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);

Tenga en cuenta que debido a que el objeto MapCanvasProjection solo estará disponible una vez que se llame a draw() , que es en algún momento antes de que el mapa esté idle , sugiero crear un indicador booleano "mapInitialized", establecerlo en true en la primera devolución de llamada idle mapa. Y luego haz lo que tienes que hacer solo después de eso.

Answer 4

Para obtener un MapCanvasProjection, puede derivar una clase de OverlayView y llamar al método getProjection () que devuelve un tipo MapCanvasProjection

onAdd (), draw () y onRemove () deben implementarse para derivarse 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'';
};

entonces cuando estás creando tu mapa

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

Para V2 , debería poder llamar desdeLatLngToDivPixel desde su instancia de GMap2

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

Answer 5

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