在谷歌地图中绘制点之间的方向

Question

我们有这样的json

var myjson=[ { "Longitude": "17.4266008", "Lattitude": "78.5497557", "UserID": "2" }, { "Longitude": "17.4265974", "Lattitude": "78.5497276", "UserID": "2" }, { "Longitude": "17.4266509", "Lattitude": "78.5496451", "UserID": "2 " }, { "Longitude": "17.4266506", "Lattitude": "78.5497198", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, ];

我们需要像这样 所以我们尝试了这个

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    }
  });
}

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

我们知道只绘制两点之间的线但我们有json.In json有纬度和经度。我们需要在点之间画线。请指导我。并告诉我我的代码有什么问题。在按钮操作中调用calcRoute方法

Answer 1

不是从DOM中读取航点，而是从阵列中读取它们。像

这样的东西

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var waypts = [];

    var myjson = [{
        "Longitude": "17.4266008",
        "Lattitude": "78.5497557",
        "UserID": "2"
    }, {
        "Longitude": "17.4265974",
        "Lattitude": "78.5497276",
        "UserID": "2"
    }, {
        "Longitude": "17.4266509",
        "Lattitude": "78.5496451",
        "UserID": "2 "
    }, {
        "Longitude": "17.4266506",
        "Lattitude": "78.5497198",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }];


    for (var i = 0; i < myjson.length; i++) {
        waypts.push({
            location: new google.maps.LatLng(parseFloat(myjson[i].Lattitude), parseFloat(myjson[i].Longitude)),
            stopover: true
        });
    }