谷歌地图V3设置中心到特定的标记

时间:2011-05-27 09:37:10

标签: google-maps google-maps-api-3

我正在使用Google Map V3显示从数据库中提取的标记列表,使用MYsql和PHP。 我的标记使用完整地址(来自数据库,包括邮政编码)在地图上设置,因为我没有Long,Lat信息 一切正常,MY循环看起来如下

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

现在我想将地图设置为循环中包含的特定标记,该标记将与先前输入的邮政编码相匹配。 如何将地图设置为居中此标记并打开信息窗?

6 个答案:

答案 0 :(得分:58)

在地图上有标记后,您可以通过API检索Lat / Long坐标,并使用它来设置地图的中心。您首先需要确定您希望以哪个标记为中心 - 我会将其留给您。

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

希望这有帮助。

答案 1 :(得分:38)

建立@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
});

答案 2 :(得分:15)

这应该可以解决问题!

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

您需要将地图设为全球

答案 3 :(得分:2)

可能会有所帮助:

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

所有标记信息都在markersArray数组中,它是全局的。所以你可以使用window.variablename从任何地方访问它。每个标记都有一个唯一的ID,您可以将该ID放在数组的键中。所以你创建这样的标记:

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

希望这会有所帮助。

答案 4 :(得分:1)

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

答案 5 :(得分:0)

如果您想将地图居中放置在一个标记上并且拥有坐标,则类似单击列表项,并且地图应以该坐标为中心,那么以下代码将起作用:

在HTML中:

adjascentRoomId

在控制器中:

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