私はthisの2つの位置間の距離を計算するマップを追加するチュートリアルを見つけました。それは素晴らしい作品です。 ここでの問題は、jQueryではなく、生のJavaScriptで書かれていることです。JavaScriptをjQueryに変更することができません
jQueryをインクルードして「document.getElementById('txtSource')」を「$('#txtSource')」と変更すると、機能しません。ここで
は元のコードです：ここhttp://pastebin.com/ZrK7cSAb
任意の提案：ここhttp://pastebin.com/BKqgYWEw
は私の編集したコードですか？
ありがとうございました。
それは@ssubeようなものだと述べた：あなたはjQueryオブジェクトではないDOMノードを集めています。私はJQueryオブジェクトでDOMをトラバースし、適切なDOMノード要素をAPIに渡して、あなたが望むものを達成しようとしました。下記の作業溶液を参照してください：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function() {
new google.maps.places.SearchBox($('#txtSource').get(0));
new google.maps.places.SearchBox($('#txtDestination').get(0));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map($('#dvMap').get(0), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel($('#dvPanel').get(0));
//*********DIRECTIONS AND ROUTE**********************//
source = $('#txtSource').val();
destination = $('#txtDestination').val();
var request = {
origin: source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != 'ZERO_RESULTS') {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = $('#dvDistance');
dvDistance.html('');
dvDistance.html('Distance: ' + distance + '<br>');
dvDistance.html('Duration:' + duration);
} else {
alert('Unable to find the distance via road.');
}
});
}
</script>
<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td colspan="2">
Source:
<input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
Destination:
<input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvDistance">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td>
<div id="dvPanel" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</table>
<br />
</body>
</html>jQueryセレクタとDOM要素は同じものではありません。あなたは単にそのようなセレクタを渡すことはできません。ただし、get methodを使用してセレクタから要素を取得できます。
console.log(document.getElementById('test').constructor, $('#test').constructor, $('#test').get(0).constructor);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
何をして動作しませんでしたか？実際にあなたのコードを通過することなく、どうすればそれについて推測することができますか？ – Rayon
jQueryプラグインが組み込まれましたか？ –
@Rayon okコード全体が含まれています – medk