Javascript Girl
  1. Javascript Girl
  3. Marqueur au centre de la carte après la traînée
Intereting Posts
Html5 Géolocalisation clearWatch () ne répond pas Quelqu'un a-t-il un algorithme diff pour HTML rendu? Activer / désactiver le zoom sur safari iPhone avec Javascript? AngularJS – Comment puis-je soumettre un formulaire à un contrôleur sur le serveur? La réponse pour le contrôle en amont a un code d'état HTTP invalide 405 Comment soumettre plusieurs formulaires avec soumission unique? Comment supprimer le compilateur Less avec une fonction personnalisée utilisant un plugin Affichage du site html / javascript local vers un fichier PHP en ligne Ressource interprétée comme un document mais transférée avec une application de type MIME / zip Comment démarrer un canal de données WebRTC de base? Différence entre compile (), parse () et render () dans moustache.js Comment puis-je développer et réduire un <div> en utilisant javascript? Mise en cache du contenu PHP pour javascript et css Moment.js diff incorrect Comment éviter le rafraîchissement de page après un événement de clic de bouton dans asp.net

Marqueur au centre de la carte après la traînée

Je met en œuvre Google Map sur mon site. L'utilisateur peut faire glisser le marqueur et obtenir des coordonnées. Cela fonctionne bien, mais l'exigence est que, lorsque le marqueur de traction de l'utilisateur, après que le marqueur de traction doit se trouver au centre de la fenêtre de la carte ou si l'utilisateur glisse la carte, alors, pour ce cas, le marqueur vient également au centre de la fenêtre de la carte.

J'ai le code suivant qui ne fonctionne que pour le marqueur de traçage sur la carte, mais je ne sais pas où ajouter la fonction ou le code qui déplacent le marqueur au centre de la fenêtre de la carte après la traînée.

Ce code est écrit ci-dessous: 

google.maps.event.addListener(myMarker, 'dragend', function (evt) { document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '</p>'; var point = marker.getPosition(); map.panTo(point); }); google.maps.event.addListener(myMarker, 'dragstart', function (evt) { //------------- //------------ });

Http://jsfiddle.net/ANJYR/6xq6pujk/

C'est (je pense) une solution plus facile … Ou je n'ai pas vraiment compris ce que vous voulez atteindre. 

 //Dragable Marker In Google Map.... var center = new google.maps.LatLng(-33.013803, -71.551498); var map = new google.maps.Map(document.getElementById('mapBox'), { zoom: 18, center: center, mapTypeId: google.maps.MapTypeId.HYBRID }); var myMarker = new google.maps.Marker({ position: center, draggable: true, map: map }); google.maps.event.addListener(myMarker, 'dragend', function () { map.setCenter(this.getPosition()); // Set map center to marker position updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display }); google.maps.event.addListener(map, 'dragend', function () { myMarker.setPosition(this.getCenter()); // set marker position to map center updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display }); function updatePosition(lat, lng) { document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>'; }

JSFiddle demo

Ajoutez simplement ce code: 

 var point = myMarker.getPosition(); //instead of marker.getPosition(); map.setCenter(point); //set the center of the map based on myMarker

Mise à jour: marqueur centré sur la carte après avoir traîné

À propos de l'événement idle : cet événement est déclenché lorsque la carte devient inactif après la panoramique ou le zoom. 

 //Add listener on idle event google.maps.event.addListener(map,'idle',function(){ if(!this.get('dragging') && this.get('oldCenter') && this.get('oldCenter')!==this.getCenter()) { //Here i set the marker position with map.getCenter data myMarker.setPosition(this.getCenter()); } if(!this.get('dragging')){ this.set('oldCenter',this.getCenter()) } }); //Add listener on dragstart, set map dragging to true google.maps.event.addListener(map,'dragstart',function(){ this.set('dragging',true); }); //Add listener on dragend, set map dragging to false //And trigger the idle listener google.maps.event.addListener(map,'dragend',function(){ this.set('dragging',false); google.maps.event.trigger(this,'idle',{}); });

Working fiddle: http://jsfiddle.net/robertrozas/5xd1Lbpc/

Cela fonctionne pour moi: https://jsfiddle.net/6xq6pujk/5/ 

 //Dragable Marker In Google Map.... var map = new google.maps.Map(document.getElementById('mapBox'), { zoom: 4, center: new google.maps.LatLng(28.6139, 77.2090), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(28.6139, 77.2090), draggable: true }); google.maps.event.addListener(myMarker, 'dragend', function (evt) { document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + + '</p>'; var x = evt.latLng.lat(); var y = evt.latLng.lng(); var newLatLng = new google.maps.LatLng(x, y); myMarker.setPosition(newLatLng); // using global variable: map.panTo(newLatLng); }); google.maps.event.addListener(myMarker, 'dragend', function (evt) { //------------- //------------ }); map.setCenter(myMarker.position); myMarker.setMap(map); 
  for(f=0; f<Data.length; f++) { /*var p = Data[f]; var latlng = new google.maps.LatLng(p[0], p[1]); bounds.extend(latlng);*/ var marker = new google.maps.Marker({ position: new google.maps.LatLng(Data[f][0], Data[f][1]), map: map, draggable:<?php echo $dragger; ?>, icon: iconBase }); google.maps.event.addListener(marker, 'dragend', (function(marker, f) { return function() { if(confirm("Are you sure you want to change lat/lng?")){ var park_id = ID[f]; var lat = this.getPosition().lat(); var lng = this.getPosition().lng(); $.ajax({ type: "POST", url: "<?php echo base_url() ?>Admin/updateParkid", data: {park_id: park_id, latitude: lat, longitude: lng}, dataType: '', success: function(result){ alert(result); //marker.setIcon(iconBase); } }); } } })(marker, f));