如何在Google地圖中使用動態的緯度和經度值？

Question

我正在使用Google Maps API。 從這里開始，我有一個數組locations ，從中有了緯度和經度值。 基於這些值，我正在創建一條路線。 為locations變量指定了靜態的緯度和經度值。 我要提供動態的緯度和經度值，而不是靜態值。 我不知道如何使它變得動態。 誰能幫我/

 var res = { "loginType": "logout", "status": "success", "count": 1, "absentCount": 2, "startingLat": "12.9817121", "startingLng": "77.72649609999996", "companyLat": "12.9563031", "companyLng": "77.6949695", "data": [{ "empName": "Trisha", "pickupTime": "07:45 AM", "cabName": "Atios", "pickupLatitude": "13.0180851", "pickupLongitude": "77.76444330000004", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "13.01807777", "pickupLongitude": "77.764443308884", }, ], "travlledLocation": [{ "Travlinglatitude": "12.956664", "Travlinglongitude": "77.696829" }, { "Travlinglatitude": "12.956604", "Travlinglongitude": "77.696480" }, { "Travlinglatitude": "12.956523", "Travlinglongitude": "77.696021" }, { "Travlinglatitude": "12.956413", "Travlinglongitude": "77.695380" }, { "Travlinglatitude": "12.956335", "Travlinglongitude": "77.695029" }, { "Travlinglatitude": "12.956230", "Travlinglongitude": "77.694997" }, { "Travlinglatitude": "12.956107", "Travlinglongitude": "77.694994" }, { "Travlinglatitude": "12.955934", "Travlinglongitude": "77.694970" }, { "Travlinglatitude": "12.955639", "Travlinglongitude": "77.694932" }, { "Travlinglatitude": "12.955380", "Travlinglongitude": "77.694902" } ] } var geocoder; var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var locations = [ ['Start', 12.956664, 77.696829, 1], ['2', 12.956604, 77.696480, 2], ['3', 12.956523, 77.696021, 3], ['4', 12.956413, 77.695380, 4], ['5', 12.956335, 77.695029, 5], ['6', 12.956230, 77.694997, 6], ['7', 12.956107, 77.694994, 7], ['8', 12.955934, 77.694970, 8], ['9', 12.955639, 77.694932, 9], ['End', 12.955380, 77.694902, 10] ]; var waypoints = [{ "empName": "arun", "pickupTime": "9:10 AM", "lat": "12.956604", "lng": "77.696480", }, { "empName": "babu", "pickupTime": "9:40 AM", "lat": "12.956230", "lng": "77.694997", }, { "empName": "sharma", "pickupTime": "9:55 AM", "lat": "12.955639", "lng": "77.694932", } ]; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, //center: new google.maps.LatLng(-33.92, 151.25), // mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var infowindow = new google.maps.InfoWindow(); var marker, i; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { if (locations[i][3] == 1 || locations[i][3] == locations.length) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, i: locations[i][0] }); } google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent(marker.i); infowindow.open(map, marker); }; })(marker, infowindow)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); } //push the waypoints to request.waypoints array waypoints.forEach(function(v, i) { marker = new google.maps.Marker({ position: new google.maps.LatLng(v.lat, v.lng), map: map, icon: { url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png', scaledSize: new google.maps.Size(45, 45) }, data: v }); google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime); infowindow.open(map, marker); }; })(marker, infowindow)); }) directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } 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?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY"> </script> <div id="map"></div> 

我需要從res.travlledLocation創建動態的緯度和經度值，並將其更改為以下格式：

 var locations = [
  ['Start', 12.956664, 77.696829, 1],
  ['2', 12.956604, 77.696480, 2],
  ['3', 12.956523, 77.696021, 3],
  ['4', 12.956413, 77.695380, 4],
  ['5', 12.956335, 77.695029, 5],
  ['6', 12.956230, 77.694997, 6],
  ['7', 12.956107, 77.694994, 7],
  ['8', 12.955934, 77.694970, 8],
  ['9', 12.955639, 77.694932, 9],
  ['End', 12.955380, 77.694902, 10]
];

我的路標標記必須像這樣

我的航點

Answer 1

要從對象的travlledLocation數組中獲得所需的2D數組，可以使用map() ，如下所示：

var locations = res.travlledLocation.map(function(o, i) {
  return [
    i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
    o.Travlinglatitude,
    o.Travlinglongitude,
    i + 1
  ]
});

 var res = { "loginType": "logout", "status": "success", "count": 1, "absentCount": 2, "startingLat": "12.9817121", "startingLng": "77.72649609999996", "companyLat": "12.9563031", "companyLng": "77.6949695", "data": [{ "empName": "Trisha", "pickupTime": "07:45 AM", "cabName": "Atios", "pickupLatitude": "13.0180851", "pickupLongitude": "77.76444330000004", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "13.01807777", "pickupLongitude": "77.764443308884", }, ], "travlledLocation": [{ "Travlinglatitude": "12.956664", "Travlinglongitude": "77.696829" }, { "Travlinglatitude": "12.956604", "Travlinglongitude": "77.696480" }, { "Travlinglatitude": "12.956523", "Travlinglongitude": "77.696021" }, { "Travlinglatitude": "12.956413", "Travlinglongitude": "77.695380" }, { "Travlinglatitude": "12.956335", "Travlinglongitude": "77.695029" }, { "Travlinglatitude": "12.956230", "Travlinglongitude": "77.694997" }, { "Travlinglatitude": "12.956107", "Travlinglongitude": "77.694994" }, { "Travlinglatitude": "12.955934", "Travlinglongitude": "77.694970" }, { "Travlinglatitude": "12.955639", "Travlinglongitude": "77.694932" }, { "Travlinglatitude": "12.955380", "Travlinglongitude": "77.694902" } ] } var geocoder; var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var locations = res.travlledLocation.map(function(o, i) { return [ i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i, o.Travlinglatitude, o.Travlinglongitude, i + 1 ] }); var waypoints = res.data.map(function(o) { return { empName: o.empName, pickupTime: o.pickupTime, lat: o.pickupLatitude, lng: o.pickupLongitude } }); function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, //center: new google.maps.LatLng(-33.92, 151.25), // mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var infowindow = new google.maps.InfoWindow(); var marker, i; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { if (locations[i][3] == 1 || locations[i][3] == locations.length) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, i: locations[i][0] }); } google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent(marker.i); infowindow.open(map, marker); }; })(marker, infowindow)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); } //push the waypoints to request.waypoints array waypoints.forEach(function(v, i) { marker = new google.maps.Marker({ position: new google.maps.LatLng(v.lat, v.lng), map: map, icon: { url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png', scaledSize: new google.maps.Size(45, 45) }, data: v }); google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime); infowindow.open(map, marker); }; })(marker, infowindow)); }) directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } 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?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY"> </script> <div id="map"></div>