谷歌地图没有显示地图上的所有目的地标记,只有第一个和最后一个
google maps not showing all destination markers on map, only first and last
我有一个谷歌地图,可以用所有标记正确显示我的路线。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();
})
一如既往地感谢
除了destinations
变量中只有两个用作开始和结束的目的地之外,您已经完成了所有正确的操作。calcRoute()
函数中的directionsRequest
对象中没有路点。这就是你没有得到任何中间路线点,因此没有标记的原因。
请参阅这个更新的Fiddle,我在其中向addresses
变量(行号11)又推了一个位置,它在地图上正确显示。
您总是可以执行console.log(request);
来查看您要传递给google的请求对象。
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- RxJS油门行为;立即获取第一个值
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 看起来第一个console.log是'It’不太对
- 与杜兰达尔合作的第一个JavaScript项目.尝试从第三方 API 获取数据
- 节点发布错误对象的第一个“属性”
- Javascript:表单验证getElementById仅返回第一个id元素
- 手风琴我想更改第一个 li 边框半径和最后一个 li 边框半径,我该怎么做请帮助我.
- 当移动到最后一个li时,返回到第一个li(使用Jquery滚动到下一个)
- CSS的条件包含,但不作为最后一个(或第一个)CSS
- 为什么jQuery代码将最后一个图像替换为第一个
- 删除最后一个无效字符,而不是第一个(javascript验证)