我想創建一個谷歌地圖窗口，用戶在那裏輸入位置（標記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

相關問題