Javascript:获取驾驶距离和时间，并在google地图中显示当前位置？

Question

我使用以下代码获取驾驶距离和时间，并使用javascript在Google地图中显示当前位置。

经纬度和邮政编码等的值来自php/mysql。

一切都很好。

但是，我遇到的问题是，有些东西会阻止javascript代码在同一个页面上一起工作，并且它们只有在单独的页面中才能工作！

基本上，我只能在一个页面中使用一个Javascript代码，如果我在同一页中使用这两种代码，唯一起作用的代码就是驱动距离和时间代码，我不知道为什么。

这里是我的驾驶距离和时间计算代码：

<script>
    (function () {


        var directionsService = new google.maps.DirectionsService(),
            directionsDisplay = new google.maps.DirectionsRenderer(),
            createMap = function (start) {
                var travel = {
                        origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
                        destination : "<?php echo $CUpostCode; ?>",
                        travelMode : google.maps.DirectionsTravelMode.DRIVING
                        // Exchanging DRIVING to WALKING above can prove quite amusing :-)
                    },
                    mapOptions = {
                        zoom: 10,
                        // Default view: downtown Stockholm
                        center : new google.maps.LatLng(59.3325215, 18.0643818),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                map = new google.maps.Map(document.getElementById("map"), mapOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("map-directions"));
                directionsService.route(travel, function(result, status) {
                    if (status === google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(result);
                    }
                });
            };

            // Check for geolocation support    
            if (navigator.geolocation) {



                window.onload = (function (position) {
                        // Success!
                        createMap({
                            coords : true,
                            //lat : position.coords.latitude,
                            //lng : position.coords.longitude


                            lat : <?php echo $curLat; ?>,
                            lng : <?php echo $curLon; ?>
                        });
                    }, 
                    function () {
                        // Gelocation fallback: Defaults to Stockholm, Sweden
                        createMap({
                            coords : true,
                            //lat : position.coords.latitude,
                            //lng : position.coords.longitude


                            lat : <?php echo $curLat; ?>,
                            lng : <?php echo $curLon; ?>
                        });
                    }
                );
            }
            else {
                // No geolocation fallback: Defaults to Lisbon, Portugal
                createMap({
                            coords : true,
                            //lat : position.coords.latitude,
                            //lng : position.coords.longitude


                            lat : <?php echo $curLat; ?>,
                            lng : <?php echo $curLon; ?>
                });


            }
    })();
</script>

，这是在google地图中显示位置的代码：

<script>
    function showCurrentLocation(position)
    {
        var latitude = <?php echo $curLat; ?>;
        var longitude = <?php echo $curLon; ?>;
        var coords2 = new google.maps.LatLng(latitude, longitude);

        var mapOptions2 = {
        zoom: 15,
        center: coords2,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //create the map, and place it in the HTML map div
    map2 = new google.maps.Map(
    document.getElementById("mapPlaceholder"), mapOptions2
    );

    //place the initial marker
    var marker2 = new google.maps.Marker({
    position: coords2,
    map: map2,
    title2: "Current location!"
    });
    }
</script>

我的页眉里有这两行：

<script src="http://maps.google.se/maps/api/js?sensor=false"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

有谁能告诉我，这两个代码之间的冲突是什么使他们无法在同一页上工作？

Answer 1

您还说:我是这样称呼它的: onload="showCurrentLocation()“

您正在覆盖onload事件。相反，使用google.maps.addDomListener可以解决这个问题。

google.maps.event.addDomListener(window,'load',showCurrentLocation);

工作小提琴

工作代码片段：

​

var curLat = 45;
var curLon = -117;

(function () {


    var directionsService = new google.maps.DirectionsService(),
        directionsDisplay = new google.maps.DirectionsRenderer(),
        createMap = function (start) {
            var travel = {
                origin: (start.coords) ? new google.maps.LatLng(start.lat, start.lng) : start.address,
                destination: "07646",
                travelMode: google.maps.DirectionsTravelMode.DRIVING
                // Exchanging DRIVING to WALKING above can prove quite amusing :-)
            },
            mapOptions = {
                zoom: 10,
                // Default view: downtown Stockholm
                center: new google.maps.LatLng(59.3325215, 18.0643818),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map"), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("map-directions"));
            directionsService.route(travel, function (result, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }
            });
        };

    // Check for geolocation support    
    if (navigator.geolocation) {



        window.onload = (function (position) {
            // Success!
            createMap({
                coords: true,
                //lat : position.coords.latitude,
                //lng : position.coords.longitude


                lat: curLat,
                lng: curLon
            });
        },

        function () {
            // Gelocation fallback: Defaults to Stockholm, Sweden
            createMap({
                coords: true,
                //lat : position.coords.latitude,
                //lng : position.coords.longitude


                lat: curLat,
                lng: curLon
            });
        });
    } else {
        // No geolocation fallback: Defaults to Lisbon, Portugal
        createMap({
            coords: true,
            //lat : position.coords.latitude,
            //lng : position.coords.longitude


            lat: curLat,
            lng: curLon
        });


    }
})();

function showCurrentLocation(position) {
    var latitude = curLat;
    var longitude = curLon;
    var coords2 = new google.maps.LatLng(latitude, longitude);

    var mapOptions2 = {
        zoom: 15,
        center: coords2,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //create the map, and place it in the HTML map div
    map2 = new google.maps.Map(
    document.getElementById("mapPlaceholder"), mapOptions2);

    //place the initial marker
    var marker2 = new google.maps.Marker({
        position: coords2,
        map: map2,
        title2: "Current location!"
    });
}
google.maps.event.addDomListener(window,'load',showCurrentLocation);

html, body, #map, #map-directions, #mapPlaceholder {
    height:100%;
    width:100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<table>
    <tr>
        <td>
            <div id="mapPlaceholder" style="height:500px; width:500px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="map" style="height:500px; width:500px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="map-directions"></div>
        </td>
    </tr>
</table>

​