从JSON中获取数据并使用JavaScript绘制方向。

Question

从JSON中获取数据并使用JavaScript绘制方向。

4

这是一个非常基础的问题，但请帮助我，因为我已经尝试了3天还没有任何答案。我尝试了很多解决方案，但结果都一样。

我有一个nArray函数，它会返回一个包含对象的bigArray JSON：

bigArray

  Array[5]
    0: Object
    1: Object
         DISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207
         lat: "48.866588"
         leftPosition: 183
         lng: "2.309037999999987"
         topPosition: 57
            __proto__: Object
    2: Object
    3: Object
    4: Object
    length: 5
    __proto__: Array[0]

这里有“n”个对象，所有对象都包含经度和纬度。我尝试使用基本的 Google 示例解决我的问题：http://jsfiddle.net/6Vz52/3/，但是我遇到了一个问题，如何将 Google 示例中的<option value更改为来自我的代码的 JSON（lat，lng）数据。我尝试了这段代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
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:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    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 request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

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

    </script>

但我不知道在地图上放置我的JSON（纬度，经度）数据以及如何绘制多条路径。

如何使用我的对象中的坐标在地图上显示路径？

更新：谷歌代码不必是这个（您可以将其他谷歌代码示例与我的JSON集成），我只需要一种基于我的JSON数组绘制方向的解决方案

- Mark West

5个回答

1

Directions Service规范说明：

origin（必填）指定计算方向的起始位置。此值可以作为字符串（例如“Chicago, IL”）或LatLng值指定。
destination（必填）指定计算方向的结束位置。此值可以作为字符串（例如“Chicago, IL”）或LatLng值指定。

因此，有效的请求起点或终点值可能类似于“邦迪海滩”或“-33.890542,151.274856”（示例）。

以下fiddle演示了与您的情况非常相似的情况。

这里给出的数据，

var latLngs = [{
    name: 'Bondi Beach',
    lat: -33.890542,
    lng: 151.274856
}, {
    name: 'Coogee Beach',
    lat: -33.923036,
    lng: 151.259052
}, {
    name: 'Cronulla Beach',
    lat: -34.028249,
    lng: 151.157507
}, {
    name: 'Manly Beach',
    lat: -33.80010128657071,
    lng: 151.28747820854187
}, {
    name: 'Maroubra Beach',
    lat: -33.950198,
    lng: 151.259302
}];

编辑

您可以使用方向服务中的路标来处理多个链接路线。

已更新fiddle

希望这能有所帮助。

- shakib

这不是答案，你只是复制了谷歌的示例，这里在哪里有多个距离路线？ - Mark West

也许我没有理解你的问题。你所说的“多距离路线”是什么意思？你想要绘制所有位置对之间可能的路线吗？ - shakib

是的，这很有帮助，但我只能使用8个航点，如果我有超过8个航点怎么办？还有其他解决方案吗？ - Mark West

我需要使用这个：https://developers.google.com/maps/documentation/javascript/distancematrix#usage_limits_and_requirements 但是如何将其与我的数组集成？ - Mark West

1

here is short example: 

      function calculateDistances() {
      var service = new google.maps.DistanceMatrixService();
      for (var a=0; a<=length.array; a++){
      service.getDistanceMatrix(
        {
          origins: [arr[1][1], arr[1][2]],
          destinations: [arr[1][3], arr[1][4]],
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false
        }, callback);
       }
}

完整教程为：https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

- Anup

0

这是我用“shakib”提供的数据创建的fiddle
fiddle链接。
希望它能解决你的需求。
虽然如果你需要在途经点上显示标记，可以通过以下方式实现：

        function addDirection(){

            if(i < yourLatLongs.length -1){
              var start = yourLatLongs[i].lat+","+yourLatLongs[i].lng;
              var end = yourLatLongs[i+1].lat+","+yourLatLongs[i+1].lng;

             var myLatlng = new google.maps.LatLng(yourLatLongs[i].lat,yourLatLongs[i].lng);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Hello World!'
            }); 

              calcRoute(start,end);
              console.log(i);
              i++;
            }
        }

- Milan V.

0

希望对你有所帮助。

https://developers.google.com/maps/documentation/javascript/directions#TravelModes

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

你只需要起点和终点，不需要用所有的点来画图。如果你想要，你需要将路径分成许多片段，例如从第一个点到第二个点，然后将其与下一个点连接起来，直到最后一个点连接为止...所以我认为这是谷歌的功能，你只需要在两个点之间先画出来。

另一种方法是折线，但它不适用于驾车路线，更适合飞行路线...希望你能理解。祝好运！

- Anup

我需要使用这个：https://developers.google.com/maps/documentation/javascript/distancematrix#usage_limits_and_requirements 但是如何与我的数组整合呢？ - Mark West

通过for循环的帮助，只需将所有的纬度和经度值存储在一个数组中，然后使用for循环运行此函数calculateDistances()。在该函数内部使用for循环。以下是完整示例：https://developers.google.com/maps/documentation/javascript/examples/distance-matrix - Anup

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- f605dcf7dc5542e93ae9cd76f · Accepted Answer

你可以在起始值中用逗号分隔纬度和经度。谷歌接受这种方式以及在其中放置任何搜索内容。

所以你会得到像这样的东西：

var start = lat + ',' + lng;

如果您需要在运行时更改选项值，则可以执行以下操作：

document.getElementById('start').value = lat + ',' + lng;