如何在javascript google map API中显示多个坐标之间的路径

How to display a path between multiple co-ordinates in javascript google map API

本文关键字：坐标 之间 路径 显示 javascript google API map      更新时间：2023-09-26

我想在来自数组和方向服务的多个坐标之间创建一条路径，我想渲染这些坐标之间的路径。如果您在此处查看坐标数组： 

var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319},  
"destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, 
"lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}];
我

正在尝试使用以下代码生成代码，但它只给了我最后一组起点和目的地之间的路径。

var directionsService = new google.maps.DirectionsService();
var indiaLatlng = {lat: 28.6139, lng : 77.2090};
map = new google.maps.Map(document.getElementById("map"), {
    center : indiaLatlng,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var rendererOptions = {
preserveViewport: true,         
suppressMarkers:true
};
var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319}, "destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, "lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}];
for(var r in requestResource) {
    var resource = requestResource[r];
    var mapRequest = {
        origin : resource["origin"],
        destination : resource["destination"],
        travelMode: google.maps.TravelMode.DRIVING
    }
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);
    directionsService.route(mapRequest, function(result, status) {
        console.log(result);
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    }); 
}

代码中只有一个google.maps.DirectionsRenderer对象。 每次设置方向时，它都会覆盖之前的显示。 为要显示的每条路线创建新的方向渲染器。

概念验证小提琴

代码片段： 

var map;
function initialize() {
  var directionsService = new google.maps.DirectionsService();
  var indiaLatlng = {
    lat: 28.6139,
    lng: 77.2090
  };
  map = new google.maps.Map(document.getElementById("map"), {
    center: indiaLatlng,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var rendererOptions = {
    preserveViewport: true,
    suppressMarkers: true
  };
  var requestResource = [{
    "origin": {
      "lat": 26.4499,
      "lng": 80.3319
    },
    "destination": {
      "lat": 28.6139,
      "lng": 77.2090
    }
  }, {
    "origin": {
      "lat": 28.6139,
      "lng": 77.2090
    },
    "destination": {
      "lat": 28.9845,
      "lng": 77.7064
    }
  }];
  var bounds = new google.maps.LatLngBounds();
  for (var r in requestResource) {
    var resource = requestResource[r];
    var mapRequest = {
      origin: resource["origin"],
      destination: resource["destination"],
      travelMode: google.maps.TravelMode.DRIVING
    }
    bounds.extend(new google.maps.LatLng(resource["origin"].lat, resource["origin"].lng));
    bounds.extend(new google.maps.LatLng(resource["destination"].lat, resource["destination"].lng));
    map.fitBounds(bounds);
    directionsService.route(mapRequest, function(result, status) {
      console.log(result);
      if (status == google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(result);
      } else alert("directions request failed, status:" + status)
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map"></div>

相关文章：