在Google地图v3上可点击的行车路线 [英] Clickable Driving Direction on Google Maps v3
本文介绍了在Google地图v3上可点击的行车路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的项目有2个点，它有一个预定义的lat和lng，并且我想自己绘制点A和点B的开始和结束，并且不会失去它的功能。
我制作了另一个项目，您可以点击绘制该路线，但它没有标记，并且不可拖曳，这是我的实际项目 a>用完整的代码
我会在这里发布一个简短的代码，只与我的指示。
我希望我第一次点击A点和第二个点我的B点，他们拖动它们的可能性，就像链接的项目一样
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
}
pode ser ROADMAP，SATELLITE，HYBRID，TERRAIN
map = new google.maps.Map（mapDiv，mapOptions）;
//渲染路线等
ren = new google.maps.DirectionsRenderer（{'draggable'：true}）;
ren.setMap（map）;
ren.setPanel（document.getElementById（directionsPanel））;
ser = new google.maps.DirectionsService（）;
//创建路线
ser.route（{'origin'：new google.maps.LatLng（-23.563594，-46.654129），'destination'：new google.maps.LatLng （
-23.563672，-46.640396），'travelMode'：google.maps.DirectionsTravelMode.DRIVING}，function（res，sts）{
if（sts =='OK'）ren.setDirections（res ）;
}）
}
我正在更新在这里我的代码，我只完成了wayA，这是第一个路点，第二个是预定义的latLng，在那里你点击，它得到latLng并放在'origin'中。
google.maps.event.addListener（map，click，function（event）{
wayA = 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，'destination'：new google.maps.LatLng（
-23.563672，-46.640396），'travelMode'：google.maps.DirectionsTravelMode.DRIVING}，函数（res，sts）{
if（sts =='OK'）ren.setDirections（res）;
}）
解决方案
概念：
（听起来像是你想要的）
- 当用户点击地图时，向地图添加点击事件监听器
- 添加可拖动标记（我会添加一个点击监听器以便他们可以通过点击来删除它） 当用户第二次点击地图时，添加第二个可拖动标记
- 添加第二个标记，使用两个标记的位置调用directions服务。
- 如果任一标记被拖动，则调用d再次提供服务。
（如果您正在尝试并遇到问题，代码或实时链接会有帮助） / p>
您缺少＃3和＃4
代码段：
var map，ren，ser; var data = {}; var data2 = {}; var marker; var infowindow; var doMark = true; var directionsDisplay; var wayA; var wayB; //Funicãode Iniciofunction 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 asdefiniçesdo mapa，como tipo devisualizaçã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 ='指针'; control.innerHTML ='< img src =http://i47.tinypic.com/2dlp2fc.jpgborder =0alt =由TinyPic托管的图片和视频>'; control.index = 1; map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（对照）; google.maps.event.addDomListener（control，'click'，function（）{doMark = false; markNow（）;}）; google.maps.event.addListener（map，click，function（event）{if（！wayA）{wayA = new google.maps.Marker（{position：event.latLng，map：map}）;} else { wayB = new google.maps.Marker（{position：event.latLng，map：map}）; // Renderiza a rota，o draggableédiz se o waypointéarrastavel ounãoren = new google.maps.DirectionsRenderer（{ DragArea：true}）; ren.setMap（map）; ren.setPanel（document.getElementById（directionsPanel））; ser = new google.maps.DirectionsService（）; // Cria a rota，DirectionTravelMode pode ser： （{'origin'：wayA.getPosition（），'destination'：wayB.getPosition（），'travelMode'：google.maps.DirectionsTravelMode.DRIVING}，function（res，sts） ）{if（sts =='OK'）ren.setDirections（res）;}）}}）;} 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}）; 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 =mappystyle =float：left; width：70％; height：100％> < / div>< div id =directionsPanelstyle =float：right; width：30％; height 100％>< / div>< div> < label> Endereco< / label>< / div>
I'm making a google maps project and need to create a route clicking on it.
My project has 2 points that has a predefined lat and lng, and I want to draw by myself the start and the end of the point A and B and don't lose it functionality.
I made another project that you can click to draw the route but it don't have markers, and is not draggabble, this is my actual project with the full code I will post here a short code only with my directions.
I want that my first click to the point A and the second my point B, and them the possibility to drag them, like the project linked
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
}
pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
map = new google.maps.Map( mapDiv, mapOptions );
//Render route, etc.
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
//Create the route
ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
}
I'm updating here my code, I done only wayA, that is the first waypoint, the second is a latLng predefined, where you click, it gets the latLng and put inside the 'origin'.
google.maps.event.addListener(map, "click", function(event) {
wayA = 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, 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
This is my test with the full code
解决方案
Concept: (sounds like this is what you want)
- add a click event listener to the map
- when the user clicks the map add a draggable marker (I would add a click listener to it so they can delete it by clicking on it)
- when the user clicks on the map a second time add a second draggable marker
- when the second marker is added, call the directions service with the position of the two markers.
- if either marker is dragged call the directions service again.
(if this what you are trying and are running into problems, code or a live link would be helpful)
You are missing #3 and #4
code snippet:
var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
var doMark = true;
var directionsDisplay;
var wayA;
var wayB;
//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) {
wayA = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
wayB = new google.maps.Marker({
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.getPosition(),
'destination': wayB.getPosition(),
'travelMode': google.maps.DirectionsTravelMode.DRIVING
}, function(res, sts) {
if (sts == 'OK') ren.setDirections(res);
})
}
});
}
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
});
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>
</div>
这篇关于在Google地图v3上可点击的行车路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
