我想创建一个谷歌地图窗口，用户在那里输入位置（标记a），给他们方向设置位置（标记b），最好使用输入框并提交按钮。这是我目前的情况，位置A在代码中声明并且不能移动到窗口中。我一直没能成功创建该输入框中，所以我想知道是否有任何人谁可以帮我谷歌地图方向输入

这是我至今

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Directions Example</title> 
<script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
<div style="width: 600px;"> 
<div id="map" style="width: 280px; height: 400px; float: left;"></div> 
<div id="panel" style="width: 300px; float: right;"></div> 
</div> 

<script type="text/javascript"> 

var directionsService = new google.maps.DirectionsService(); 
var directionsDisplay = new google.maps.DirectionsRenderer(); 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom:7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById('panel')); 

var request = { 
    origin: 'Dublin', 
    destination: '53.4198282,-6.2183937', 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    } 
}); 
</script> 
</body> 
</html>

代码这是输出：

http://i.stack.imgur.com/R80oB.png

任何帮助，将不胜感激

感谢

来源

2015-11-03 EoghanBradshaw

什么是你摔跤的具体问题用？ –

有什么问题？ – APAD1

对不起，我应该更清楚，我似乎无法创建一个输入框，将链接到地图。例如，如果用户要在输入框中输入“Galway”，它会显示从Galway到Marker B的方向。我对此仍然很陌生，所以我只是寻求一些帮助 – EoghanBradshaw

所以你想要做的是捕获输入字段的值，当用户输入并将其作为origin传入时，而不是像现在那样使用硬编码字符串。

这应该让你开始：

HTML：

<div class="address-form"> 
    Enter your address: <input id="address" type="text" /> 
    <input id="submit" type="submit" /> 
</div>

JS：

$('#submit').click(function() { 
    var address = $('#address').val(); 
    var request = { 
     origin: address, 
     destination: '53.4198282,-6.2183937', 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
});

JSFiddle

来源

2015-11-03 18:38:27 APAD1

完美的作品，非常感谢你您的帮助 – EoghanBradshaw

谷歌地图方向输入

回答

JSFiddle

相关问题