Javascript 谷歌从用户位置映射方向

我有一个网站，客户有自己的个人资料。他们每个人的个人资料上都有一张地图。当有人查看他们的个人资料时，我希望他们能够按下这些按钮，并通过汽车、公交或步行获得方向

按钮起作用，我得到用户的地理位置。但问题是，由于某种原因，从来没有找到一条路线

JS代码有什么问题吗

$.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: 'Posisjon'
            });

            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: 'Posisjon'
            });

            mapsBusinessPosition = pos;
        }

        function getDirections(mode) {

            $("#tripDuration").html("Laster...");

            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("Fant ingen rute");
                        }
                    });
                }, function() {
                    alert("Argh!");
                });

            }

            else {
                alert("Argh!");
            }

        }

这是按钮

<div class="directions">
    <img src="img/transit.png" alt="transit" onclick="getDirections(google.maps.TravelMode.TRANSIT);"/>
    <img src="img/car.png" alt="car" onclick="getDirections(google.maps.TravelMode.DRIVING);"/>
    <img src="img/walking.png" alt="walking" onclick="getDirections(google.maps.TravelMode.WALKING);"/>
    <span id="tripDuration"></span>
</div>

哦，这些地图乍一看很好用，只是方向不起作用

那么我做错了什么

---

提前谢谢。

你的例子对我很有用。要找出可能导致您出现问题的原因，请尝试记录以下错误：

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 {
                        console.log(status); //Error of Google Maps Directions Service
                        $("#tripDuration").html("Fant ingen rute");
                    }
                });
            }, function(error) { //HERE!!
                console.log(error); //Error of HTML5 geolocation API
            });

}else {
  console.log('Your browser does not support geolocation API'); //HERE!!!
}

并观察javascript控制台的输出。这可能会给你更多的线索

在我看来，有两件事可能会导致这个问题

您不是从application server运行应用程序，而是从文件：//url运行应用程序。在这种情况下，某些浏览器正在阻止navigator.geolocation请求。更多关于这方面的信息，请访问 您正在运行既不是本地主机也不是HTTPS服务器的应用程序，并且您使用的是Chrome版本>=50。由于50版Chrome开始阻止navigator.geolocation请求，如果HTTPS服务器不安全，请提供更多信息。 DirectionService存在一些问题。检查status以获取信息和状态列表，找出可能导致错误的原因。

---

嗯，我的成绩是零。但这是错误的。当我进入maps.google.com并输入从挪威的亨里克·隆兹2900号门到挪威的TveitanVegen523946号波斯格伦的方向时，我得到了方向。配置文件上的地址完全相同，结果为零。我还可以验证起点和终点是不同的纬度。在代码中输入纬度经度坐标作为起点位置，而不是地址，与终点相同。因此，尝试使用maps.google.com上的地址无助于调试。此外，与其他类型的交通工具相比，交通工具更容易返回零度结果，您是否尝试过驾驶或步行？尝试console.logrequest.origin.toString、request.destination.toString；在发出directionsService.route请求之前，将这些坐标作为起点和终点放在maps.google.com上，看看它是否找到了路线。不应该，好吧，我想我找到问题了。我自己的位置LAT，LNG位于海的中部，但实际上，我住在希尔克内斯挪威的顶部海岸。这可能就是问题所在。HTML5地理定位在带有GPS的移动设备上比台式计算机工作得更好，因此，如果您在桌面上进行测试，并且您的应用程序是针对移动设备的，那么您很可能会在移动设备上获得更好的结果。此外，您还可以使用HTML地理位置的EnableHighAccurance参数，更多信息请参见：。如果设备无法在超时时高精度地找到结果，您可以返回lower并通知用户，或提示他们自己标记/输入位置。