Google Maps v3 zestaw pojedynczy punkt znacznikowy na mapie kliknij

Teraz mam kod mapy google, który ustawi jeden znacznik na mapie. To, czego chcę, to przesunięcie tego pojedynczego znacznika na dowolne współrzędne, które użytkownik kliknie. Chcę tylko 1 znacznik na mapie, więc potrzebuję tego pojedynczego znacznika do przeniesienia do klikniętej lokalizacji. Każda pomoc jest doceniana. Dzięki!Google Maps v3 zestaw pojedynczy punkt znacznikowy na mapie kliknij

var initialLocation; 
    var siberia = new google.maps.LatLng(60, 105); 
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); 
    var browserSupportFlag = new Boolean(); 



    function initialize() { 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

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

     // Try W3C Geolocation (Preferred) 
     if(navigator.geolocation) { 
      browserSupportFlag = true; 
      navigator.geolocation.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeolocation(browserSupportFlag); 
      }); 
      // Try Google Gears Geolocation 
     } else if (google.gears) { 
      browserSupportFlag = true; 
      var geo = google.gears.factory.create('beta.geolocation'); 
      geo.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.latitude,position.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeoLocation(browserSupportFlag); 
      }); 
      // Browser doesn't support Geolocation 
     } else { 
      browserSupportFlag = false; 
      handleNoGeolocation(browserSupportFlag); 
     } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag === true) { 
       alert("Geolocation service failed."); 
       initialLocation = newyork; 
      } else { 
       alert("Your browser doesn't support geolocation. We've placed you in Siberia."); 
       initialLocation = siberia; 
      } 
     } 

     function placeMarker(location) { 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
       draggable: true 
      }); 
      map.setCenter(location); 
      var markerPosition = marker.getPosition(); 
      populateInputs(markerPosition); 
      google.maps.event.addListener(marker, "drag", function (mEvent) { 
       populateInputs(mEvent.latLng); 
      }); 
     } 
     function populateInputs(pos) { 
      document.getElementById("t1").value=pos.lat() 
      document.getElementById("t2").value=pos.lng(); 
     } 
    }

Źródło

2010-12-27 user547794

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #map_canvas {height:600px;width:800px} 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
     var map; 
     var markersArray = []; 

     function initMap() 
     { 
      var latlng = new google.maps.LatLng(41, 29); 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      // add a click event handler to the map object 
      google.maps.event.addListener(map, "click", function(event) 
      { 
       // place a marker 
       placeMarker(event.latLng); 

       // display the lat/lng in your form's lat/lng fields 
       document.getElementById("latFld").value = event.latLng.lat(); 
       document.getElementById("lngFld").value = event.latLng.lng(); 
      }); 
     } 
     function placeMarker(location) { 
      // first remove all markers if there are any 
      deleteOverlays(); 

      var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
      }); 

      // add marker in markers array 
      markersArray.push(marker); 

      //map.setCenter(location); 
     } 

     // Deletes all markers in the array by removing references to them 
     function deleteOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setMap(null); 
       } 
      markersArray.length = 0; 
      } 
     } 
    </script> 
</head> 

<body onload="initMap()"> 
    <div id="map_canvas"></div> 
    <input type="text" id="latFld"> 
    <input type="text" id="lngFld"> 
</body> 
</html>

Źródło

2010-12-30 22:17:55

Po prostu chce przesunąć pojedynczy znacznik, więc lepiej jest użyć markera.setPosition(). Dodam odpowiedź jako przykład tego, jak to zrobić w ten sposób. – orrd

ta odpowiedź działa dobrze, ale tak naprawdę nie potrzebujesz i tablica do tego, wystarczy jeden var, ponieważ jest to tylko jeden ostatni znacznik, ponieważ po ustawieniu nowego, usuniesz natychmiast ostatni. opublikowałem kod ... – Samuel

Utwórz globalną zmienną javascript "marker".

Następnie w słuchacza dodać jeśli znacznik istnieje oświadczenie oraz remove że jeśli prawda

myListener = google.maps.event.addListener(map, 'click', function(event) { 
      if(marker){marker.setMap(null)} 
      placeMarker(event.latLng); 
      google.maps.event.removeListener(myListener); 
     });

Źródło

2010-12-27 08:17:15

Dzięki za odpowiedź. Nie mogę uzyskać kodu { if (znacznik) {znacznik.setMap (null)} do pracy. Jeśli usuniemy tę linię, utworzony zostanie pojedynczy znacznik i mogę go przenieść w dowolne miejsce - jednak po kliknięciu nowej lokalizacji znacznik się tam nie porusza. – user547794

Można spróbować:

google.maps.event.addListener(map, 'click', function(event){ 
     var marker_position = event.latLng; 
marker = new google.maps.Marker({ 
       map: map, 
       draggable: false 
      }); 
     marker.setPosition(marker_position); 
})

Źródło

2012-08-15 04:01:13 cowboybkit

spróbować tej

if (marker) { marker.setMap(null) } 

marker = new google.maps.Marker({ position: event.latLng, map: map });

Źródło

2012-10-30 10:31:39 MAK

Obecne odpowiedzi wykonują o wiele więcej pracy niż jest to konieczne, usuwając i ponownie dodając znaczniki. Najlepszym sposobem na to jest użycie funkcji setPosition(), którą zapewnia interfejs API Map Google.

Oto kod zmodyfikowane do wykorzystania setPosition(), aby przesunąć wskaźnik:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     #map_canvas { height:600px; width:800px } 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    var initialLocation; 
    var siberia = new google.maps.LatLng(60, 105); 
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); 
    var browserSupportFlag = new Boolean(); 

    function initialize() { 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var marker; 

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

     // Try W3C Geolocation (Preferred) 
     if(navigator.geolocation) { 
      browserSupportFlag = true; 
      navigator.geolocation.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeolocation(browserSupportFlag); 
      }); 
      // Try Google Gears Geolocation 
     } else if (google.gears) { 
      browserSupportFlag = true; 
      var geo = google.gears.factory.create('beta.geolocation'); 
      geo.getCurrentPosition(function(position) { 
       initialLocation = new google.maps.LatLng(position.latitude,position.longitude); 
       map.setCenter(initialLocation); 
      }, function() { 
       handleNoGeoLocation(browserSupportFlag); 
      }); 
      // Browser doesn't support Geolocation 
     } else { 
      browserSupportFlag = false; 
      handleNoGeolocation(browserSupportFlag); 
     } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag === true) { 
       alert("Geolocation service failed."); 
       initialLocation = newyork; 
      } else { 
       alert("Your browser doesn't support geolocation. We've placed you in Siberia."); 
       initialLocation = siberia; 
      } 
     } 

     function placeMarker(location) { 
      if (marker) { 
       marker.setPosition(location); 
      } else { 
       marker = new google.maps.Marker({ 
        position: location, 
        map: map, 
        draggable: true 
       }); 
       google.maps.event.addListener(marker, "drag", function (mEvent) { 
        populateInputs(mEvent.latLng); 
       }); 
      } 
      populateInputs(location); 
     } 

     function populateInputs(pos) { 
      document.getElementById("t1").value=pos.lat() 
      document.getElementById("t2").value=pos.lng(); 
     } 
    } 

    </script> 
</head> 

<body onload="initialize()"> 
    <div id="map_canvas"></div> 
    <input type="text" id="t1"> 
    <input type="text" id="t2"> 
</body> 
</html>

Źródło

2013-08-09 19:48:56 orrd

Po kliknięciu i przeciągnięciu mapy zdarzenie mouseup nie powiedzie się w nim. Ikona dłoni nadal chwyta i przeciąga mapę nawet po zwolnieniu przycisku myszy. Konsola z napisem "Nie można odczytać właściwości" latLng "niezdefiniowanej. Pokazuje błąd tutaj: google.maps.event.addListener (mapa," przeciągnij ", funkcja (zdarzenie) { miejsceMarker (event.latLng); });'; – sohaiby

Burak Erdem odpowiedź działa dobrze, ale w rzeczywistości nie potrzebują i tablica to zrobić, wystarczy jeden var ponieważ to tylko jeden ostatni znacznik, ponieważ po ustawieniu nowego usuniesz natychmiast ten ostatni. Zrobiłem to z tego kilka wierszy i to działało w porządku:

 var map; 
     var lastMarker; 
     function initialize() { 
      var map_canvas = document.getElementById('map_canvas'); 
      var map_options = { 
       center: new google.maps.LatLng(-25.363882, 131.044922), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(map_canvas, map_options) 
      google.maps.event.addListener(map, 'click', function(event) { 
       placeMarker(event.latLng); 
      }); 
     } 

     function placeMarker(location) { 
      if (lastMarker != null) 
       lastMarker.setMap(null); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map 
      }); 
      lastMarker = marker; 
     } 

     google.maps.event.addDomListener(window, 'load', initialize);

Źródło

2014-06-12 14:31:17 Samuel

osiągnąłem to z następujących powodów:

// create a new marker 
var marker = new google.maps.Marker({ 
}); 
//add listener to set the marker to the position on the map 
google.maps.event.addListener(map, 'click', function(event) { 
marker.setPosition(event.latLng); 
marker.setMap(map); 
marker.setAnimation(google.maps.Animation.DROP); 
});

Tworzy znacznik, a następnie przenieść go na każdym kliknięciem myszki lokalizacji ... Dodałem także animację kropla.

Zamiast tworzyć wiele znaczników, tworzy jeden znacznik i przenosi go do klikniętej lokalizacji.

Źródło

2015-01-31 14:28:11 MrGoodfellow

Google Maps v3 zestaw pojedynczy punkt znacznikowy na mapie kliknij

Odpowiedz

Powiązane problemy