Google Maps faites glisser et dragend des écouteurs d'événement ne fonctionnera pas si le marqueur créé par écouteur d'événement clic

Juste un noob en essayant d'apprendre, je suis sorti avec un problème que lorsque je tente de créer un marqueur avec l'événement de clic, glisser et dragend des écouteurs d'événement ne fonctionne pas. Considérant que lors de sa création par défaut de ces travaux.

Voici ce que j'ai essayé jusqu'à présent.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">         </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Default Marker',
draggable:true
});
google.maps.event.addListener(map,'click',function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Click Generated Marker',
draggable:true
});
}
);
google.maps.event.addListener(
marker,
'drag',
function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
//alert('drag');
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
alert('Drag end');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
</body></html>
InformationsquelleAutor Yogesh Malpani | 2012-07-09
  1. 58

    Ce que vous voulez probablement faire est de changer la référence dans vos écouteurs d'événement, d' ce à l'événement lui-même.

    Ensuite, vous devez ajouter distinct des écouteurs d'événement pour votre nouveau repère en même temps que vous la créez. Je vous suggère simplement d'avoir une fonction qui prend en entrée des arguments en faveur de la latlng, le titre, et tout ce dont vous avez besoin. Et puis, il crée le marqueur et tous les écouteurs d'événement nécessaire.

    function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}
function handleEvent(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
}
    InformationsquelleAutor duncan
  2. 9
    var marker = new google.maps.Marker({
position: latlng,
map: map,
zoom:25,
title: title,
draggable:true,
});
var infowindow = new google.maps.InfoWindow({
content: info 
});
infowindow.open(map,marker);
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
});
infowindow.open(map,marker);
});
google.maps.event.addListener(marker,'dragend',function(event) 
{
document.getElementById('lat').value =event.latLng.lat();
document.getElementById('lng').value =event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
});
infowindow.open(map,marker);
});
    • Il serait bénéfique pour les futurs lecteurs si vous voulez des précisions sur votre code
    InformationsquelleAutor Vishal
  3. 3
    var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
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,
draggable:true,
map: map
});
map.setCenter(location);
}

    Essayez de créer le repère de ce genre .

    • Merci @krikara pour une réponse rapide. les marqueurs ne sont créées, mais glisser dragend encore l'habitude de travailler.
    • N'utilisez pas votre code, utilisez des mines. Ces deux derniers écouteurs que vous utilisez ne fonctionne pas. Tous vous avez besoin est déplaçable vrai. Bien que je ne peux pas exécuter ce code en ce moment et il n'est pas tout à fait correct, donc peut-être que vous pouvez tricher un peu.
    • Je suis à l'aide de votre code. Je voulais dragend événement pour obtenir la position enregistrée du marqueur dans la base de données. J'ai ajouté dragend événement dans votre code mais sa ne pas me faire virer.
    • Oh, j'en ai mal interprété vos intentions. Désolé. Je ne peux pas vraiment faire des expériences avec le code maintenant, alors peut-être que cela aidera. (quelqu'un d'autre code) jsfiddle.net/ABqMH/8
    • Ce code génère un marqueur par défaut, ce qui déclenche glisser dragend événement pour que mon code ci-dessus. Mais à nouveau le problème génère lorsqu'un repère est créé par l'événement de clic, darg et dragend événement ne le feu ensuite.
    • Merci beaucoup pour tous vos efforts.
    • Désolé je ne pouvais pas être plus d'aide, mais la réponse ci-dessus est assez doux.

    InformationsquelleAutor krikara