Question

我正在创建一个website which includes a map来显示餐厅的位置，但是，我想在网站上添加功能，让用户选择一个按钮，以便在移动设备上从地理位置或当前位置获取路线餐厅位置并在页面上显示。

我对地图的模拟是这样的：

    <main role="main" class="container bg-content">
    <h1 class="head-font text-center">Where are we</h1>

    <div class="row margin">
        <div class="col">
            <div id="map"></div>
            <script>
              function initMap() {
                var restaurant = {lat: 54.772373, lng: -6.526826};  
                var options = {
                    zoom: 14,
                    center: restaurant,
                    disableDoubleClickZoom: true,
                    draggable: true,
                    fullscreenControlOptions: true
                };

                var map = new google.maps.Map(document.getElementById('map'), options);

                var contentString = '<div class="col">' +
                                        '<div class="row">' +
                                            '<h1><p style="padding-left: 20px;">Our location</p></h1>' +
                                        '</div>' +
                                        '<div class="col">' +
                                            '<div class="row"' +
                                                '<p>116 Hillhead Rd, Castledawson, Magherafelt, BT45 8ET</p>' +
                                            '</div>' +
                                            '<div class="row"' +
                                                '<h2 class="active-item">Phone us: </h2>' +
                                                '<p style="padding-left: 5px;"><a href="tel:028 7946 8322"> 028 7946 8322</a></p>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>';


                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                  position: restaurant,
                  map: map,
                  maxWidth: 400,
                  title: 'The Old Thatch Inn'
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
          }
            </script>
            <script async defer
                    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkSyByeAjemiEXbWMY5RNJg5lHlbeC5Z4&callback=initMap">
            </script>     
        </div>
    </div>

    <div class="row margin">
        <div class="col">
            <button type="button" class="btn btn-info btn-sm">Get directions to us</button>
        </div>
    </div>
</main>

我是Javascript的新手并且知道它的基础知识，只是不知道如何解决这个问题。任何帮助或指导表示赞赏。方向将显示在地图本身下方

Answer 1

在google地图对象中为Direction服务创建实例传递参数，例如Start，End，travel modes和transit options.Then使用渲染来渲染地图中的路线。

function callBack (r){
                var renderer = new google.maps.DirectionsRenderer();
                renderer.setMap(map);
                renderer.setDirections(r);
}
var directionService = new google.maps.DirectionsService()
directionService.route({origin: start,//Geolocation of the user
                    destination: restaurant,
                    travelMode: google.maps.DirectionsTravelMode.TRANSIT,
                    transitOptions: { modes: [google.maps.TransitMode.BUS] }
                },callBack );

如何指示？

1 个答案: