Question

这是一个非常基本的问题，但请帮助因为我尝试解决这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”个对象。所有对象都包含lat和lng。

我尝试用基本的google示例来解决我的问题：http://jsfiddle.net/6Vz52/3/ 但在这里我有一个问题，如何使用我的代码中的JSON（lat，lng）数据更改谷歌示例中的<option value。

我试试这段代码：

<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（lat，lng）数据并在地图上绘制多个方向。

如何使用对象中的坐标在地图中显示方向？

更新：谷歌代码不一定是必须的（你可以放一些其他谷歌代码示例并与我的json集成），我只需要一个基于我的JSON数组绘制方向的解决方案 < / p>

Answer 1

您可以将纬度和经度放在以逗号分隔的起始值中。谷歌接受这一点以及在那里进行任何搜索。

所以你有类似的东西：

var start = lat + ',' + lng;

如果您需要动态更改选项值，可以执行以下操作：

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

Answer 2

Directions Service规范说

origin（必需）指定起始位置计算方向。该值可以指定为String （例如“Chicago，IL”）或LatLng值。
destination（必填）指定要向的结束位置计算方向。该值可以指定为String （例如“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

希望这会有所帮助。

Answer 3

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

Answer 4

希望它对你有所帮助

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

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

你只需要开始和结束点，不需要用所有点绘制。然后你想要你需要在很多方面附加路径，比如从第一点到第二点，并将它与其他下一个连接起来，直到最后一点连接...所以我认为这是你在两点之间绘制的谷歌设施第一个也是最后一个。

另一种方式是折线，但它不适合行驶路线，对飞行路线更好......希望你理解。 gud luck

Answer 5

这是我用“shakib”给出的数据创建的小提琴 fiddle link 。
它可以解决你的需求虽然如果你需要在航路点上显示标记，你可以通过，

来完成

        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++;
            }
        }

从json获取数据时，Javascript绘制方向

5 个答案: