Fatal编程技术网

Javascript 谷歌地图方向输入

javascript jquery html css google-maps

Javascript 谷歌地图方向输入,javascript,jquery,html,css,google-maps,Javascript,Jquery,Html,Css,Google Maps,我正在尝试创建一个谷歌地图窗口，用户在其中输入位置（标记a），以便更好地使用输入框和提交按钮向他们指示设置位置（标记b）。这是我目前拥有的，位置A在代码中声明，不能在窗口中移动。我无法成功创建此输入框，因此我想知道是否有人可以帮助我 这是我目前掌握的代码 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Directio

我正在尝试创建一个谷歌地图窗口，用户在其中输入位置（标记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>


方向示例
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'panel'）；
var请求={
来源：都柏林，
目的地：'53.4198282，-6.2183937'，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
这是输出：

在此方面的任何帮助都将不胜感激

谢谢

，因此，您在这里要做的是在用户输入输入字段时捕获该字段的值，并将其作为
原点传递，而不是像现在这样使用硬编码字符串

这应该让你开始：

HTML:


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



$('#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);
        }
    });
});



你正在努力解决的具体问题是什么？对不起，我应该说得更清楚，我似乎无法创建链接到地图的输入框。例如，如果用户要在输入框中输入“Galway”，它将显示从Galway到标记B的方向。我对这一点还很陌生，所以我只是在寻找一些非常有效的帮助，非常感谢您的帮助