Question

我有这个网站，客户有自己的个人资料。他们每个人的个人资料都有一张地图。当有人正在查看他们的个人资料时，我希望他们能够按下theese按钮并通过汽车，公共交通或步行来获取路线。

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

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>

哦，乍看之下地图工作正常，只有方向不行。

那我该怎么办？

提前致谢。

Answer 1

你的例子适合我。要找出可能导致问题的原因，请尝试记录以下错误：

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控制台输出。这可能会为您提供更多线索。

从我的头脑中，有一些可能导致问题的事情。

您没有从应用程序服务器运行应用程序，而是从file：// url运行。在这种情况下，某些浏览器会阻止navigator.geolocation个请求。有关详情，请参阅this SO question
您正在运行既不是本地主机也不是HTTPS服务器的应用程序，并且您使用的是Chrome版本＆gt; = 50.自版本50以来Chrome开始阻止navigator.geolocation请求，如果不安全（HTTPS）服务器，则更多关于此{ {3}}。
directionsService存在问题。请检查status以获取相关信息和状态列表here，以了解可能导致错误的原因。

Google会映射用户位置

1 个答案: