2010-12-21 21 views
14

Lo que quiero hacer es,los mapas de Google marcador en movimiento al hacer clic

en mi mapa, al hacer clic en algún lugar en el mapa, que muestra un marcador en el punto, a continuación, hacer clic punto diferente en el mapa entonces muestra otro marcador. Pero quiero que mueva el primer marcador al segundo punto.

(pongo "detrás de las etiquetas html para poner el código aquí.)

Este es mi código:.

<html> 
<style type="text/css"> 
    #map_canvas { 
     height: 760px; 
     width: 1100px; 
     position: static; 
     top: 100px; 
     left: 200px; 
    } 
</style> 

<script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 

    function initialize() { 
     var latlng = new google.maps.LatLng(42.55308, 9.140625); 

     var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      streetViewControl: false, 
      mapTypeControl: false, 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 


     google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(event.latLng); 
     }); 

     function placeMarker(location) { 

      var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
       animation: google.maps.Animation.DROP, 

      }); 
      map.setCenter(location); 

     } 


    } 

</script> 
</head> 


<body onload="initialize()"> 
<div id="map_canvas" style="1500px; 1000px"></div> 
</body> 
</html> 
+0

Se puede copiar y pegar en tu página jsFiddle (http://jsfiddle.net/) No puedo leer correctamente, pero es el alcance de su "hoja de var "variable global? – Jason

Respuesta

18

Cada vez placemarker() es RAN, se crea un nuevo marcador

Debe crear el marcador una vez fuera de la función de marcador de posición y luego, dentro de marcador de posición, use marker.setPosition().

1

Eliminar un marcador simplemente setMap (null) it.

<html> 
<style type="text/css"> 
    #map_canvas { 
     height: 760px; 
     width: 1100px; 
     position: static; 
     top: 100px; 
     left: 200px; 
    } 
</style> 

<script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 
    var oldMarker; 

    function initialize() { 
     var latlng = new google.maps.LatLng(42.55308, 9.140625); 

     var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      streetViewControl: false, 
      mapTypeControl: false, 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 


     google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(event.latLng); 
     }); 

     function placeMarker(location) { 

      marker = new google.maps.Marker({ 
       position: location, 
       map: map 
       animation: google.maps.Animation.DROP, 

      }); 

      if (oldMarker != undefined){ 
       oldMarker.setMap(null); 
      } 
      oldMarker = marker; 
      map.setCenter(location); 

     } 


    } 

</script> 
</head> 


<body onload="initialize()"> 
<div id="map_canvas" style="1500px; 1000px"></div> 
</body> 
</html> 
+2

+1 o puede 'setPosition (latlng: LatLng)' ese marcador – kjy112

+0

que es verdadero. Leí el OP y pensé que leí el marcador de eliminación y eso fue lo único en mi mente :) obviamente, esa es la mejor respuesta :) – AlfaTeK

8

Otra solución es mover un marcador, para eso usted simplemente usuario marker.setPosition(). (Gracias kjy112 por el aviso :)

<html> 
<style type="text/css"> 
    #map_canvas { 
     height: 760px; 
     width: 1100px; 
     position: static; 
     top: 100px; 
     left: 200px; 
    } 
</style> 

<script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 

<script type="text/javascript"> 
    var marker; 

    function initialize() { 
     var latlng = new google.maps.LatLng(42.55308, 9.140625); 

     var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      streetViewControl: false, 
      mapTypeControl: false, 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 


     google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(event.latLng); 
     }); 

     function placeMarker(location) { 



      if (marker == undefined){ 
       marker = new google.maps.Marker({ 
        position: location, 
        map: map, 
        animation: google.maps.Animation.DROP, 
       }); 
      } 
      else{ 
       marker.setPosition(location); 
      } 
      map.setCenter(location); 

     } 


    } 

</script> 
</head> 


<body onload="initialize()"> 
<div id="map_canvas" style="1500px; 1000px"></div> 
</body> 
</html> 
+1

¿qué? puede publicar dos respuestas a una pregunta? no sabía que jajaja – kjy112

Cuestiones relacionadas