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);

working fiddle

工作代码段：

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>

Javascript：获取驾驶距离和时间并在谷歌地图中显示当前位置？

1 个答案: