【问题标题】:google maps not showing all destination markers on map, only first and last谷歌地图未在地图上显示所有目的地标记,仅显示第一个和最后一个
【发布时间】:2016-07-09 00:43:27
【问题描述】:

我有一个谷歌地图,可以用所有标记正确显示我的路线。 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();

})

一如既往的感谢,

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 google-maps-markers


    【解决方案1】:

    除了destinations 变量中只有两个目的地用作开始和结束之外,您所做的一切都是正确的。 calcRoute() 函数中的 directionsRequest 对象中有零个航点。 这就是您没有获得任何中间航点并因此没有标记的原因。

    查看这个updated Fiddle,我在其中将一个位置推到addresses 变量(第11 行),它在地图上正确显示。

    您可以随时使用console.log(request); 来查看您传递给 google 的请求对象。

    【讨论】:

    • 谢谢,所以它实际上将第一个目的地作为起点,感谢帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-11-07
    • 2017-11-04
    • 2021-07-07
    • 2015-01-25
    • 2014-10-06
    • 2014-05-17
    相关资源
    最近更新 更多