2010-12-21 18 views
14

Was will ich tun ist,Google Maps bewegen Markierung auf klicken

auf meiner Karte, wenn ich irgendwo auf der Karte klicken, wird eine Markierung auf den Punkt zeigt, dann klicke ich anderen Punkt auf der Karte, um diese dann zeigt einen anderen Marker. Aber ich möchte, dass der erste Marker zum zweiten Punkt bewegt wird.

(Ich habe "hinter den HTML-Tags für den Code hier setzen.)

Dies ist mein Code:.

<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

Können Sie kopieren und einfügen, um Ihre Seite in jsFiddle (http://jsfiddle.net/) ich es nicht richtig lesen kann, aber der Umfang Ihrer „var map "Variable globale? – Jason

Antwort

18

Jedes Mal placemarker() ist ran, es erzeugt einen neuen Marker

Sie müssen den Marker einmal außerhalb der Ortsmarkierungsfunktion erstellen und danach innerhalb des Platzhalters marker.setPosition() verwenden

1

Entfernen ein Marker nur setMap (null) es.

<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 oder er kann 'setPosition (latlng: LatLng)' dass Marker – kjy112

+0

das ist wahr. Ich las die OP und dachte, ich lese löschen Marker und das war das einzige, was in meinem Kopf :) offensichtlich das ist die beste Antwort :) – AlfaTeK

8

Eine andere Lösung ist, einen Marker zu verschieben, für den Sie nur Benutzer marker.setPosition(). (Dank kjy112 für die Warnung :)

<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

was? Sie können zwei Antworten auf eine Frage schreiben? Ich wusste das nicht, lol – kjy112

Verwandte Themen