Google Places API not marking routes for some plac

2019-06-13 03:47发布

站内文章 / 前端开发
54 0 0

问题:

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:

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

回答1:

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.



标签： google-maps google-maps-api-3 google-places-api
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~