google-maps - marcadores - google maps markers icons
¿Cómo acceder al DIV del marcador de la API v3 de Google Maps y su posición de píxel? (10)
En lugar de la ventana de información predeterminada de la API de Google Maps, voy a usar otro plugin de jQuery tooltip sobre el marcador. Entonces necesito obtener el DIV del marcador y su posición de píxel.
Pero no pude conseguirlo porque no hay identificación o clase para cierto marcador. Solo yo puedo acceder a la div del lienzo del mapa desde el objeto marcador y el objeto pixelBounds no documentado.
- ¿Cómo puedo acceder al DIV del marcador?
- ¿Dónde puedo obtener la posición de píxel de DIV? ¿Puedo convertir la posición lat-lng en valores de píxel?
== anexado:
También probé con el código siguiente, pero no cambia cuando me desplazo por el mapa.
var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, ''click'', function() {
var px = this.getMap().getProjection().fromLatLngToPoint(this.getPosition());
console.log("(" + px.x + "," + px.y + ")");
});
Bueno, si DEBES acceder al DIV, aquí hay un código. Tenga en cuenta que esto solo funcionará con el marcador estándar (20x34px), y encontrará todos los marcadores. Es posible que desee mejorar este truco para satisfacer sus necesidades ...
¡TENER CUIDADO! ESTO ES UN HACK
var a=document.getElementById(''map_canvas'');
var b=a.getElementsByTagName(''img'');
var i, j=b.length;
for (i=0; i<j; i++) {
if(b[i].src.match(''marker_sprite.png'')){
if(b[i].style.width==''20px'' && b[i].style.height==''34px'') {
c=b[i].parentElement;
console.log(c.style.top+":"+c.style.left);
// this is a marker''s enclosing div
}
}
}
Descubrí que es más fácil asignar un icono personalizado y usar el atributo img src para acceder al elemento. Todavía puede usar el ícono predeterminado de google maps, solo guárdelo localmente.
$("#map img[src=''my_marker.png'']").getBoundingClientRect();
En muchas circunstancias, la matemática compleja utilizada para calcular y cambiar la posición del pin en la respuesta aceptada puede ser adecuada.
Para mi uso particular, acabo de crear un archivo PNG transparente con un lienzo significativamente más grande que el que necesitaba para el icono. Luego experimenté moviendo el pin dentro del fondo transparente y aplicando la nueva imagen al mapa.
Aquí está la especificación para agregar la imagen del pin personalizado, con ejemplos: https://developers.google.com/maps/documentation/javascript/examples/icon-simple
Este método definitivamente se escalará como un desplazamiento en píxeles en lugar de una longitud / latitud real diferente incluso cuando se acerca.
La respuesta de Rene solo le da las "coordenadas mundiales" (es decir, coords independientes del nivel de zoom y la ventana gráfica). Sin embargo, la respuesta de MBO parece correcta, así que esa es la que debes aceptar y votar (no puedo, ya que acabo de registrarme) ya que de lo contrario la solución podría pasarse por alto.
En cuanto a una versión "más fácil", puede utilizar los métodos en MapCanvasProjection en su lugar, pero eso significa que tendrá que hacer su propia superposición. Vea here para un ejemplo. :PAG
MapCanvasProjection fromLatLngToContainerPixel() es probablemente lo que el autor fromLatLngToContainerPixel() . Le dará la compensación de píxeles relativa al contenedor del mapa. Hice algunos experimentos y encontré la solución de trabajo "más simple". (¡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.
Realmente no entiendo por qué querrías obtener div específico para marcador? Si desea visualizar la información sobre herramientas, todo lo que necesita es la posición de píxeles del delimitador de marcadores (y el conocimiento sobre el tamaño del marcador y la ubicación del anclaje), no del elemento div. Siempre puede activar la información de apertura y cierre a mano cuando ocurre un evento en google.maps.
Para obtener la posición de píxel del ancla del marcador dado, puede usar este código:
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
En pixelDistance obtienes un desplazamiento del marcador marcador específico contado desde la esquina superior izquierda del mapa (y puedes obtener su posición desde map.getDiv() div). ¿Por qué funciona así (o hay una mejor manera?) Puede leer en la documentación de las superposiciones de Google Maps .
Un fragmento de trabajo estilo jQuery listo para copiar / pegar:
paso 1: inicializa tu mapa y tus opciones
<html>
<head>
<script src="get-your-jQuery" type="text/javascript"></script>
<script src="get-your-maps.API" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var bucharest = new google.maps.LatLng(44.43552, 26.10250);
var options = {
zoom: 14,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Como puede ver, más abajo, el mapa variable no está precedido por VAR, ya que debe ser Global ya que usamos otra función para obtener fromLatLngToContainerPixel. Para más detalles verifique los closures .
map = new google.maps.map($("#map_canvas")[0], options);
var marker = new google.maps.Marker({
position: google.maps.LatLng(44.4407,26.0864),
map: map
});
new google.maps.event.addListener(marker, ''mouseover'', function(){
placeMarker( marker.getPosition(),''#tooltip'');//param1: latlng, param2: container to place result
});
new google.maps.event.addListener(map, ''bounds_changed'', function(){
$("#tooltip").css({display:''none''}); //this is just so you can see that all goes well ;)
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
}); //here ends jQuery.ready
function placeMarker(location, ID){
var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(location);
var divPixel = overlay.getProjection().fromLatLngToDivPixel(location);
$(ID).css({top:containerPixel.y, left:containerPixel.x, ''dislay'':''block''});
}
//-->
</script>
</head>
<body>
<div id="tooltip" style="width:100px; height:100px; position:absolute; z-index:1; background:#fff">Here I am!</div>
<div id="map_canvas" style="width:300px; height:300px"></div>
</body>
</html>
Una cosa para recordar cuando se usa el código de MBO: cuando se repiten los mosaicos del mapa, map.getBounds().getSouthWest() devuelve "-180" independientemente de la posición del mapa. Una alternativa que estoy usando en este caso es calcular la distancia del píxel al centro en lugar de la esquina superior izquierda, ya que map.getCenter() parece devolver el punto centrado actualmente en cualquier caso. Ej. (Usando jQuery):
// Calculate marker position in pixels form upper left corner
var pixelCoordsCenter = map.getProjection().fromLatLngToPoint(map.getCenter());
pixelOffset = new google.maps.Point(
Math.floor((pixelCoordsMarker.x - pixelCoordsCenter.x) * scale + $(container).width()/2),
Math.floor((pixelCoordsMarker.y - pixelCoordsCenter.y) * scale + $(container).height()/2)
);
cualquiera que todavía esté buscando una respuesta a esto, eche un vistazo aquí: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries entre algunas otras cosas útiles de google maps hay RichMarker que permite puede agregar elementos DOM de su elección como marcadores que se pueden arrastrar. solo agrega class / id para manejar con jQuery.
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);
Ahora puede acceder a las coordenadas de su píxel a través de px y py
SIGUIENDO EL COMENTARIO POST AGREGADO:
La caída de la proyección de superposición es que hasta que su lienzo de mapa termine de cargarse no se inicialice. Tengo el siguiente oyente que forzará cualquier método que necesite desencadenar cuando el mapa termine de cargarse.
google.maps.event.addListener(map, ''idle'', functionName());
Mientras tanto, utilizo la siguiente verificación para evitar cualquier error antes de que dibuje.
if(overlay.getProjection()) {
// code here
}