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?
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.
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
});
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
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.
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);
}
});
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"
}