绘制路线并根据angular中绘制的路径自动缩放in/outGoogle地图 6

Question

我已经用纬度和经度绘制了地图，并绘制了它们与地图 returns 之间的路径，如下所示：

但预期结果如下：

以下是绘制路线的代码

 for (var i = 0; i < mapData.length; i++) {
          var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
          myTrip.push(latLng);
          // Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
          if (i === 0) {
            latLngPath.push(latLng);
          }
          if (i > 0) { // Push the datapoint and draw the flightpath.
            latLngPath.push(latLng);

            var flightPath = new google.maps.Polyline({
              path: latLngPath,
              strokeColor: "#F1575A",
              strokeOpacity: 1,
              strokeWeight: 4,
              zIndex: 300,
              icons: [{
                icon: {
                  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                  strokeColor: "",
                  fillOpacity: 1,
                  scale: 3,
                  //offset: '100%'
                },
                repeat: '100px'
              }]
            });
            flightPath.setMap(this.map);
            // get the new datapoint 
            var lastLatLng = latLngPath.slice(-1)[0];
            latLngPath = [];
            latLngPath.push(lastLatLng);

          }
        }

Answer 1

计算折线的边界。使用该边界调用 map.fitBounds(bounds);。

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
  var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
  bounds.extend(latLng);
  myTrip.push(latLng);
  // Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
  if (i === 0) {
    latLngPath.push(latLng);
  }
  if (i > 0) { // Push the datapoint and draw the flightpath.
    latLngPath.push(latLng);

    var flightPath = new google.maps.Polyline({
      path: latLngPath,
      strokeColor: "#F1575A",
      strokeOpacity: 1,
      strokeWeight: 4,
      zIndex: 300,
      icons: [{
        icon: {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          strokeColor: "",
          fillOpacity: 1,
          scale: 3,
        },
        repeat: '100px'
      }]
    });
    flightPath.setMap(this.map);
    // get the new datapoint 
    var lastLatLng = latLngPath.slice(-1)[0];
    latLngPath = [];
    latLngPath.push(lastLatLng);

  }
}
map.fitBounds(bounds);

proof of concept fiddle

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });
  var mapData = [
    {lat: 36.7377981,lng: -119.78712469999999},
    {lat: 36.1626638,lng: -86.78160159999999},
    {lat: 32.7766642,lng: -96.79698789999998}
  ];
  var myTrip = [];
  var latLngPath = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < mapData.length; i++) {
    var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
    bounds.extend(latLng);
    myTrip.push(latLng);
    // Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
    if (i === 0) {
      latLngPath.push(latLng);
    }
    if (i > 0) { // Push the datapoint and draw the flightpath.
      latLngPath.push(latLng);

      var flightPath = new google.maps.Polyline({
        path: latLngPath,
        strokeColor: "#F1575A",
        strokeOpacity: 1,
        strokeWeight: 4,
        zIndex: 300,
        icons: [{
          icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            strokeColor: "",
            fillOpacity: 1,
            scale: 3,
            //offset: '100%'
          },
          repeat: '100px'
        }]
      });
      flightPath.setMap(map);
      // get the new datapoint 
      var lastLatLng = latLngPath.slice(-1)[0];
      latLngPath = [];
      latLngPath.push(lastLatLng);

    }
  }
  map.fitBounds(bounds);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

绘制路线并根据angular中绘制的路径自动缩放in/outGoogle地图 6

draw route and automatically Zoom in/out Google map based on the path drawn in angular 6

google-maps

angular6