javascript - 如何在 Google map 中使用动态纬度和经度值？

Question

我正在使用 Google map 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]
];

my waypoint marker it has to come like this

My Waypoint

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>