Google Maps v3 ensemble unique marqueur de point sur la carte, cliquez

Maintenant j'ai google map code qui permettra de définir un seul marqueur sur une carte. Ce que je veux, c'est pour cette unique marqueur être déplacé à ce que les coordonnées de l'utilisateur clique sur. Je veux seulement 1 marqueur sur la carte, j'ai donc besoin que de marqueur unique pour être déplacé quel que soit l'endroit cliqué. Toute aide est appréciée. Merci!

    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();
}
}

InformationsquelleAutor user547794 | 2010-12-27

google-maps javascript

<!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>

Il veut juste pour déplacer un marqueur unique, de sorte qu'il est plus logique d'utiliser le marqueur.setPosition(). Je vais ajouter une réponse comme un exemple de la façon de le faire de cette façon.
cette réponse, qui fonctionne bien, mais en fait vous n'avez pas besoin de tableaux et pour ce faire, il suffit d'une var puisqu'il n'est qu'un dernier marqueur, parce que lorsque vous définissez un nouveau, vous supprimez inmediatly le dernier. j'ai posté le code...

InformationsquelleAutor Burak Erdem

Les réponses actualisées faire beaucoup plus de travail que ce qui est nécessaire par la suppression et re-ajout du marqueur(s). La meilleure façon de le faire est d'utiliser la setPosition() fonction de l'API Google Maps fournit à cet effet.

Ici votre code est modifié pour utiliser setPosition() pour déplacer le pointeur:

<!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>

Après en cliquant et en faisant glisser la carte, l'événement mouseup échoue en elle. L'icône de la main, garde saisissant et en faisant glisser la carte même après avoir relâché le bouton de la souris. Console en disant Cannot read property 'latLng' of undefined. montre l'erreur ici google.maps.event.addListener(map, 'drag', function (event) { placeMarker(event.latLng); });

InformationsquelleAutor orrd

3

Faire une variable javascript "marqueur".

Ensuite dans votre auditeur ajouter le si le marqueur n'existe déclaration et supprimer il si vrai
```
myListener = google.maps.event.addListener(map, 'click', function(event) {
if(marker){marker.setMap(null)}
placeMarker(event.latLng);
google.maps.event.removeListener(myListener);
});
```
- Merci pour votre réponse. Je n'arrive pas { if(marqueur){marqueur.setMap(null)} le code du travail. Si je supprime cette ligne, en un seul marqueur est créé et je peux me déplacer n'importe où - toutefois, lorsqu'un nouvel emplacement est cliqué sur le marqueur ne bouge pas de là.
InformationsquelleAutor Argiropoulos Stavros

Vous pouvez essayer:

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);
})

InformationsquelleAutor cowboybkit

essayer cette

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

InformationsquelleAutor MAK

Burak Erdem réponse fonctionne très bien, mais en fait vous n'avez pas besoin de tableaux et pour ce faire, il suffit d'une var puisqu'il n'est qu'un dernier marqueur, parce que lorsque vous définissez un nouveau, vous supprimez inmediatly le dernier. Je l'ai fait avec ces quelques lignes et il a bien fonctionné:

        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);

InformationsquelleAutor Samuel

1

Que j'ai accompli cela avec les éléments suivants:
```
//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);
});
```
Il crée un marqueur, puis le déplacer à chaque clic de souris emplacement...
J'ai également ajouté une goutte de marqueur d'animation ainsi.

Au lieu de créer plusieurs marqueurs cela crée un marqueur et le passe cliqué emplacement.

InformationsquelleAutor MrGoodfellow

Vous devez vous connecter pour publier un commentaire.