jQuery Girl
  1. jQuery Girl
  3. Marqueur de mise à jour Google Maps api V3
Intereting Posts
Méthode recommandée pour réaliser des flèches vers le bas dans un champ sélectionné Comment préserver les nouvelles lignes lors de l’affichage d’un fichier texte avec jQuery Style contenu de la boîte de dialog Jquery div Qu’est-ce qui peut empêcher la fonction unsind de jQuery de fonctionner correctement? L’appel Ajax ne fonctionne pas avec l’extension chrome avec manifeste v2 Comment obtenir un tableau de valeur d’atsortingbut à partir d’éléments d’un object jQuery enregistrer la valeur du texte dans listview et commencer à compter le temps Obtenir une valeur de td d’un tr sélectionné dans jQuery Cochez la case parent avec jQuery Comment cloner bootstrap multi-select dynamicment? Nombre de caractères de la zone de texte semblable à Twitter avec alerte intégrée jQuery ajaxSetup beforeSend ne s’exécutant pas dans IE8 Ne pas obtenir les identifiants et mot de passe dans div La table IE9 a des lignes aléatoires décalées selon des colonnes aléatoires Cliquez sur l’événement pour les éléments ajoutés au DOM de manière dynamic

Marqueur de mise à jour Google Maps api V3

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