Question

我想在我的网站中使用这种类型的地图来检查点的地图旅程显示在图像下方并在其点中设置意图。使用数组动态更改路径。

这是我的代码

/**
     * This is for used map of Journey
     *
     * @params id as Journeys id
     * @params request as Data of Journeys
     *
     * return Google Map Data
     */
    function journeyMap(id,request) {
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer({
                                    polylineOptions: {
                                            strokeColor: "#F24639",
                                            strokeWeight: 5 
                                    } 
                                });
        var latlng            = new google.maps.LatLng(20.5937,78.9629);
        var myOptions         = {
            zoom    : 4,
            center  : latlng,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
                        {
                        "featureType": "landscape.natural",
                        "elementType": "geometry.fill",
                        "stylers": [
                          { "color": "#ffffff" }
                        ]
                      },{
                        "featureType": "landscape.man_made",
                        "stylers": [
                          { "color": "#ffffff" },
                          { "visibility": "off" }
                        ]
                      },{
                        "featureType": "water",
                        "stylers": [
                           { "color": "#80C8E5" },
                          { "saturation": 0 }
                        ]
                      },{
                        "featureType": "road.arterial",
                        "elementType": "geometry",
                        "stylers": [
                          { "color": "#999999" }
                        ]
                      }
                        ,{
                        "elementType": "labels.text.stroke",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      }
                        ,{
                            "elementType": "labels.text",
                            "stylers": [
                              { "color": "#333333" }
                            ]
                          }
                        ,{
                            "featureType": "road.local",
                            "stylers": [
                              { "color": "#dedede" }
                            ]
                          }
                        ,{
                            "featureType": "road.local",
                            "elementType": "labels.text",
                            "stylers": [
                              { "color": "#666666" }
                            ]
                          }
                        ,{
                            "featureType": "transit.station.bus",
                            "stylers": [
                              { "saturation": -57 }
                            ]
                          }
                        ,{
                            "featureType": "road.highway",
                            "elementType": "labels.icon",
                            "stylers": [
                              { "visibility": "off" }
                            ]
                          },{
                            "featureType": "poi",
                            "stylers": [
                              { "visibility": "off" }
                            ]
                          }
                    ]
        };
        var map = new google.maps.Map(document.getElementById("map_"+id),myOptions);

        directionsDisplay.setMap(map);  
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
            }
        });
    }//end journeyMap()

这是我的PHP代码

<?php
                        $originCityName         =   !empty($journeys['start_city_name']) ? $journeys['start_city_name'] : '';
                        $destinationCityName    =   !empty($journeys['end_city_name']) ? $journeys['end_city_name'] : '';
                        ?>
                        <!-- #### This is used for the Google Journeys Map : START #### -->
                        <script>
                            var request_<?php echo !empty($journeys['id']) ? $journeys['id'] : ''; ?> = {
                                origin: '<?php echo $originCityName; ?>',
                                destination: '<?php echo $destinationCityName; ?>',
                                //~ waypoints: [{
                                      //~ location:"Ajmer",
                                      //~ stopover:true,
                                    //~ }],
                                travelMode: google.maps.DirectionsTravelMode.DRIVING
                            };
                            google.maps.event.addDomListener(window, "load", function () { journeyMap(<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>,request_<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>); });
                       </script> 
                        <!-- #### This is used for the Google Journeys Map : END #### -->
                        <div id="map_<?php echo $journeys['id']; ?>" style="height: 340px;"></div>

Answer 1

您可以将DirectionsRoute与以下字段一起使用：

overview_path包含一个代表一个的LatLng数组   结果方向的近似（平滑）路径。

您还可以在Using Waypoints in Routes中找到更多有用的信息，您可以在此SO帖子中看到它的实施方式 - How to get the list of waypoints of a route displayed on the Google maps, through their API V3?。

如何使用航点设置谷歌地图？

1 个答案: