J’ai une carte qui charge. Je souhaite append un marqueur qui obtient son sens de la longueur dans les zones de texte et je ne peux pas le comprendre
Rien ne se passe lorsque je clique sur le bouton updatemap.
Voici mon code jusqu’à présent:
$(document).ready(function () { alert("Dom, dom dom dom dom"); var map; var marker; function initialize() { var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); } $("#updateMap").click(function(){ var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng); var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); marker = new google.maps.Marker({ position: newLatLng, map: map, draggable: true }); }); }); // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); });
Mettre à jour
En outre, votre référence de map
globale n’est jamais définie sur l’instance de carte réelle, car vous la masquerez avec un nom local var
identique.
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
Cela devrait être juste
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
Vous utilisez lat
et lng
pour la position du marqueur avant son initialisation (sauf s’ils sont globalement définis quelque part):
var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng);
Si vous souhaitez mettre à jour la position du même marqueur sans en créer un nouveau, procédez comme suit:
$("#updateMap").click(function(){ var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng); });
Tout d’abord, dans la fonction d’ initialize
, vous créez une nouvelle variable de map
locale, car vous utilisez le mot clé var
. Cette variable n’est pas visible en dehors de l’ initialize
, vous devez donc supprimer var
pour utiliser la variable globale.
Deuxièmement, vous utilisez les variables lat
et lng
avant qu’elles ne soient définies.
Troisièmement, vous setPosition
méthode setPosition
de la variable de marker
lorsque le marker
ne peut pas être défini.
Après avoir résolu tous ces problèmes, votre code peut ressembler à ceci:
$(document).ready(function () { alert("Dom, dom dom dom dom"); var map; var marker; function initialize() { var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); } $("#updateMap").click(function(){ var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); if (marker != undefined) marker.setPosition(newLatLng); else marker = new google.maps.Marker({ position: newLatLng, map: map, draggable: true }); }); // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); });