谷歌地图V3如何将中心设置为特定标记？

Question

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

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

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

- salocin

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

希望这可以帮到你。

- 6twenty

---

谢谢，请不要让我来做这件事，因为我对谷歌地图不是很自信。我该如何定位到特定的标记？ - salocin

在你的while...end循环中的“Addmarker”函数中，你应该使用Google Maps API构建Marker对象。你可能需要将每个标记（或仅希望使用的标记）分配给一个数组，以便您可以访问它们。如果您需要更多帮助构建标记并将其添加到地图中，我建议您关闭此问题并创建一个更具体的问题以获取所需的帮助。 - 6twenty

您可能还希望阅读这个教程，或浏览这些示例。 - 6twenty

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

- Eddie

---

谢谢，这对我很有帮助。还有另一个函数panBy，它可以帮助您按给定像素距离更改地图的中心点。 :) - Sumit Tawal

Answer 3

这样做就可以了！

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

你需要将你的地图设置为全局

- Alex

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

希望这能帮到您。

- papps

Answer 5

如果你想将地图居中到标记并且你有坐标，比如点击列表项应该居中到该坐标，那么以下代码可以起作用： 在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"
}

- Kailas

---

请问您能提供一个非Angular的解决方案吗？ - Bruno Mazza

Answer 6

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

- alpc