Question

我有一个代码来显示谷歌地图上多个位置之间的路线。这是一个使用折线。然而，对于到达目的地的返回路线，它显示“乌鸦飞行”。我没有使用谷歌API密钥。我需要吗？如果我这样做，我该如何使用它？这会导致这个问题吗？我已经尝试了建议的链接中的答案，但它始终不起作用。

我原本以为这是一个相当常见的问题 - 如何使用php绘制多个位置。我已经做了一段时间了，我无法找到解决方案。我如何让它停止显示返回路线，因为乌鸦飞过但只在路上？我的代码是：

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
       <script type="text/javascript">
       var map = null;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();
       var markers = [

        <?php 
                // loop through the rows of data
                if( have_rows('tour_site', $ID) ):

                 $info_places = array();
                  $info_all_places = array();                 
                    while( have_rows('tour_site', $ID) ) : the_row();
                     //display a sub field value
                        $name = get_sub_field('name');
                        $long = get_sub_field('long');
                        $lat = get_sub_field('lat');
                        $info_places = array("name" => $name, "long"=>$long, "lat"=>$lat);
                        $info_all_places = array($info_places);
                        foreach ($info_all_places as $info) {
                        ?>
                        { 
                             "title": <?php echo "'" . $info['name']  . "'"; ?>,
                             "lat": <?php echo "'" . $info['lat'] . "'"; ?>,
                             "lng": <?php echo "'" . $info['long'] . "'"; ?>,
                        }, 
                        <?php 
                        }
                endwhile;
                else :   
                endif;
            ?>


            {
               "title": 'XXX',
               "lat": 'XXX',
               "lng": 'XXX', 
             }
   ];
   </script>

<!-- <script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&amp;up_fromLocation=xxx&amp;up_myLocations=<?php echo $destination; ?>&amp;up_defaultDirectionsType=&amp;up_autoExpand=&amp;synd=open&amp;w=320&amp;h=55&amp;title=Directions+by+Google+Maps&amp;lang=en&amp;country=US&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script> -->  
<script type="text/javascript">

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(
            parseFloat(markers[0].lat),
            parseFloat(markers[0].lng)),
        zoom:15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var path = new google.maps.MVCArray();
    var service = new google.maps.DirectionsService();

    var infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
    });
    var lat_lng = new Array();

    var marker = new google.maps.Marker({
                    position:map.getCenter(),
                   map:map,
        title:markers[0].title
                 });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, "click", function(evt) {
        infowindow.setContent(this.get('title'));
        infowindow.open(map,marker);
    });
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
                                             parseFloat(markers[i].lng));
            var smarker = new google.maps.Marker({position:des, 
                                      map:map,
                                      title:markers[i].title
                                     });

google.maps.event.addListener(smarker, "click", function(evt) {  
    infowindow.setContent(this.get('title'));
    infowindow.open(map,this);
});       
            var des = new google.maps.LatLng(parseFloat(markers[i+1].lat), 
                                             parseFloat(markers[i+1].lng));
var dmarker = new google.maps.Marker({position:des, 
                                      map:map,
                                      title:markers[i+1].title
                                     });
bounds.extend(dmarker.getPosition());
google.maps.event.addListener(dmarker, "click", function(evt) {  
    infowindow.setContent(this.get('title'));
    infowindow.open(map,this);
});            
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                    poly.setPath(path);
                    map.fitBounds(bounds);
                }
            });
        }
    }
} 
google.maps.event.addDomListener(window,'load',initialize);
   </script>

        <div id="dvMap" style="width: 600px; height: 450px">   </div>

enter image description here

Answer 1

检查返回的状态参数google.maps.DirectionsStatus。它可能会为您提供问题的指示。

如果你得到OVER_QUERY_LIMIT，你应该在方向服务电话之间加一个延迟，或者只用一个包含多达10个航点的数组来调用它。

了解更多here。

在谷歌地图上的多个位置之间显示路线

1 个答案: