Google Places API不会为某些地方标记路线 [英] Google Places API not marking routes for some places
本文介绍了Google Places API不会为某些地方标记路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Google Places API来标记2个地点之间的路线。它对大多数路线都很好。但是，它不是为少数路线标记路线。这是因为directionsService.route请求正在为某些路由返回ZERO_RESULTS状态。下面是它不工作的输入之一。
来源A：
South End Circle，Basavanagudi，Bangalore，印度卡纳塔克邦
目的地B：
Jayanagar 4 Block，Jayanagar，Bangalore，Karnataka，印度
中级点C：
塔塔丝绸农场，Jayanagar，班加罗尔，印度卡纳塔克邦
以下是代码：
< html>
< head>
< style type =text / css>
body {
font-family：sans-serif;
font-size：14px;
}
< / style>
< title> Google Maps JavaScript API v3示例：放置自动填充< / 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&libraries=places,geometrytype =text / javascript> ;< /脚本>
< script type =text / javascript>
var locations = new Array（）;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService（）;
函数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）;
函数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）;
//对于中间点
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（in polyline）;
}
else {
alert（not in折线）;
}
//围绕第一条路线的总览路径的框
/ * var path = result.routes [0] .overview_path;
boxes = rou teBoxer.box（path，0.25）;
drawBoxes（）;
findPlaces（0）; * /
}
}）;
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
函数refreshMap（locations）{
google.maps.visualRefresh = true;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：10，
center：new google.maps.LatLng（locations [0]。纬度，位置[0]。经度），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] .latitude，位置[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>来源A：< / b>< input id =searchTextFieldSourcetype =textsize =50placeholder =在runat =服务器上输入源代码autocomplete = />
< input type =textid =city1name =city1/>
< input type =textid =cityLat1name =cityLat1/>
< input type =textid =cityLng1name =cityLng1/>
< / div>
< div>
< b>目的地B：< / b>< input id =searchTextFieldDestinationtype =textsize =50placeholder =在runat =服务器上输入目的地autocomplete = />
< input type =textid =city2name =city2/>
< input type =textid =cityLat2name =cityLat2/>
< input type =textid =cityLng2name =cityLng2/>
< / div>
< div>
中间点C：< / b>< input id =searchTextFieldIntermediatetype =textsize =50placeholder =输入目的地autocomplete =onrunat =服务器/>
< input type =textid =city3name =city2/>
< input type =textid =cityLat3name =cityLat3/>
< input type =textid =cityLng3name =cityLng3/>
< / div>
< div id =mapstyle =width：700px; height：600px;>< / div>
< / body>
< / html>
下面是我在给出上述位置时得到的快照：
< img src =https://i.stack.imgur.com/4Duvo.pngalt =放置api问题>
它不标记路线。可能是这个问题？
解决方案
var start = $（＃city1） .VAL（）;是南端圈
var end = $（＃city2）。val（）;是Jayanagar 4 Block
路线服务无法在这两个地点之间找到路线。 p>
也许你应该使用：
var start = place1.formatted_address;
var end = place2.formatted_address;
其中提供格式化的地址，表示您向问题服务提供的问题：
- 印度卡纳塔克邦班加罗尔的南端圈，Basavanagudi，印度卡纳塔克邦
- Jayanagar 4 Block，Jayanagar，Bangalore，卡纳塔克邦，印度
- 塔塔丝绸农场，Jayanagar，印度卡纳塔克邦班加罗尔
另一种选择是使用位置的坐标而不是格式化的地址。
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&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?
解决方案
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 Places API不会为某些地方标记路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
