Google map V3 Установить центр на определенный маркер

Question

Я использую Google Map V3 для отображения списка маркеров, извлеченных из БД, используя MYsql и PHP.Мои маркеры устанавливаются на карте с использованием полного адреса (из БД, включая почтовый индекс), так как у меня нет длинных, латинских данных Все работает нормально, мой цикл выглядит следующим образомхотел бы установить карту для конкретного маркера, содержащегося в цикле, который будет соответствовать ранее введенному почтовому индексу.Как установить карту по центру этого маркера и открыть информационное окно?

Answer 1

Если у вас есть маркеры на карте, вы можете получить координаты широты и долготы через API и использовать это для установки центра карты. Сначала вам просто нужно определить, на каком маркере вы хотите сосредоточиться - я оставлю это на ваше усмотрение.

// "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

Информационные окна - это отдельные объекты, которые обычно связаны с маркером, поэтому для открытия информационного окна вы можете сделать что-то вроде этого (однако это будет зависеть от вашего кода):

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

Надеюсь, это поможет.

Answer 2

Чтобы опираться на ответ @ 6twenty ... Я предпочитаю panTo (LatLng), а не setCenter (LatLng), поскольку panTo анимирует для более плавного перехода к центру "если изменение меньше ширины и высоты карты".https://developers.google.com/maps/documentation/javascript/reference#Map

Ниже используется 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
});

Answer 3

Это должно сработать!

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

Вам нужно иметь глобальные карты

Answer 4

может быть, это поможет:

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

вся информация о маркерах находится в массиве markersArray и является глобальной.Таким образом, вы можете получить к нему доступ из любого места, используя window.variablename.Каждый маркер имеет уникальный идентификатор, и вы можете поместить этот идентификатор в ключ массива.поэтому вы создаете маркер так:

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

Надеюсь, это поможет.

Answer 5

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

Answer 6

Если вы хотите центрировать карту на маркере, и у вас есть кординат, что-то вроде щелчка по элементу списка, и карта должна центрироваться по этой координате, тогда будет работать следующий код:

В 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>

В контроллере:

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

Местоположение объекта:

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