谷歌地图API的方向服务;不起作用
Directions Service of Google Maps API doesn't work
你知道为什么我的谷歌地图API方向服务不起作用吗?方法directionsService.route((似乎没有执行(因为没有显示状态警报(,但我不知道为什么。我是谷歌地图API和JS的新手,所以如果是简单的事情,请尽量宽容。:(
var map = null;
var pos = null;
const STORED_LOC = new google.maps.LatLng(50.405196, 11.894855);
var currentLat = document.getElementById("latLabel");
var currentLng = document.getElementById("lngLabel");
var additionalInfo = document.getElementById("additionalInfo");
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize()
{
pos = STORED_LOC;
currentLat.innerHTML = pos.lat();
currentLng.innerHTML = pos.lng();
options =
{
center: pos,
zoom: 15
}
marker = new google.maps.Marker(
{
position: pos,
map: map,
title: "Chosen localization"
}
);
map = new google.maps.Map(document.getElementById("mapContainer"), options);
marker.setMap(map);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
}
$("#yes").click(function () {
getPosition();
hideUserConsentSection();
});
$("#no").click(function () {
hideUserConsentSection();
showSetCustomLocationSection();
});
function showSetCustomLocationSection() {
$("#setCustomLocationSection").show();
}
function hideUserConsentSection() {
$("#userConsentSection").hide();
}
function getPosition() {
if (navigator.geolocation) {
var options = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 2000
}
navigator.geolocation.getCurrentPosition(showPosition, errorPosition, options);
}
else
{
additionalInfo.innerHTML += "Your browser doesn't support geolocation";
}
}
function showPosition(position) {
pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
currentLat.innerHTML = pos.lat();
currentLng.innerHTML = pos.lng();
var request =
{
origin: STORED_LOC,
destination: pos,
travelmode: google.maps.TravelMode.DRIVING
}
directionsService.route(request, function(result, status)
{
alert(status);
if (status == google.maps.DirectionsStatus.OK)
{
alert("OKAY");
directionsDisplay.setDirections(result);
}
});
//map = new google.maps.Map(document.getElementById("mapContainer"), options);
//marker.setMap(map);
}
function errorPosition(position) {
switch (position.code) {
case 1:
showSetCustomLocationSection();
break;
case 2:
showSetCustomLocationSection();
break;
case 3:
showSetCustomLocationSection();
break;
default:
break;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
我的HTML是这样的:
<h3>How to reach us?</h3>
<div id="userConsentSection">Can we use your geolocation?<br />
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" /><br /><br />
</div>
<div id="setCustomLocationSection" style="display:none">
Enter your geolocation. <br /><br />
<input type="text" id="customLocation" />
<input type="button" id="setCustomLocationButton" value="Show" /><br /><br />
</div>
<span>Latitude: </span>
<div id="latLabel">
</div>
<span>Longitude: </span>
<div id="lngLabel">
</div>
<div id="additionalInfo">
</div>
<div id="mapContainer" style="height: 400px; width: 100%">
</div>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXX&sensor=true">
</script>
请求对象中的答案是打字错误的-travelmode而不是travelmode。此参数是必需的,因此不会执行result-route方法。小心这个名字!
相关文章:
- 监视函数从服务返回不起作用,但作用域函数起作用
- 角度控制器服务承诺不起作用
- 为什么从 Angular 服务中的对象中删除此元素不起作用
- 对SOAP服务的Preflight OPTIONS请求不起作用
- http的自定义服务不起作用
- AngularJs 简单的自定义服务不起作用
- 静态内容服务在快递中不起作用
- 为什么Angular的$http.get服务不起作用
- 移动 Web 服务不起作用
- 为什么当服务注入第二个控制器时,AngularJS 1.4.8 应用程序不起作用
- Firefox Addon Builder首选项-服务对我不起作用--为什么
- 从本地文件获取JSON的角度服务不起作用
- 角度模态>Ctrl+gt;服务>Ctrl继承不起作用
- Angular ui路由器在服务中保存到状态名称不起作用
- Angular Toast在我的服务中不起作用
- Azure移动服务javascript SDK在Firefox中不起作用
- 方法POST在向REST服务发送请求时不起作用
- Javascript web服务请求不起作用
- 在AngularJS服务中显示模块模式的Javascript不起作用
- 谷歌地图API的方向服务;不起作用