web-dev-qa-db-fra.com

Google map V3 Définir le centre sur un marqueur spécifique

J'utilise Google Map V3 pour afficher une liste de marqueurs extraits d'une base de données, à l'aide de MYsql et de PHP . Long, Lat info Tout fonctionne bien, ma boucle ressemble à ceci

while...
Addmarker(map,'MY ADdress','Title');
end while;

Maintenant, je voudrais définir la carte sur un marqueur spécifique contenu dans la boucle qui correspondra à un code postal entré précédemment .. .. Comment puis-je définir la carte au centre de ce marqueur et ouvrir l’infowindow?

google-mapsgoogle-maps-api-3
41
salocin

Une fois que vous avez des marqueurs sur la carte, vous pouvez récupérer les coordonnées Lat/Long via l'API et l'utiliser pour définir le centre de la carte. Vous devrez d’abord déterminer le marqueur sur lequel vous souhaitez vous centrer - je vous laisse le soin de le faire.

// "marker" refers to the Marker object you wish to center on

var latLng = marker.getPosition(); // returns LatLng object
map.setCenter(latLng); // setCenter takes a LatLng object

Les fenêtres d'informations sont des objets distincts qui sont généralement liés à un marqueur. Pour ouvrir la fenêtre d'informations, procédez comme suit (cela dépend toutefois de votre code):

var infoWindow = marker.infoWindow; // retrieve the InfoWindow object
infoWindow.open(map); // Trigger the "open()" method

J'espère que cela t'aides.

58
6twenty

Pour donner suite à la réponse de @ 6twenty ... je préfère panTo (LatLng) à setCenter (LatLng), car panTo s'anime pour une transition plus fluide au centre "si le changement est inférieur à la fois à la largeur et à la hauteur de la carte" . https://developers.google.com/maps/documentation/javascript/reference#Map

Le texte ci-dessous utilise Google Maps API v3.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    title: markerTitle,
    map: map,
});
google.maps.event.addListener(marker, 'click', function () {
    map.panTo(marker.getPosition());
    //map.setCenter(marker.getPosition()); // sets center without animation
});
37
Eddie

Cela devrait faire l'affaire!

google.maps.event.trigger(map, "resize");
map.panTo(marker.getPosition());
map.setZoom(14);

Vous aurez besoin d'avoir vos cartes globales

15
Alex

peut-être que cela aidera:

map.setCenter(window.markersArray[2].getPosition());

toutes les informations sur les marqueurs sont dans le tableau markersArray et il est global. Vous pouvez donc y accéder de n'importe où en utilisant window.variablename. Chaque marqueur a un identifiant unique et vous pouvez le mettre dans la clé du tableau. donc vous créez un marqueur comme ceci:

window.markersArray[2] = new google.maps.Marker({
            position: new google.maps.LatLng(23.81927, 90.362349),          
            map: map,
            title: 'your info '  
        });

J'espère que cela aidera.

2
papps
geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
0
alpc

Si vous souhaitez centrer la carte sur un marqueur et que vous avez l'ordre, cliquez sur un élément de la liste et la carte doit se centrer sur cette coordonnée, le code suivant fonctionnera alors:

En HTML: 

<ul class="locationList" ng-repeat="LocationDetail in coordinateArray| orderBy:'LocationName'">
   <li>
      <div ng-click="focusMarker(LocationDetail)">
          <strong><div ng-bind="locationDetail.LocationName"></div></strong>
          <div ng-bind="locationDetail.AddressLine"></div>
          <div ng-bind="locationDetail.State"></div>
          <div ng-bind="locationDetail.City"></div>
      <div>
   </li>
</ul>

Dans le contrôleur: 

$scope.focusMarker = function (coords) {
    map.setCenter(new google.maps.LatLng(coords.Latitude, coords.Longitude));
    map.setZoom(14);
}

Objet de localisation: 

{
    "Name": "Taj Mahal",
    "AddressLine": "Tajganj",
    "City": "Agra",
    "State": "Uttar Pradesh",
    "PhoneNumber": "1234 12344",
    "Latitude": "27.173891",
    "Longitude": "78.042068"
}
0
Kailas