代码之家  ›  专栏  ›  技术社区  ›  Smudger

谷歌地图没有显示地图上的所有目的地标记,只有第一个和最后一个

  •  0
  • Smudger  · 技术社区  · 8 年前

    我有一张谷歌地图,可以正确显示我的路线和所有标记。 https://jsfiddle.net/az5tk8ns/17/

    目的地硬编码为: destinations = ["", "durban,KZN", " ixpop,kzn"]

    然后,我有另一个函数,它生成我的地址数组:

    var addresses = [];
    addresses.push('Durban, KZN');
    addresses.push('izopo, KZN');`
    

    然后我设置:

    destinations = addresses
    

    https://jsfiddle.net/az5tk8ns/19/

    进行此操作时,地图仅显示起点和终点标记,而不是我在中间的终点?

    如何使用此方法,以便将动态生成的地址数组传递给谷歌地图,并让它显示旅程中的每个点?

    完整的谷歌地图语法:

    $(document).ready(function() {
    
    
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var distancearray=[];
    var addresses = [];
    addresses.push('Durban, KZN');
    addresses.push('izopo, KZN');
    
    warehouse='ladysmith, kwa zulu natal';
    
    
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(-28.5710903, 26.0826083);
      var mapOptions = {
        zoom: 7,
        center: chicago
      };
      map = new google.maps.Map(document.getElementById('route_map_canvas'), mapOptions);
      directionsDisplay.setMap(map);
      calcRoute();
    }
    var origin = "johannesburg",
      destinations = addresses
    
    service = new google.maps.DistanceMatrixService();
    
    function calcRoute() {
      var waypts = [];
      for (var i = 1; i < destinations.length - 1; i++) {
        waypts.push({
          location: destinations[i],
          stopover: true
        });
      }
      var request = {
        origin: origin,
        destination: destinations[destinations.length - 1],
        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 orig = document.getElementById("orig"),
            dest = document.getElementById("dest"),
            dist = document.getElementById("dist");
    
          orig.value = response.routes[0].legs[0].start_address;
          dest.value = response.routes[0].legs[0].end_address;
          var total_distance = 0.0;
          for (var i = 0; i < response.routes[0].legs.length; i++) {
            total_distance += response.routes[0].legs[i].distance.value;
            distancearray.push([response.routes[0].legs[i].distance.value]);
            //alert(distancearray);
          }
          dist.value = total_distance + " meters";
        }
      });
    
    }
      initialize();
    
    })
    

    一如既往地感谢,

    1 回复  |  直到 7 年前
        1
  •  1
  •   ihimv    8 年前

    你做的一切都是正确的,除了 destinations 变量,用作开始和结束。航路点为零 directionsRequest 中的对象 calcRoute() 作用 这就是为什么你没有得到任何中间航路点,因此没有标记。

    看看这个 updated Fiddle 我又把一个位置推到了 addresses 变量(行号11),并在地图上正确显示。

    你总能做到 console.log(request); 查看您要传递给google的请求对象。