使用javascript或django进行地图计算

时间:2013-11-14 15:30:56

标签: javascript google-maps google-maps-api-3 google-maps-markers google-maps-api-2

我可以在地图上选择两个点而不是计算距离,并使用下面的代码查看两个点之间的路径。但是当我在地图上选择第三个点时,我无法计算到第二个点的第三个点距离,或者我无法在地图上看到3和2之间的距离。有人可以帮助我吗?

非常感谢。

守则:

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">

</script>
<body>

<script type="text/javascript">
        var map;
        var split = true;
        var directionsService;
        var directionsRenderer;
        var markersArray = [];

        function initialize() {
            map = new google.maps.Map(document.getElementById("map_canvas"), {
                zoom : 7,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                center : new google.maps.LatLng(-33.868011, -151207566)
            });

            map = new google.maps.Map(document.getElementById("map_canvas"),
                    initialize);
            google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });

            function addMarker(location) {
                marker = new google.maps.Marker({
                    position : location,
                    map : map
                });
                markersArray.push(marker);
            }

            directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);
            directionsRenderer.setPanel(document.getElementById('directions'));

            directionsService = new google.maps.DirectionsService();

            Form = document.forms['harita'];
            YolTarifi(Form.elements['nerden'].value,
                    Form.elements['nereye'].value);

        }

        function YolTarifi(Nerden, Nereye) {
            var request = {
                origin : Nerden,
                destination : Nereye,
                travelMode : google.maps.DirectionsTravelMode.DRIVING,
                unitSystem : google.maps.DirectionsUnitSystem.METRIC
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsRenderer.setDirections(response);
                } else {
                    alert('Yol Tarifi Oluşturulamadı');
                }
            });
        }
    </script>
</body>
</head>
<body onload="initialize()">
    <form name="harita" action="#">
        <table>
            <tr>
                <th align="right">Nerden :</th>
                <td><input type="text" size="25" name="nerden" value="Ankara" /></td>
                <th align="right">Nereye</th>
                <td align="right"><input type="text" size="25" name="nereye"
                    value="İstanbul" /></td>
                <th><input name="submit" type="button"
                    value="Yol Haritasını Göster"
                    onclick="YolTarifi(document.forms['harita'].elements['nerden'].value, document.forms['harita'].elements['nereye'].value)" />
                </th>
            </tr>
        </table>
    </form>
    <br />
    <table class="directions">
        <tr>
            <td valign="top"><div id="directions" style="width: 275px"></div></td>
            <td valign="top"><div id="map_canvas"
                    style="width: 800px; height: 500px"></div></td>
        </tr>
    </table> 
</body>
</html>

0 个答案:

没有答案