谷歌地图导航从用户位置开始
谷歌地图导航从用户位置开始
我有一个网站,客户在网站上有自己的个人资料。他们的个人资料上都有一张地图。当有人浏览他们的个人资料时,我希望他们能够按下这些按钮,通过汽车、公共交通或步行获取路线。\n这些按钮是可用的,并且我可以获取到用户的地理位置。但问题是,出于某种原因,从来没有找到过路线。\nJS代码有什么问题吗?\n
$.get("http://maps.google.no/maps/api/geocode/json?address={{ $company -> forretningsadresse_adresse }}, {{ $company -> forretningsadresse_postnummer }} {{ $company -> forretningsadresse_poststed }}", function(data) { var mapStyle = []; var pos = new google.maps.LatLng(data["results"][0]["geometry"]["location"]["lat"], data["results"][0]["geometry"]["location"]["lng"]); var myOptions = { zoom: 15, center: pos, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: mapStyle, scrollwheel: true }; map = new google.maps.Map(document.getElementById('map'), myOptions); directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); var marker = new google.maps.Marker({ position: pos, map: map, animation: google.maps.Animation.DROP, title: '位置' }); mapsBusinessPosition = pos; }); function initMap(pos) { var directionsDisplay; directionsService = new google.maps.DirectionsService(); var mapStyle = []; var myOptions = { zoom: 15, center: pos, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: mapStyle, scrollwheel: true }; map = new google.maps.Map(document.getElementById('map'), myOptions); directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); var marker = new google.maps.Marker({ position: pos, map: map, animation: google.maps.Animation.DROP, title: '位置' }); mapsBusinessPosition = pos; } function getDirections(mode) { $("#tripDuration").html("加载中..."); var userLocation; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var request = { origin: userLocation, destination: mapsBusinessPosition, travelMode: mode }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); $("#tripDuration").html(result.routes[0].legs[0].duration.text); } else { $("#tripDuration").html("未找到路线"); } }); }, function() { alert("出错了!"); }); } else { alert("出错了!"); } }
\n这是按钮。\n
\n噢,地图乍一看没问题,只是导航方向不起作用。\n那我做错了什么?\n提前谢谢。
Google地图定位问题的原因可能有以下几个:
1. 您的应用程序可能是从file:// URL而不是应用程序服务器运行的。在这种情况下,某些浏览器会阻止navigator.geolocation请求。
2. 您的应用程序可能不是本地主机或HTTPS服务器,并且您使用的是Chrome版本>= 50。从版本50开始,如果不是安全(HTTPS)服务器,Chrome将阻止navigator.geolocation请求。
3. directionsService可能存在问题。检查status以获取信息,并在此处查找可能导致错误的列表。
解决方法:
1. 如果您的应用程序是从file:// URL运行的,请将其部署到应用程序服务器上以解决浏览器阻止navigator.geolocation请求的问题。
2. 如果您的应用程序不是本地主机或HTTPS服务器,请将其部署到HTTPS服务器上以解决Chrome阻止navigator.geolocation请求的问题。
3. 检查directionsService的status,并参考文档中的状态列表,以找出可能导致错误的原因。
此外,根据问题描述,还有一些额外的解决方法:
1. 如果您在桌面计算机上进行测试,并且您的应用程序是为移动设备开发的,那么HTML5地理位置在具有GPS的移动设备上的效果可能更好。
2. 您可以尝试调整HTML地理位置的enableHighAccuracy参数,以获取更高的定位精度。
3. 如果设备无法在超时时间内以高精度找到结果,您可以回退到较低精度,并通知用户,或提示他们自己标记/输入他们的位置。
要解决Google地图定位问题,您可以先检查运行环境和浏览器设置,然后检查directionsService的status,最后根据需要调整HTML地理位置的参数。