javascript - studio - poner varios marcadores en google maps js

Agregar un marcador a una imagen en javascript?

Question

¿Alguien sabe cómo puedo agregar un marcador a una imagen (no un mapa) en Javascript?

Idealmente, me gustaría tener un controlador que se comporte como agregar un marcador a un mapa, es decir, un clic hace que se muestre un marcador en el punto en el que se hizo clic y devuelve las coordenadas x / y del punto en el que se hizo clic.

es posible?

Cheers Richard

Answer 1

Sí, es posible.

Aunque es totalmente factible con solo javascript, usaría algún tipo de biblioteca como JQuery .

El enfoque sería tener un elemento img con su marcador, y luego agregar un manejador de clic a la imagen que desea usar como su "mapa" que mueve su marcador al lugar donde se hizo clic en el elemento.

Aquí hay un ejemplo no probado:

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
$(''#map'').click(function(e)
{
   $(''#marker'').css(''left'', e.pageX).css(''top'', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
});
</script>

Editar: Y esto es totalmente posible sin JQuery también, por supuesto. Debajo hay un ejemplo de código de eso.

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
document.getElementById(''map'').onclick = function(e)
{
   with(document.getElementById(''marker''))
   {
        style.left = e.pageX;
        style.top = e.pageY;
        style.display = ''block'';
   }
   // Here you forward the coordinates e.pageX, e.pageY 
   // ... to whatever function that needs it
};
</script>