使折线水平显示在 google 地图上并将其缩放到中心坐标

Question

我正在使用 Google 地图 API JavaScript。我的用例是我需要在地图上绘制坐标（lat，lng）（创建标记）并通过折线连接它们。坐标彼此非常接近，所以当我尝试绘制它们时，它们会隐藏在第一个标记后面。所以我找出中心并尝试缩放，以便所有标记都在地图上可见。我使用 bounds 来找到中心，但我无法将其缩放到中心坐标。我使用 map.fitBounds(latlng); 它适合屏幕上的坐标。但是我想要实现的是使折线（连接所有坐标）始终水平并将其缩放到中心坐标。

enter code herevar bounds = new google.maps.LatLngBounds();

for (i = 0; i < temp.length; i++) {
   bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);

由于坐标总是不同的，折线会在任何方向，但我总是想在地图上水平显示。我得到了什么： enter image description here

我想达到的目标：

enter image description here

任何建议将不胜感激。提前致谢。

Answer 1

我通过使用以下方法实现了这样的目标：

使用computeHeading() function of Geometry library 获取从直线上第一个坐标到最后一个坐标的角度。确保将 &libraries=geometry 添加到您的 Maps JS 脚本标签。
一旦你得到航向，你可以使用map.setHeading() function改变你的视角，经过一些测试，我看到你可以通过减去90度来实现水平视角。

下面是 sample code 和代码片段：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.756795,
      lng: -73.954298
    },
    zoom: 16,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });


//array of your points
 const markerCoordinates = [
   { lat: 40.758481, lng: -73.958269 },
    { lat:40.754649, lng: -73.949563 },
   
  ];
    
    //creating marker from your points
  for (let i = 0; i < markerCoordinates.length; i++) {
    const marker = markerCoordinates[i];

    new google.maps.Marker({
      position:marker,
      map,
    });
  }
   
   //creating polyline from your points
  const createdPolyline = new google.maps.Polyline({
    path: markerCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  createdPolyline.setMap(map);
  
  //get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
    markerCoordinates[0],
    markerCoordinates[1]
  )
    
//once you get the heading subtract it by 90 to get a horizontal view
   map.setHeading(heading-90)
}

使折线水平显示在 google 地图上并将其缩放到中心坐标

Make polyline to show on google map horizontally and zoom it to center coordinate

google-maps

google-maps-api-3

google-maps-markers

google-polyline