Question

我一直在探索用于Web的Google Maps JavaScript API，但试图显示用户当前位置和目的地之间的路线却陷入困境。

使用LatLng（lat，lng）进行预定义时，我可以显示两个位置之间的方向。我还可以找到用户的当前位置。我似乎不能两者都做。

DynamicComponentLoader

Answer 1

我不确定导致您实现目标的问题是什么-我尝试了上面的代码，它似乎可以正常工作-因为太冷了，无法在车库里工作，所以我做了一点工作并创建了一个小演示也许您或其他人可能会发现以下有用的东西？

最初，当对navigator.getCurrentLocation的调用解决了用户的位置时，地图将使用返回的position对象加载，以形成地图中心位置。然后使用具有修改过的options参数的destination服务来计算到预定义Directions的路由-特别是在这种情况下，它会隐藏默认标记。隐藏标记的原因是因为它们不公开任何事件，因此我们无法将任何侦听器绑定到它们，因此我们添加了自己的事件。添加的标记允许动态重新计算路线（也可以拖动实际路线本身）

可以通过单击两个标记之一来获得说明的文本版本。

destination位于英国伯明翰。如果您不在英国，那么不编辑此位置可能无法立即使用。另外，需要有效的API密钥。

<!DOCTYPE html>
<html>
    <head>
        <title>Google Maps: Directions from my location to...</title>
        <meta charset='utf-8' />
        <style>
            body,
            html { height:100%;margin:0;padding:0;box-sizing:border-box; }
            #map { width:100%;height:100vh; margin:auto;float:none; }
            #info{ display:none;padding:0.25rem;margin:1rem;background:white;font-size:0.75rem!important; }
        </style>
        <script>
            let map;
            let marker;
            let infoWindow;
            let oDir;
            let oTraf;
            let oDisp;
            let oReq;
            let destination={ lat:52.477068, lng:-1.911663 };

            const modes={
                walk:'WALKING',
                bike:'BICYCLING',
                car:'DRIVING',
                pub:'TRANSIT'
            };
            const advReqOptions={
                provideRouteAlternatives:true,
                optimizeWaypoints:true,
                avoidFerries:true,
                avoidHighways:false,
                avoidTolls:false
            };



            function initMap(){
                /* utility to add a new marker and assign listeners to it */
                const addmarker=function( pos, type, colour ){
                    marker=new google.maps.Marker({
                        icon:'//maps.google.com/mapfiles/ms/icons/'+colour+'-pushpin.png',
                        type:type,
                        draggable:true,
                        position:pos,
                        map:map
                    });
                    google.maps.event.addListener( marker, 'click', function(e){
                        infoWindow.getContent().style.display='block';
                        infoWindow.setPosition( this.getPosition() );
                        infoWindow.open( map );
                    });
                    google.maps.event.addListener( marker, 'dragend', calculateroute );
                };

                /* callback function when markers are dragged and the route is re-calculated */
                const calculateroute=function(e){
                    oReq={
                        origin:this.type=='start' ? e.latLng : oReq.origin,
                        destination:this.type=='finish' ? e.latLng : oReq.destination,
                        travelMode:modes.car
                    };
                    oDir.route( Object.assign( oReq, advReqOptions ), callback );
                };

                /* process the route response */
                const callback=function(r,s){
                    if( s === 'OK' ) oDisp.setDirections( r );
                    else evtGeoFailure( s );
                }

                /* Main callback invoked when the user's location has been identified */
                const evtGeoSuccess=function(p){
                    /* create the map */
                    let location={
                        lat: parseFloat( p.coords.latitude ),
                        lng: parseFloat( p.coords.longitude )
                    };
                    let options= {
                        zoom: 16,
                        center:location,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    let routeoptions={
                        suppressMarkers:true,
                        draggable:true,
                        map:map
                    };

                    /* create the map object */
                    map = new google.maps.Map( document.getElementById('map'), options );

                    /* add draggable markers to the start and end of pre-defined route */
                    addmarker( location, 'start', 'grn' );
                    addmarker( destination, 'finish', 'red' );

                    /* display the textual directions in an infowindow which opens on marker click */
                    infoWindow = new google.maps.InfoWindow({ maxWidth:450, disableAutoPan:false });
                    infoWindow.setContent( document.getElementById('info') );


                    /* create the objects required for the directions calculations */
                    oDir=new google.maps.DirectionsService();
                    oDisp=new google.maps.DirectionsRenderer( routeoptions );
                    oTraf=new google.maps.TrafficLayer();


                    /* construct the initial request */
                    oReq={
                        origin:location,
                        destination:destination,
                        travelMode:modes.car
                    };

                    /* go get the directions... */
                    oDisp.setMap( map );
                    oTraf.setMap( map );
                    oDisp.setPanel( infoWindow.getContent() );
                    oDir.route( Object.assign( oReq, advReqOptions ), callback );
                };


                const evtGeoFailure=function(e){ console.info( 'you broke the internets: %s', e ) };
                const config={ maximumAge:60000, timeout:5000, enableHighAccuracy:true };

                if( navigator.geolocation ) navigator.geolocation.getCurrentPosition( evtGeoSuccess, evtGeoFailure, config );
            }
        </script>
        <script src='//maps.googleapis.com/maps/api/js?key=<<APIKEY>>&callback=initMap' async defer></script>
    </head>
    <body>
        <div id='map'></div>
        <div id='info'></div>
    </body>
</html>

如何使用Google Maps JavaScript API请求从当前位置到目的地的路线

1 个答案: