用于在 Google Maps v3 上创建多条路线的数组 [英] Array to create multiple routes on Google Maps v3
本文介绍了用于在 Google Maps v3 上创建多条路线的数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个谷歌地图项目，我想做一个数组来使用方向创建多条路线.例如，我单击地图并出现一个名为A"的标记，当我第二次单击时，显示一个名为B"的标记.好的，这是有效的.
但是当我第三次点击我想显示一个新的A"点和第四次一个新的B"点时，不需要擦除另一条路线.我只想显示多条路线，我知道我需要创建一个数组，但我不知道我把数组放在哪里等等.我会在这里发布我的代码，如果有人可以为我创建一个例子很有帮助.
这是我没有多条路线的恢复代码:
var wayA ;var方式B;var doRoute = true;如果(doRoute == 真){doRoutes();}函数 doRoutes(){google.maps.event.addListener(地图，点击"，函数(事件){如果 (!wayA) {wayA = 新的 google.maps.Marker({位置:event.latLng，地图:地图});}否则如果(方式A){wayB = 新的 google.maps.Marker({位置:event.latLng，地图:地图});ren = new google.maps.DirectionsRenderer( {'draggable':true} );ren.setMap(地图);ren.setPanel(document.getElementById("directionsPanel"));ser = 新的 google.maps.DirectionsService();ser.route({ 'origin': wayA.getPosition(), 'destination': wayB.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {if(sts=='OK')ren.setDirections(res);})}});}}这是决议:
var map, ren, ser;无功数据 = {};var data2 = {};var 标记；var 信息窗口；var doMark = true ;var 方向显示；var wayA = [];var wayB = [];var directionResult = [];//初始化函数 goma(){var mapDiv = document.getElementById('mappy');var mapOptions = {缩放:12，中心:新的 google.maps.LatLng(-23.563594, -46.654239)，mapTypeId : google.maps.MapTypeId.ROADMAP}map = new google.maps.Map( mapDiv, mapOptions );map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);google.maps.event.addDomListener(control, 'click', function() {doMark = 假；标记现在()；});google.maps.event.addListener(地图，点击"，函数(事件){如果(路A.长度==路B.长度){wayA.push(new google.maps.Marker({可拖动:真实，位置:event.latLng，地图:地图}));} 别的 {wayB.push(new google.maps.Marker({可拖动:真实，位置:event.latLng，地图:地图}));ren = new google.maps.DirectionsRenderer( {'draggable':true} );ren.setMap(地图);ren.setPanel(document.getElementById("directionsPanel"));ser = 新的 google.maps.DirectionsService();ser.route({'origin':wayA[wayA.length-1].getPosition(),'destination':wayB[wayB.length-1].getPosition(),'travelMode': google.maps.DirectionsTravelMode.DRIVING}，函数(res，sts){如果(sts=='OK'){directionResult.push(res);ren.setDirections(res);} 别的 {directionResult.push(null);}})}});} 解决方案
这就是你所说的你想要的:多条路线的工作示例
代码片段:
var map, ren, ser;无功数据 = {};var data2 = {};var 标记；var 信息窗口；var doMark = true;var 方向显示；var wayA = [];var wayB = [];var directionResult = [];//Função de Inicio函数 goma() {var mapDiv = document.getElementById('mappy');var mapOptions = {缩放:12，中心:新的 google.maps.LatLng(-23.563594, -46.654239)，mapTypeId: google.maps.MapTypeId.ROADMAP}//Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAINmap = new google.maps.Map(mapDiv, mapOptions);var control = document.createElement('DIV');control.style.padding = '1px';control.style.border = '1px solid #000';control.style.backgroundColor = '白色';control.style.cursor = '指针';control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="TinyPic 的图片和视频托管">';控制指数 = 1;map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);google.maps.event.addDomListener(control, 'click', function() {doMark = 假；标记现在()；});google.maps.event.addListener(地图，点击"，函数(事件){如果(路A.长度==路B.长度){wayA.push(new google.maps.Marker({可拖动:真实，位置:event.latLng，地图:地图}));} 别的 {wayB.push(new google.maps.Marker({可拖动:真实，位置:event.latLng，地图:地图}));//Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não任 = 新 google.maps.DirectionsRenderer({'可拖动':true});ren.setMap(地图);ren.setPanel(document.getElementById("directionsPanel"));ser = 新的 google.maps.DirectionsService();//Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSITser.route({'原点':wayA[wayA.length - 1].getPosition(),'目的地':wayB[wayB.length - 1].getPosition(),'travelMode': google.maps.DirectionsTravelMode.DRIVING}, 函数(res, sts) {如果(sts == 'OK'){directionResult.push(res);ren.setDirections(res);} 别的 {directionResult.push(null);}})}});}var html = ""+<tr><td>名称:</td><td><input type='text' id='name'/> </td> </tr>"+<tr><td>Endereco:</td><td><input type='text' id='address'/></td> </tr>"+"<tr><td>Tipo:</td> <td><select id='type'>"+<option value='oficina' SELECTED>oficina</option>"+"<option value='restaurante'>restaurante</option>"+</选择></td></tr>"+"<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>;";信息窗口 = 新的 google.maps.InfoWindow({内容:html});//地理编码(pesquisar)功能马卡(){var endereco = document.getElementById("endereco").value;//警报(endereco)地理编码器 = 新的 google.maps.Geocoder();geocoder.geocode({地址":endereco}，功能(结果，状态){如果(状态 = google.maps.GeocoderStatus.OK){latlng = 结果[0].geometry.location;markerInicio = 新的 google.maps.Marker({位置:latlng，地图:地图});map.setCenter(latlng);}});}功能标记现在(){如果(doMark == 假){google.maps.event.addListener(地图，点击"，函数(事件){标记 = 新的 google.maps.Marker({位置:event.latLng，地图:地图});google.maps.event.addListener(标记，点击"，函数(){infowindow.open(地图，标记)；});});}}google.maps.event.addDomListener(window, 'load', goma);html,身体 {高度:100%；宽度:100%；}
<script src="http://maps.google.com/maps/api/js"></script><div id="mappy" style="float:left;width:70%; height:100%"></div><div id="directionsPanel" style="float:right;width:30%;height 100%"></div><div><label>Endereco</label><input type="text" id="endereco"><input type="button" value="marcar" id="marcar" onClick="marcar()">
I have a Google Maps project, and I want to do an array to create multiple routes using directions.
For example, I click on the map and appear a marker named "A", and when I click the second time, display a marker named "B". Ok, this is working.
But when I click the third time I want to display a new "A" point and the fourth time a new "B", don't need to erase the other route. I want only to display multiple routes, I know that I need to create an Array, but i don't know where i put the array, and etc. I will post here my code, if someone can create an example for me will be so helpful.
And this was my resumed code without the multiple routes:
var wayA ;
var wayB;
var doRoute = true;
if (doRoute == true){
doRoutes();
}
function doRoutes()
{
google.maps.event.addListener(map, "click", function(event) {
if (!wayA) {
wayA = new google.maps.Marker({
position: event.latLng,
map: map
});
}else if (wayA){
wayB = new google.maps.Marker({
position: event.latLng,
map: map
});
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
ser.route({ 'origin': wayA.getPosition(), 'destination': wayB.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
}
});
}
}
This is the resolution:
var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
var doMark = true ;
var directionsDisplay;
var wayA = [];
var wayB = [];
var directionResult = [];
//Initialize
function goma()
{
var mapDiv = document.getElementById('mappy');
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-23.563594, -46.654239),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( mapDiv, mapOptions );
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
google.maps.event.addDomListener(control, 'click', function() {
doMark = false;
markNow();
});
google.maps.event.addListener(map, "click", function(event) {
if (wayA.length == wayB.length) {
wayA.push(new google.maps.Marker({
draggable: true,
position: event.latLng,
map: map
}));
} else {
wayB.push(new google.maps.Marker({
draggable: true,
position: event.latLng,
map: map
}));
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination': wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK') {
directionResult.push(res);
ren.setDirections(res);
} else {
directionResult.push(null);
}
})
}
});
}
解决方案 Based off my previous example from your earlier question
This is what you say you want:
working example with multiple routes
code snippet:
var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
var doMark = true;
var directionsDisplay;
var wayA = [];
var wayB = [];
var directionResult = [];
//Função de Inicio
function goma() {
var mapDiv = document.getElementById('mappy');
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-23.563594, -46.654239),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
map = new google.maps.Map(mapDiv, mapOptions);
var control = document.createElement('DIV');
control.style.padding = '1px';
control.style.border = '1px solid #000';
control.style.backgroundColor = 'white';
control.style.cursor = 'pointer';
control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">';
control.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
google.maps.event.addDomListener(control, 'click', function() {
doMark = false;
markNow();
});
google.maps.event.addListener(map, "click", function(event) {
if (wayA.length == wayB.length) {
wayA.push(new google.maps.Marker({
draggable: true,
position: event.latLng,
map: map
}));
} else {
wayB.push(new google.maps.Marker({
draggable: true,
position: event.latLng,
map: map
}));
//Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não
ren = new google.maps.DirectionsRenderer({
'draggable': true
});
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
//Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
ser.route({
'origin': wayA[wayA.length - 1].getPosition(),
'destination': wayB[wayB.length - 1].getPosition(),
'travelMode': google.maps.DirectionsTravelMode.DRIVING
}, function(res, sts) {
if (sts == 'OK') {
directionResult.push(res);
ren.setDirections(res);
} else {
directionResult.push(null);
}
})
}
});
}
var html = "<table>" +
"<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Tipo:</td> <td><select id='type'>" +
"<option value='oficina' SELECTED>oficina</option>" +
"<option value='restaurante'>restaurante</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
//Geocoding (pesquisar)
function marcar() {
var endereco = document.getElementById("endereco").value;
//alert(endereco)
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': endereco
}, function(results, status) {
if (status = google.maps.GeocoderStatus.OK) {
latlng = results[0].geometry.location;
markerInicio = new google.maps.Marker({
position: latlng,
map: map
});
map.setCenter(latlng);
}
});
}
function markNow() {
if (doMark == false) {
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
}
google.maps.event.addDomListener(window, 'load', goma);
html,
body {
height: 100%;
width: 100%;
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="mappy" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
<div>
<label>Endereco</label>
<input type="text" id="endereco">
</div>
<input type="button" value="Marcar" id="marcar" onClick="marcar()">
</div>
这篇关于用于在 Google Maps v3 上创建多条路线的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆