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

【问题标题】：Google map V3 Set Center to specific Marker谷歌地图 V3 设置中心到特定标记
【发布时间】：2011-09-03 06:31:34
【问题描述】：

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

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

现在我想将地图设置为循环中包含的特定标记，该标记将与之前输入的邮政编码匹配。如何将地图设置为以该标记为中心并打开信息窗口？

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案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

希望这会有所帮助。

【讨论】：

谢谢，请不要把它留给我，因为我对谷歌地图没有那么自信。如何定位特定标记？
在 while...end 循环中的“Addmarker”函数中，您应该使用 Google Maps API 构建 Marker 对象。您可能需要将每个标记（或只是您希望使用的标记）分配给一个数组，以便您可以访问它们。如果您需要更多帮助来构建标记并将它们添加到地图中，我建议您关闭此问题并创建一个新问题，以更具体地满足您所需的帮助。
您可能还希望阅读此tutorial 或浏览这些examples

【解决方案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
});

【讨论】：

谢谢，这对我有用。还有另一个函数panBy，这将帮助您将地图的中心更改为给定距离（以像素为单位）。 :)

【解决方案3】：

这应该可以解决问题！

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

你需要让你的地图全局化

【讨论】：

【解决方案4】：

这可能会有所帮助：

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

希望这会有所帮助。

【讨论】：

【解决方案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);
    }
  });

【讨论】：

【解决方案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"
}

【讨论】：

能否提供一个非 Angular 解决方案？