google-maps - 谷歌地图多条路线实时更新新路线
问题描述
我想在谷歌地图上显示实时多条路线,我的情况是在这里我想在地图上推送新的路线而不闪烁地图。我现在正在使用下面的示例来显示多条路线。
jsfiddle.net/mattlokk/mp3q292r/15/
解决方案
没有闪烁是什么意思。
使用“添加路线”按钮添加路线时是否闪烁?
如果是,您可以在地图顶部显示加载程序一两秒钟,然后将其隐藏。
var routes = [];
var colors = ["blue", "red", "green", "black", "cyan", "brown", "purple"];
var map, directionsService;
function initialize() {
routes.push({
origin: new google.maps.LatLng(34.04429454929703, -118.22793351693724),
destination: new google.maps.LatLng(33.688522885631706, -116.15151750131224),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: []
});
routes.push({
origin: new google.maps.LatLng(32.69561555501597, -117.06338273568724),
destination: new google.maps.LatLng(34.525395303965354, -117.27212297006224),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: []
});
var mapOptions = {
center: new google.maps.LatLng(42.5584308, -70.8597732),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsService = new google.maps.DirectionsService();
for (var i = 0; i < routes.length; i++) {
directionsService.route(routes[i], displayRoute(colors[i]));
}
};
function displayRoute(color) {
return function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: color
},
suppressMarkers: false,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
}
}
document.getElementById('add-route').addEventListener('click', function(e) {
var origin = new google.maps.LatLng(34.04429454929703 + Math.random(), -118.22793351693724 - Math.random());
var destination = new google.maps.LatLng(33.688522885631706 + Math.random(), -116.15151750131224 - Math.random());
var route = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
waypoints: []
};
routes.push(route);
var color = colors[routes.length - 1];
directionsService.route(route, displayRoute(color));
if (routes.length === colors.length) {
this.style.display = 'none';
}
});
document.getElementById('add-waypoint').addEventListener('click', function(e) {
var rand = Math.floor(Math.random() * routes.length);
var route = routes[rand];
route.waypoints.push({
location: new google.maps.LatLng(34.04429454929703 + Math.random(), -118.22793351693724 - Math.random()),
stopover: true
});
var color = colors[rand];
directionsService.route(route, displayRoute(color));
});
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%
}
.as-console-wrapper {
display: none !important;
}
#add-route {
position: absolute;
top: 1px;
right: 1px;
}
#add-waypoint {
position: absolute;
top: 1px;
right: 80px;
}
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initialize"></script>
<div id="map_canvas"></div>
<button id="add-waypoint" title="Randomly adding waypoint">Add Waypoint</button>
<button id="add-route" title="Add random route">Add Route</button>
推荐阅读
- mysql - 在Vue中更新Mysql数据时如何渲染图表?
- php - 如何使用 MySQL 修复虚假的 1292 'Incorrect date value' 错误?
- scheme - 在 Racket 中测量经过时间的最佳方法是什么?
- android - HighChart 库 Android:在 HIChartView 中找不到 HIOptions
- reactjs - 反应康瓦得到
子组件声明中的属性 - c# - 在 C# 中发送邮件在发布版本中不起作用
- robotframework - 如何使用机器人框架验证 SVG 图标
- javascript - 如何调用数据 setState 来响应渲染返回?
- html - 在 html 设计中不使用表格创建价格表
- javascript - 过滤数组并根据另一个数组重新排序数组