1

このデモリンク

単一記号の付いたデモ

上記のようにグーグルマップにポイントを表示しています。

パスに沿って移動した距離を計算したいと思います。

始点と終点ではなく、移動経路によって計算されます。

グーグル計算距離でこれを行う方法。

距離計算の例を使用しました

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #map_canvas {
        height: 100%;
    }
</style>
<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3">
</script>
<script type="text/javascript">




    var g = google.maps;
    function initialize() {
        var latlng = new g.LatLng(62.397, 12.644);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: g.MapTypeId.ROADMAP
        };
        var map = new g.Map(document.getElementById("map_canvas"), myOptions);
        registerMapDragHandler(map);
    }

    function registerMapDragHandler(aMap) {

        var map = aMap;

        g.event.addListener(map, 'click', function(event) {
            createLineBeingDragged(map, event.latLng);
        });

        function createLineBeingDragged(map, pos) {
            var line = new g.Polyline({map: map, path: [pos, pos]});
            g.event.addListener(map, 'mousemove', function(event) {
                line.getPath().setAt(1, event.latLng);
            });
            g.event.addListener(line, 'click', function(event) {
                g.event.clearListeners(map, 'mousemove');
                g.event.clearListeners(line, 'click');
                createMarkersForLine(map, line);
            });

            function createMarkersForLine(map, line) {
                var startMarker = createMarker(line, 0);
                var endMarker = createMarker(line, 1);
                startMarker.nextMarker = endMarker;
                endMarker.previousMarker = startMarker;
            }

            function createMarker(line, pathPos) {
                var position = line.getPath().getAt(pathPos);
                var marker = new g.Marker({map: map, position: position, visible: true, flat: true, draggable: true, raiseOnDrag: false});

                // Marker functions
                marker.getPathIndex = function() {
                    if (this.previousMarker != null) {
                        return this.previousMarker.getPathIndex() + 1;
                    } else {
                        return 0;
                    }
                }

                marker.startDrag = function(pos) {
                    if (!marker.previousMarker || !marker.nextMarker) {
                        line.getPath().insertAt(marker.getPathIndex(), pos);
                        var newMarker = createMarker(line, marker.getPathIndex());
                        if (marker.nextMarker) {
                            newMarker.previousMarker = marker;
                            newMarker.nextMarker = marker.nextMarker;
                            newMarker.nextMarker.previousMarker = newMarker;
                            marker.nextMarker = newMarker;
                        } else {
                            newMarker.nextMarker = marker;
                            newMarker.previousMarker = marker.previousMarker;
                            newMarker.previousMarker.nextMarker = newMarker;
                            marker.previousMarker = newMarker;
                        }
                    }
                }

                marker.beingDragged = function() {
                    line.getPath().setAt(marker.getPathIndex(), marker.getPosition());
                }

                // Listeners
                g.event.addListener(marker, 'dragstart', function(event) {
                    marker.startDrag(event.latLng);
                });

                g.event.addListener(marker, 'drag', function(event) {
                    marker.beingDragged();
                });

                g.event.addListener(marker, 'click', function(event) {
                    var length = g.geometry.spherical.computeLength(line.getPath()) / 1000;
                    var infoWindow = new g.InfoWindow(
                    {
                        content: "<ul><li>Line length: " + length.toFixed(2) + " km</li>"+
                                "<li>Latitude: " + marker.getPosition().lat().toFixed(6) + "</li>"+
                                "<li>Longitude: " + marker.getPosition().lng().toFixed(6) + "</ul>"
                    });
                    infoWindow.open(map, marker);
                });

                return marker;
            }
        }
    }
</script>

この例でグーグルライブラリjsを追加すると、複数のグーグルライブラリがロードされているというエラーが表示されます。

このライブラリを含めないと、computeLengthが定義されていないというエラーが発生します。

提供したデモリンクまでの距離を計算する機能を統合したいと思います。

ありがとう

4

1 に答える 1

2

これはあなたが変更したものです

デモへのリンク

以下をhtmlに追加する必要があります

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3">

そしてjavascriptに従う

polyline = new google.maps.Polyline(polylineoptns);
var length = google.maps.geometry.spherical.computeLength(polyline.getPath());
alert(length);

これがうまくいきますように..

于 2013-01-09T10:31:34.003 に答える