谷歌地图替代道路显示不同颜色 [英] Google map alternative roads show with different colour
本文介绍了谷歌地图替代道路显示不同颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下谷歌地图 JsFiddle - 我需要在其中显示多个2 个位置之间的选项 - 我所做的只显示了一条路线 - 如果可能的话,还需要 2 个以不同颜色绘制.
在文档中,我得到的东西没有让我解决.
$(document).ready(function(){var 标记 = [{标题": '',"lat": '56.965969',"lng": '24.143496',描述": ''},{标题": '',纬度":'56.966259',"lng": '24.385860',描述": ''}];var mapOptions = {缩放:11,中心:新的 google.maps.LatLng(56.975749, 24.279310),滚轮:假,导航控制:假,地图类型控制:假,规模控制:假,可拖动:假,样式: [{"featureType": "水","elementType": "几何",造型师":[{颜色":#d3d3d3"},{亮度":17}]},{"featureType": "风景","elementType": "几何",造型师":[{颜色":#f5f5f5"},{亮度":20}]},{"featureType": "road.highway","elementType": "geometry.fill",造型师":[{颜色":#ffffff"},{亮度":17}]},{"featureType": "road.highway","elementType": "geometry.stroke",造型师":[{颜色":#ffffff"},{亮度":29},{重量":0.2}]},{"featureType": "road.arterial","elementType": "几何",造型师":[{颜色":#ffffff"},{亮度":18}]},{"featureType": "road.local","elementType": "几何",造型师":[{颜色":#ffffff"},{亮度":16}]},{"featureType": "poi","elementType": "几何",造型师":[{颜色":#f5f5f5"},{亮度":21}]},{"featureType": "poi.park","elementType": "几何",造型师":[{颜色":#dedede"},{亮度":21}]},{"elementType": "labels.text.stroke",造型师":[{可见性":开"},{颜色":#ffffff"},{亮度":16}]},{"elementType": "labels.text.fill",造型师":[{饱和度":36},{颜色":#333333"},{亮度":40}]},{"elementType": "labels.icon",造型师":[{可见性":关闭"}]},{"featureType": "运输","elementType": "几何",造型师":[{颜色":#f2f2f2"},{亮度":19}]},{"featureType": "管理","elementType": "geometry.fill",造型师":[{颜色":#fefefe"},{亮度":20}]},{"featureType": "管理","elementType": "geometry.stroke",造型师":[{颜色":#fefefe"},{亮度":17},{重量":1.2}]}]};var path = new google.maps.MVCArray();var service = new google.maps.DirectionsService();var infoWindow = new google.maps.InfoWindow();var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);var poly = new google.maps.Polyline({地图:地图,strokeColor: '#a4c431',中风不透明度:1.0,行程重量:5});var lat_lng = new Array();var image = 'images/sillava-pin.png';var 标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(56.966259, 24.385860),地图:地图,title: '西拉瓦',图标:图像});for (i = 0; i
谢谢!
解决方案
- 将
provideRouteAlternatives
选项设置为 DirectionsRequest 到true
<块引用>
provideRouteAlternatives
类型:布尔型是否应提供备选路线.可选.
添加第二个循环来处理返回的任何其他路由
service.route({来源:src,目的地:des,provideRouteAlternatives: 真,旅行模式:google.maps.DirectionsTravelMode.DRIVING},功能(结果,状态){如果(状态 == google.maps.DirectionsStatus.OK){for (var j = 0; j
代码片段:
$(document).ready(function() {var 标记 = [{标题": '',"lat": '56.965969',"lng": '24.143496',描述": ''}, {标题": '',纬度":'56.966259',"lng": '24.385860',描述": ''}];var mapOptions = {缩放:11,中心:新的 google.maps.LatLng(56.975749, 24.279310),滚轮:假,导航控制:假,地图类型控制:假,规模控制:假,可拖动:假};var service = new google.maps.DirectionsService();var polyArray = [];var infoWindow = new google.maps.InfoWindow();var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);var lat_lng = new Array();var 颜色 = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';var 标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(56.966259, 24.385860),地图:地图,title: '西拉瓦',图标:图像});for (i = 0; i
.map {宽度:100%;高度:100%;}身体,html {宽度:100%;高度:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maps.googleapis.com/maps/api/js"></script><div id="map_1" class="map"></div>
I have the following google map JsFiddle - where i need to display multiple option between 2 location - what i did show only one route - need if possible 2 more to draw with different color.
In documentations what i got i wasn't to clear for me to solve.
$(document).ready(function(){
var markers = [
{
"title": '',
"lat": '56.965969',
"lng": '24.143496',
"description": ''
}
,
{
"title": '',
"lat": '56.966259',
"lng": '24.385860',
"description": ''
}];
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(56.975749, 24.279310),
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#d3d3d3"
},
{
"lightness": 17
}]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 20
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 17
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 29
},
{
"weight": 0.2
}]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 18
}]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 16
}]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 21
}]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#dedede"
},
{
"lightness": 21
}]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"lightness": 16
}]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#333333"
},
{
"lightness": 40
}]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#f2f2f2"
},
{
"lightness": 19
}]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 20
}]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 17
},
{
"weight": 1.2
}]
}]
};
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
var poly = new google.maps.Polyline(
{
map: map,
strokeColor: '#a4c431',
strokeOpacity: 1.0,
strokeWeight: 5
});
var lat_lng = new Array();
var image = 'images/sillava-pin.png';
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(56.966259, 24.385860),
map: map,
title: 'Sillava',
icon: image
});
for (i = 0; i < markers.length; i++)
{
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
}
for (var i = 0; i < lat_lng.length; i++)
{
if ((i + 1) < lat_lng.length)
{
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route(
{
origin: src,
destination: des,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++)
{
path.push(result.routes[0].overview_path[i]);
}
}
});
}
} })
Thanks!
解决方案
- set the
provideRouteAlternatives
option to the DirectionsRequest totrue
provideRouteAlternatives
Type: boolean Whether or not route alternatives should be provided. Optional.
add a second loop to process any additional routes returned
service.route({ origin: src, destination: des, provideRouteAlternatives: true, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var j = 0; j < result.routes.length; j++) { var path = new google.maps.MVCArray(); polyArray.push(new google.maps.Polyline({ map: map, strokeColor: colors[j], strokeOpacity: 1.0, strokeWeight: 5 })); polyArray[polyArray.length - 1].setPath(path); for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) { path.push(result.routes[j].overview_path[i]); } } } });
code snippet:
$(document).ready(function() {
var markers = [
{
"title": '',
"lat": '56.965969',
"lng": '24.143496',
"description": ''
}, {
"title": '',
"lat": '56.966259',
"lng": '24.385860',
"description": ''
}
];
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(56.975749, 24.279310),
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false
};
var service = new google.maps.DirectionsService();
var polyArray = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
var lat_lng = new Array();
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.966259, 24.385860),
map: map,
title: 'Sillava',
icon: image
});
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
}
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
// path.push(src);
// poly.setPath(path);
service.route({
origin: src,
destination: des,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var j = 0; j < result.routes.length; j++) {
var path = new google.maps.MVCArray();
polyArray.push(new google.maps.Polyline({
map: map,
strokeColor: colors[j],
strokeOpacity: 1.0,
strokeWeight: 5
}));
polyArray[polyArray.length - 1].setPath(path);
for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
path.push(result.routes[j].overview_path[i]);
}
}
}
});
}
}
});
.map {
width: 100%;
height: 100%;
}
body,
html {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_1" class="map"></div>
这篇关于谷歌地图替代道路显示不同颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文