我正在尝试向我在网站中添加的标记添加“获取路线”选项。 Location for Amar Urja fiddle :https://jsfiddle.net/varshit/9t8pwoa5/
<html>
<div id="map" onload="myMap()"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyC7c1XGzYaMKeKfaHXGU9XumqzgH5PNgkw&callback=myMap"></script>
</html>
<script>
function myMap() {
var uluru = {
lat: 28.668877,
lng: 77.424681
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 21,
center: uluru,
});
var marker = new google.maps.Marker({
position: uluru,
draggable: true,
map: map
});
}
</script>
最佳答案
请在此处替换 url 位置 id。 DEMO
HTML
<input type="text" id="routeFrom" name="routeFrom" value="700 n tryon st, charlotte nc" />
<label for="routeFrom">From</label><br />
<input type="text" id="routeTo" name="routeTo" value="Huntersville, NC" />
<label for="routeTo">To</label><br />
<select id="routeMode" name="routeMode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<label for="routeMode">Mode</label><br />
<div class="textcenter">
<button id="routeGo">Route</button>
<button id="routeClear">Clear Route</button>
</div>
<div id="map_canvas"></div>
<div id="directions"></div>
CSS
#map_canvas{
width: 60%;
height: 400px;
border: 1px solid black;
float: left;
}
#directions {
width: 38%;
float: right;
}
body {
font-size: 12px;
}
JS
var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
var directionsService = new google.maps.DirectionsService();
var map;
$(window).load(function() {
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(28.668877, 77.424681)
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
$("#routeMode").on("change", function() { calcRoute(); });
$("#routeGo").on("click", function() { calcRoute(); });
$("#routeClear").on("click", function() { directionsDisplay.setDirections({ routes: [] }); });
});
function calcRoute() {
var request = {
origin: $("#routeTo").val(),
destination: $("#routeFrom").val(),
travelMode: google.maps.TravelMode[$("#routeMode").val()]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
关于javascript - 如何在谷歌地图中添加获取路线选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45205798/