Javascript 如何在谷歌地图中添加“获取方向”选项_Javascript_Html_Css_Google Maps

Javascript 如何在谷歌地图中添加“获取方向”选项

javascript html css google-maps

Javascript 如何在谷歌地图中添加“获取方向”选项,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我试图添加一个选项“获取方向”到我的标记，我已经在我的网站上添加。小提琴：函数myMap（）{ var uluru={ 拉脱维亚：28.668877，液化天然气：77.424681 }; var map=new google.maps.map（document.getElementById（'map'）{ 缩放：21，中心：乌卢鲁， }); var marker=new google.maps.marker({ 职位：乌卢鲁，真的，地图：地图 }); } 请在此处替换url位置id

我试图添加一个选项“获取方向”到我的标记，我已经在我的网站上添加。小提琴：


函数myMap（）{
var uluru={
拉脱维亚：28.668877，
液化天然气：77.424681
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：21，
中心：乌卢鲁，
});
var marker=new google.maps.marker({
职位：乌卢鲁，
真的，
地图：地图
});
}

请在此处替换url位置id

HTML

可能是Hi的副本。谢谢你提供的参考资料。你能告诉我如何在我的地图中围绕我的标记提供获取方向的选项，然后当用户单击获取方向时，他将被重定向到谷歌地图。

<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>

<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>

#map_canvas{
    width: 60%;
    height: 400px;
    border: 1px solid black;
    float: left;
}
#directions {
    width: 38%;
    float: right; 
}
body {
    font-size: 12px;
}

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);
        }
    });
}