有没有办法动态缩小谷歌地图折线的长度？

时间：2018-03-29 05:27:41

标签： google-maps google-polyline

从https://codepen.io/anon/pen/WzdOqz

查看此示例

有没有办法可以控制红线（路径）的最大长度？
例如，我只希望每次显示红线的20个点（意味着当标记移动时，红线从头开始收缩）

＆＃13;
＆＃13; 
var map;

function initialize() {
  var markLAT = coords[50].lat;
  var markLNG = coords[50].lng;

  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(markLAT, markLNG),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  autoRefresh();
}

google.maps.event.addDomListener(window, 'load', initialize);

var icon = new google.maps.MarkerImage("https://maps.google.com/mapfiles/ms/micons/blue.png");

function moveMarker(map, marker, lat, lon) {
  marker.setPosition(new google.maps.LatLng(lat, lon));
}

function autoRefresh() {
  var i, route, marker;

  route = new google.maps.Polyline({
    path: [],
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: false,
    map: map
  });

  marker = new google.maps.Marker({
    map: map,
    icon: icon
  });

  for (i = 0; i < coords.length; i++) {
    setTimeout(function(coords) {
      route.getPath().push(new google.maps.LatLng(coords.lat, coords.lng));
      moveMarker(map, marker, coords.lat, coords.lng);
    }, 20 * i, coords[i]);
  }
}

var coords = [{
    "lat": 8.893260000000001,
    "lng": 76.61427
  },
  {
    "lat": 8.894430000000002,
    "lng": 76.61418
  },
  {
    "lat": 8.89484,
    "lng": 76.61416000000001
  },
  {
    "lat": 8.894860000000001,
    "lng": 76.61383000000001
  },
  {
    "lat": 8.89488,
    "lng": 76.61375000000001
  },
  {
    "lat": 8.89563,
    "lng": 76.61370000000001
  },
  {
    "lat": 8.896270000000001,
    "lng": 76.61366000000001
  },
  {
    "lat": 8.896700000000001,
    "lng": 76.61364
  },
  {
    "lat": 8.89671,
    "lng": 76.61351
  },
  {
    "lat": 8.896740000000001,
    "lng": 76.61312000000001
  },
  {
    "lat": 8.89675,
    "lng": 76.61307000000001
  },
  {
    "lat": 8.89677,
    "lng": 76.61305
  },
  {
    "lat": 8.89729,
    "lng": 76.61303000000001
  },
  {
    "lat": 8.89755,
    "lng": 76.61311
  },
  {
    "lat": 8.898050000000001,
    "lng": 76.61311
  },
  {
    "lat": 8.898280000000002,
    "lng": 76.61321000000001
  },
  {
    "lat": 8.899180000000001,
    "lng": 76.61289000000001
  },
  {
    "lat": 8.900350000000001,
    "lng": 76.61396
  },
  {
    "lat": 8.900860000000002,
    "lng": 76.61467
  },
  {
    "lat": 8.90127,
    "lng": 76.61581000000001
  },
  {
    "lat": 8.901710000000001,
    "lng": 76.61796000000001
  },
  {
    "lat": 8.902190000000001,
    "lng": 76.61932
  },
  {
    "lat": 8.902370000000001,
    "lng": 76.62017
  },
  {
    "lat": 8.902370000000001,
    "lng": 76.62088
  },
  {
    "lat": 8.902460000000001,
    "lng": 76.6212
  },
  {
    "lat": 8.90313,
    "lng": 76.62217000000001
  },
  {
    "lat": 8.903450000000001,
    "lng": 76.62240000000001
  },
  {
    "lat": 8.903970000000001,
    "lng": 76.62272
  },
  {
    "lat": 8.90409,
    "lng": 76.62280000000001
  },
  {
    "lat": 8.904,
    "lng": 76.62288000000001
  },
  {
    "lat": 8.90342,
    "lng": 76.6233
  },
  {
    "lat": 8.902560000000001,
    "lng": 76.62386000000001
  },
  {
    "lat": 8.90033,
    "lng": 76.62522000000001
  },
  {
    "lat": 8.89601,
    "lng": 76.62777000000001
  },
  {
    "lat": 8.88676,
    "lng": 76.63327000000001
  },
  {
    "lat": 8.884450000000001,
    "lng": 76.63461000000001
  },
  {
    "lat": 8.882610000000001,
    "lng": 76.63582000000001
  },
  {
    "lat": 8.88089,
    "lng": 76.63711
  },
  {
    "lat": 8.87918,
    "lng": 76.63862
  },
  {
    "lat": 8.87785,
    "lng": 76.63936000000001
  },
  {
    "lat": 8.875760000000001,
    "lng": 76.63996
  },
  {
    "lat": 8.87273,
    "lng": 76.64141000000001
  },
  {
    "lat": 8.87067,
    "lng": 76.64251
  },
  {
    "lat": 8.869280000000002,
    "lng": 76.64336
  },
  {
    "lat": 8.86805,
    "lng": 76.6447
  },
  {
    "lat": 8.86782,
    "lng": 76.6451
  },
  {
    "lat": 8.86677,
    "lng": 76.64822000000001
  },
  {
    "lat": 8.86645,
    "lng": 76.64933
  },
  {
    "lat": 8.866200000000001,
    "lng": 76.65092
  },
  {
    "lat": 8.86546,
    "lng": 76.6533
  },
  {
    "lat": 8.86508,
    "lng": 76.65451
  },
  {
    "lat": 8.86495,
    "lng": 76.65667
  },
  {
    "lat": 8.864880000000001,
    "lng": 76.65962
  },
  {
    "lat": 8.86519,
    "lng": 76.66080000000001
  },
  {
    "lat": 8.866240000000001,
    "lng": 76.66343
  },
  {
    "lat": 8.86646,
    "lng": 76.66454
  },
  {
    "lat": 8.866200000000001,
    "lng": 76.66933
  },
  {
    "lat": 8.86569,
    "lng": 76.67323
  },
  {
    "lat": 8.86522,
    "lng": 76.67823
  },
  {
    "lat": 8.863840000000001,
    "lng": 76.68872
  },
  {
    "lat": 8.86359,
    "lng": 76.6907
  },
  {
    "lat": 8.86364,
    "lng": 76.69282000000001
  },
  {
    "lat": 8.86317,
    "lng": 76.69574
  },
  {
    "lat": 8.863420000000001,
    "lng": 76.69850000000001
  },
  {
    "lat": 8.8634,
    "lng": 76.69958000000001
  },
  {
    "lat": 8.863050000000001,
    "lng": 76.70048000000001
  },
  {
    "lat": 8.862350000000001,
    "lng": 76.70149
  },
  {
    "lat": 8.862020000000001,
    "lng": 76.70239000000001
  },
  {
    "lat": 8.86176,
    "lng": 76.70448
  },
  {
    "lat": 8.86218,
    "lng": 76.70703
  },
  {
    "lat": 8.863180000000002,
    "lng": 76.70957
  },
  {
    "lat": 8.8636,
    "lng": 76.71115
  },
  {
    "lat": 8.86382,
    "lng": 76.71257
  },
  {
    "lat": 8.86383,
    "lng": 76.71368000000001
  },
  {
    "lat": 8.86354,
    "lng": 76.71509
  },
  {
    "lat": 8.863240000000001,
    "lng": 76.71595
  },
  {
    "lat": 8.86259,
    "lng": 76.71731000000001
  }
];
＆＃13; 
#map {
  width: 99, 9%;
  position: relative;
  height: 500px;
  border: 1px solid black;
  margin-top: 30px;
}
＆＃13; 
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="map"></div>
    </div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC-S80K6c6OmI9nUVxR3PjIxj-PKybFeY"></script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

从路径中删除超过标记位置之前指定点数的点。您的示例仅包含77个点。以下是将折线限制在标记后20个点的示例。

代码段 

var map;

function initialize() {
  var markLAT = coords[50].lat;
  var markLNG = coords[50].lng;

  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(markLAT, markLNG),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  autoRefresh();
}

google.maps.event.addDomListener(window, 'load', initialize);

var icon = new google.maps.MarkerImage("https://maps.google.com/mapfiles/ms/micons/blue.png");

function moveMarker(map, marker, lat, lon) {
  marker.setPosition(new google.maps.LatLng(lat, lon));
}

function autoRefresh() {
  var i, route, marker;

  route = new google.maps.Polyline({
    path: [],
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: false,
    map: map
  });

  marker = new google.maps.Marker({
    map: map,
    icon: icon
  });
  console.log("coords.length=" + coords.length);
  for (i = 0; i < coords.length; i++) {
    setTimeout(function(coords) {
      route.getPath().push(new google.maps.LatLng(coords.lat, coords.lng));
      if (route.getPath().getLength() > 20)
        for (var i = 0; i < route.getPath().getLength() - 20; i++) {
          route.getPath().removeAt(0);
        }
      moveMarker(map, marker, coords.lat, coords.lng);
    }, 200 * i, coords[i]);
  }
}

var coords = [{
    "lat": 8.893260000000001,
    "lng": 76.61427
  },
  {
    "lat": 8.894430000000002,
    "lng": 76.61418
  },
  {
    "lat": 8.89484,
    "lng": 76.61416000000001
  },
  {
    "lat": 8.894860000000001,
    "lng": 76.61383000000001
  },
  {
    "lat": 8.89488,
    "lng": 76.61375000000001
  },
  {
    "lat": 8.89563,
    "lng": 76.61370000000001
  },
  {
    "lat": 8.896270000000001,
    "lng": 76.61366000000001
  },
  {
    "lat": 8.896700000000001,
    "lng": 76.61364
  },
  {
    "lat": 8.89671,
    "lng": 76.61351
  },
  {
    "lat": 8.896740000000001,
    "lng": 76.61312000000001
  },
  {
    "lat": 8.89675,
    "lng": 76.61307000000001
  },
  {
    "lat": 8.89677,
    "lng": 76.61305
  },
  {
    "lat": 8.89729,
    "lng": 76.61303000000001
  },
  {
    "lat": 8.89755,
    "lng": 76.61311
  },
  {
    "lat": 8.898050000000001,
    "lng": 76.61311
  },
  {
    "lat": 8.898280000000002,
    "lng": 76.61321000000001
  },
  {
    "lat": 8.899180000000001,
    "lng": 76.61289000000001
  },
  {
    "lat": 8.900350000000001,
    "lng": 76.61396
  },
  {
    "lat": 8.900860000000002,
    "lng": 76.61467
  },
  {
    "lat": 8.90127,
    "lng": 76.61581000000001
  },
  {
    "lat": 8.901710000000001,
    "lng": 76.61796000000001
  },
  {
    "lat": 8.902190000000001,
    "lng": 76.61932
  },
  {
    "lat": 8.902370000000001,
    "lng": 76.62017
  },
  {
    "lat": 8.902370000000001,
    "lng": 76.62088
  },
  {
    "lat": 8.902460000000001,
    "lng": 76.6212
  },
  {
    "lat": 8.90313,
    "lng": 76.62217000000001
  },
  {
    "lat": 8.903450000000001,
    "lng": 76.62240000000001
  },
  {
    "lat": 8.903970000000001,
    "lng": 76.62272
  },
  {
    "lat": 8.90409,
    "lng": 76.62280000000001
  },
  {
    "lat": 8.904,
    "lng": 76.62288000000001
  },
  {
    "lat": 8.90342,
    "lng": 76.6233
  },
  {
    "lat": 8.902560000000001,
    "lng": 76.62386000000001
  },
  {
    "lat": 8.90033,
    "lng": 76.62522000000001
  },
  {
    "lat": 8.89601,
    "lng": 76.62777000000001
  },
  {
    "lat": 8.88676,
    "lng": 76.63327000000001
  },
  {
    "lat": 8.884450000000001,
    "lng": 76.63461000000001
  },
  {
    "lat": 8.882610000000001,
    "lng": 76.63582000000001
  },
  {
    "lat": 8.88089,
    "lng": 76.63711
  },
  {
    "lat": 8.87918,
    "lng": 76.63862
  },
  {
    "lat": 8.87785,
    "lng": 76.63936000000001
  },
  {
    "lat": 8.875760000000001,
    "lng": 76.63996
  },
  {
    "lat": 8.87273,
    "lng": 76.64141000000001
  },
  {
    "lat": 8.87067,
    "lng": 76.64251
  },
  {
    "lat": 8.869280000000002,
    "lng": 76.64336
  },
  {
    "lat": 8.86805,
    "lng": 76.6447
  },
  {
    "lat": 8.86782,
    "lng": 76.6451
  },
  {
    "lat": 8.86677,
    "lng": 76.64822000000001
  },
  {
    "lat": 8.86645,
    "lng": 76.64933
  },
  {
    "lat": 8.866200000000001,
    "lng": 76.65092
  },
  {
    "lat": 8.86546,
    "lng": 76.6533
  },
  {
    "lat": 8.86508,
    "lng": 76.65451
  },
  {
    "lat": 8.86495,
    "lng": 76.65667
  },
  {
    "lat": 8.864880000000001,
    "lng": 76.65962
  },
  {
    "lat": 8.86519,
    "lng": 76.66080000000001
  },
  {
    "lat": 8.866240000000001,
    "lng": 76.66343
  },
  {
    "lat": 8.86646,
    "lng": 76.66454
  },
  {
    "lat": 8.866200000000001,
    "lng": 76.66933
  },
  {
    "lat": 8.86569,
    "lng": 76.67323
  },
  {
    "lat": 8.86522,
    "lng": 76.67823
  },
  {
    "lat": 8.863840000000001,
    "lng": 76.68872
  },
  {
    "lat": 8.86359,
    "lng": 76.6907
  },
  {
    "lat": 8.86364,
    "lng": 76.69282000000001
  },
  {
    "lat": 8.86317,
    "lng": 76.69574
  },
  {
    "lat": 8.863420000000001,
    "lng": 76.69850000000001
  },
  {
    "lat": 8.8634,
    "lng": 76.69958000000001
  },
  {
    "lat": 8.863050000000001,
    "lng": 76.70048000000001
  },
  {
    "lat": 8.862350000000001,
    "lng": 76.70149
  },
  {
    "lat": 8.862020000000001,
    "lng": 76.70239000000001
  },
  {
    "lat": 8.86176,
    "lng": 76.70448
  },
  {
    "lat": 8.86218,
    "lng": 76.70703
  },
  {
    "lat": 8.863180000000002,
    "lng": 76.70957
  },
  {
    "lat": 8.8636,
    "lng": 76.71115
  },
  {
    "lat": 8.86382,
    "lng": 76.71257
  },
  {
    "lat": 8.86383,
    "lng": 76.71368000000001
  },
  {
    "lat": 8.86354,
    "lng": 76.71509
  },
  {
    "lat": 8.863240000000001,
    "lng": 76.71595
  },
  {
    "lat": 8.86259,
    "lng": 76.71731000000001
  }
];
#map {
  width: 99, 9%;
  position: relative;
  height: 500px;
  border: 1px solid black;
  margin-top: 30px;
}
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="map"></div>
    </div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC-S80K6c6OmI9nUVxR3PjIxj-PKybFeY"></script>

相关问题
最新问题