简体   繁体   English

谷歌地图 - 绘制没有标记的路线

[英]Google Maps - Drawing the route without the markers

I am drawing a route for two points using Google Maps API but I have some inconvenient from this drawing.我正在使用 Google Maps API 绘制两点的路线,但我从这张图中有些不便。 When I draw the route, Google it shows me on map two points, A and B, the origin and destination point.当我绘制路线时,谷歌会在地图上显示两个点 A 和 B,即起点和终点。

The problem is that I can't take it out.问题是我拿不出来。 I need to show only the route without this markers.我只需要显示没有这个标记的路线。

Have someone known how to show only the route?有人知道如何只显示路线吗?

The code is based on example from developers guide https://plnkr.co/edit/UWfKc7XGHtdbeRZkUS8X?p=preview该代码基于开发人员指南中的示例https://plnkr.co/edit/UWfKc7XGHtdbeRZkUS8X?p=preview

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Directions service (complex)</title>
        <style>
            /* Always set the map height explicitly to define the size of the div
             * element that contains the map. */
            #map {
                height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var startLatLng;
            var endLatLng;
            var startAddr = 'Grand Central Station';
            var endAddr = 'City Hall';

            function initMap() {
                // Create a map and center it on Manhattan.
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    center: {lat: 40.771, lng: -73.974}
                });

                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
                calculateAndDisplayRoute(directionsDisplay, directionsService);
            }

            function calculateAndDisplayRoute(directionsDisplay, directionsService) {
                // Retrieve the start and end locations and create a DirectionsRequest using DRIVING directions.
                directionsService.route({
                    origin: startAddr,
                    destination: endAddr,
                    travelMode: 'DRIVING'
                }, function(response, status) {
                    // Route the directions and pass the response to a function to create markers for each step.
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        console.log(response);
                    } else {
                        console.log('Directions request failed due to ' + status);
                    }
                });
            }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgkOZvjHinGyRsQT7WO1R7KGmtxJJfDPE&callback=initMap">
        </script>
    </body>
</html>

I found the solution:我找到了解决方案:

directionsDisplay.setOptions({suppressMarkers: true});

And here the link to the documentation where all the options are explained这里是解释所有选项的文档的链接

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM