Google Places API not marking routes for some plac

2019-06-13 03:05发布

站内问答 / 前端开发
1940 1 4

I am using Google Places API to mark the route between 2 places. It is working fine for most of the routes. However, it is not marking route for few routes. This is because "directionsService.route" request is returning "ZERO_RESULTS" status for some of the routes. Below is one of the inputs for which it is not working.

Source A:

South End Circle, Basavanagudi, Bangalore, Karnataka, India

Destination B:

Jayanagar 4 Block, Jayanagar, Bangalore, Karnataka, India

Intermediate point C:

Tata Silk Farm, Jayanagar, Bangalore, Karnataka, India

Here is the code:

<html>
<head>
<style type="text/css">
               body {
                       font-family: sans-serif;
                       font-size: 14px;
               }
</style>
       <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places,geometry" type="text/javascript"></script>

        <script type="text/javascript">
            var locations = new Array();
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();

            function initialize1() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var chicago = new google.maps.LatLng(41.850033, -87.6500523);
                var mapOptions = {
                    zoom: 7,
                    center: chicago
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);
            }

            function initialize() {
                //routeBoxer = new RouteBoxer();

                var input = document.getElementById('searchTextFieldSource');
                var input1 = document.getElementById('searchTextFieldDestination');
                var input3 = document.getElementById('searchTextFieldIntermediate');

                var autocomplete = new google.maps.places.Autocomplete(input);
                var autocomplete1 = new google.maps.places.Autocomplete(input1);
                var autocomplete3 = new google.maps.places.Autocomplete(input3);
                google.maps.event.addListener(autocomplete3, 'place_changed', function () {
                    var place1 = autocomplete.getPlace();
                    document.getElementById('city1').value = place1.name;
                    var place1Lat = place1.geometry.location.lat();
                    var place1Lng = place1.geometry.location.lng();
                    document.getElementById('cityLat1').value = place1Lat;
                    document.getElementById('cityLng1').value = place1Lng;

                    var obj = new Object();
                    obj.city = place1.name;
                    obj.latitude = place1.geometry.location.lat();
                    obj.longitude = place1.geometry.location.lng();
                    locations.push(obj);


                    var place2 = autocomplete1.getPlace();
                    document.getElementById('city2').value = place2.name;
                    var place2Lat = place2.geometry.location.lat();
                    var place2Lng = place2.geometry.location.lng();
                    document.getElementById('cityLat2').value = place2Lat;
                    document.getElementById('cityLng2').value = place2Lng;

                    var obj = new Object();
                    obj.city = place2.name;
                    obj.latitude = place2.geometry.location.lat();
                    obj.longitude = place2.geometry.location.lng();
                    locations.push(obj);

                    //For intermediate point
                    var place3 = autocomplete3.getPlace();
                    document.getElementById('city3').value = place1.name;
                    var place3Lat = place3.geometry.location.lat();
                    var place3Lng = place3.geometry.location.lng();
                    document.getElementById('cityLat3').value = place3Lat;
                    document.getElementById('cityLng3').value = place3Lng;

                    directionsDisplay = new google.maps.DirectionsRenderer();
                    var startPlace = new google.maps.LatLng(place1Lat, place1Lng);

                    var mapOptions = {
                        zoom: 7,
                        center: startPlace
                    }

                    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    directionsDisplay.setMap(map);

                    var start = $("#city1").val();
                    var end = $("#city2").val();

                    var request = {
                        origin: start,
                        destination: end,
                        travelMode: google.maps.TravelMode.DRIVING
                    };

                    var position = new google.maps.LatLng(place3Lat, place3Lng);

                    directionsService.route(request, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(result);

                            if (google.maps.geometry.poly.isLocationOnEdge(position,
                                new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath(result.routes[0].overview_polyline.points) }),
                                0.0050000000)) {
                                alert("within polyline");
                            }
                            else {
                                alert("not in polyline");
                            }

                            // Box around the overview path of the first route
                            /*var path = result.routes[0].overview_path;
                            boxes = routeBoxer.box(path, 0.25);
                            drawBoxes();
                            findPlaces(0);*/
                        }
                    });
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);

            function refreshMap(locations) {
                google.maps.visualRefresh = true;
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var infowindow = new google.maps.InfoWindow();
                var marker, i;

                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i].city);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }


            }
        </script>
        <body>
           <div>
                   <b>Source A:</b><input id="searchTextFieldSource" type="text" size="50" placeholder="Enter the source" autocomplete="on" runat="server" />  
                    <input type="text" id="city1" name="city1" />
                    <input type="text" id="cityLat1" name="cityLat1" />
                    <input type="text" id="cityLng1" name="cityLng1" />  
           </div>

            <div>
                   <b>Destination B:</b><input id="searchTextFieldDestination" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" />  
                    <input type="text" id="city2" name="city2" />
                    <input type="text" id="cityLat2" name="cityLat2" />
                    <input type="text" id="cityLng2" name="cityLng2" />  
           </div>

            <div>
                   <b>Intermediate point C:</b><input id="searchTextFieldIntermediate" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" />  
                    <input type="text" id="city3" name="city2" />
                    <input type="text" id="cityLat3" name="cityLat3" />
                    <input type="text" id="cityLng3" name="cityLng3" />  
           </div>

            <div id="map" style="width: 700px; height: 600px;"></div>
       </body>
</html>

Below is the snapshot for what I get when I give the above mentioned locations: places api problem

It is not marking the route. What could be the problem?

1条回答
乱世女痞
2楼-- · 2019-06-13 03:37 
var start = $("#city1").val(); is "South End Circle"
var end = $("#city2").val(); is  "Jayanagar 4 Block"

The directions service can't find directions between those two locations.

Perhaps you should use:

var start = place1.formatted_address;
var end = place2.formatted_address;

Which provides the formatted_addresses that your question indicated you were providing to the directions service:

  • South End Circle, Basavanagudi, Bangalore, Karnataka, India
  • Jayanagar 4 Block, Jayanagar, Bangalore, Karnataka, India
  • Tata Silk Farm, Jayanagar, Bangalore, Karnataka, India

The other option would be to use the coordinates of the locations rather than the formatted addresses.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)