0
ユーザーからデータを収集して変数に格納する必要があるため、ポリラインを使用して旅程パスを作成するために使用できますGoogleマップAPIからクラス。私はそれをいくつかの方法を試してみましたが、私が得た最も近いようです：GoogleマップAPIを使用して、ユーザーからの座標を促してパスを作成する方法
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize(){
var latitude;
var longitude;
var latDest;
var longitudeDest;
var mapProp = {
center: new google.maps.LatLng(52.395715,4.888916),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
document.getElementById('submit').addEventListener('click', function() {
latitude = document.getElementById('latitude').value;
longitude = document.getElementById('longitude').value;
latDest = document.getElementById('latDest').value;
longitudeDest = document.getElementById('longitudeDest').value;
});
var start = new google.maps.LatLng(latitude,logitude);
var dest = new google.maps.LatLng(latDest,longitudeDest);
var myTrip=[start,dest]
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize)
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<form>
<label>Start Lattitude</label><input type = "text" name = "latitude"/> <br>
<label>Start Longitude</label><input type = "text" name = "longitude"/><br>
<label>Destination Latitude</label><input type = "text" name = "latDest"/><br>
<label>Destination Longitude</label><input type = "text" name = "longitudeDest"/><br>
<input type = "submit" name = "submit">
</form>
</body>
</html>
このコードの結果は、実際に私は必要なパスを描画しないものです。ページは再ロードされますが、パスは表示されず、すべてが同じです。
あなたの質問は何ですか？ – geocodezip
[マップコントロールのオートコンプリート]（https://developers.google.com/maps/documentation/javascript/places-autocomplete#map_controls）を試しましたか？マニュアルに記載されているように、ユーザーに情報を要求するのに便利です。 – Teyam
@geocodezip私の質問は、パスが表示されない理由と私はそれを修正する方法です。 – Mustapha