javascript - 距離を計算し、Googleマップの原点からマーカーを移動します

Question

こんにちは、Google V3 API を使用して地図上の 2 つの場所間の距離を表示できる Web アプリケーションを作成しました。他の Web アプリケーションでは、地図上で移動できるアニメーションドロップマーカーを作成しました。これら 2 つをどのように組み合わせることができますか。ここに私のコードがあります:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Direction2.aspx.cs" Inherits="Direction2" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
     <title></title>  
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        function initialize() {
             var latlng = new google.maps.LatLng(51.764696, 5.526042);
             directionsDisplay = new google.maps.DirectionsRenderer();
             var myOptions = {
                 zoom: 14,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 mapTypeControl: false
            };
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "My location"
             });
        }
        function calcRoute() {
            var start = document.getElementById("routeStart").value;
            var end = "51.764696,5.526042";
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
             directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }
</script>
</head>
<body onload="initialize()">

    <div id="map_canvas" style="width:710px; height:300px"></div>  
    <form action="" onsubmit="calcRoute();return false;" id="routeForm">
        <input type="text" id="routeStart" value=""/>
        <input type="submit" value="Route plannen"/>

<div id="directionsPanel"></div>
    </form>
 </body>
</html>

アニメーションには、次のコードを使用します: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Drop.aspx.cs" Inherits="Drop" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drop</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">
            var stockholm = new google.maps.LatLng(59.32522, 18.07002);
            var parliament = new google.maps.LatLng(59.327383, 18.06747);
            var marker;
            var map;

             function initialize() {
                var mapOptions = {
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: stockholm
                };

                 map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: parliament
                });
                 google.maps.event.addListener(marker, 'click', toggleBounce);
        }

             function toggleBounce() {

                 if (marker.getAnimation() != null) {
                     marker.setAnimation(null);
                 } else {
                     marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            }
</script>

</head>
<body onload="initialize()" onunload="Gunload()">
    <form id="form1" runat="server">
     <div id="map_canvas" style="width:525px; height:237px;">
   </div>
 </form>

前もって感謝します

score 4 · Accepted Answer

マーカーを移動するときに出発地または目的地の都市の名前を変更するには、ルート案内の開始座標と終了座標を見つけ、Google ジオコーダーを使用して場所の名前を見つける必要があります。

「directions_changed」イベントをリッスンし、開始と終了の緯度経度を見つける必要があります。

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    var directions = this.getDirections();
    var overview_path = directions.routes[0].overview_path;
    var startingPoint = overview_path[0];
    var destination = overview_path[overview_path.length - 1];
    if (typeof startLatlng === 'undefined' || !startingPoint.equals(startLatlng)) {
        startLatlng = startingPoint;
        getLocationName(startingPoint, function(name) {
            routeStart.value = name;
        });
    }
    if (typeof endLatlng === 'undefined' || !destination.equals(endLatlng)) {
        endLatlng = destination;
        getLocationName(destination, function(name) {
            routeEnd.value = name;
        });
    }
});

マーカーの位置の名前を取得するには、次の関数を使用します (これをすばやくまとめます。さらにテストが必要になります)。

function getLocationName(latlng, callback) {
    geocoder.geocode({location: latlng}, function(result, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var i = -1;
            // find the array index of the last object with the locality type
            for (var c = 0; c < result.length; c++) {
                for (var t = 0; t < result[c].types.length; t++) {
                    if (result[c].types[t].search('locality') > -1) {
                        i = c;
                    }
                }
            }
            var locationName = result[i].address_components[0].long_name;
            callback(locationName);
        }
    });
}

このようにすると、マップに適用されたマップマーカーにクリックイベントを設定できなくなります。つまり、マーカーが跳ねるアニメーションを作成できなくなります。マーカーアニメーションが必要な場合は、ルート案内サービスでマーカーを抑制し、独自のマーカーを表示する必要があります。マーカーがドラッグされると、方向を再計算してから、マーカーの位置で getLocationName 関数を使用する必要があります。

これが動作するデモです。

あなたが望むものにあなたを近づけるのに十分なはずです.

編集ドラッグ時に開始または終了入力ボックスの値を変更するようにコードを更新しました。

マーカードラッグイベントは、わずかな距離をドラッグするだけで何百回も発生するため、多くのジオコードを要求しないようにタイマーを設定する必要があります。

私はここでこれの実用的なデモをまとめました: http://jsfiddle.net/SMEAD/6/

独自のマーカーを使用する必要があったため、DirectionsRenderer を初期化するときに、suppressMarkers オプションを渡す必要があります。

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

一度変更された方向をリッスンし、マーカーを設定するだけで済みます。

google.maps.event.addListenerOnce(directionsDisplay, 'directions_changed', function() {
    var directions = this.getDirections();
    var overview_path = directions.routes[0].overview_path;
    var startingPoint = overview_path[0];
    var destination = overview_path[overview_path.length - 1];
    addMarker(startingPoint, 'start');
    addMarker(destination, 'end');
});

主力機能は addMarker です。これにより、入力ボックスを更新してルートを再計算するために必要なイベントが設定されます。

function addMarker(position, type) {
    var marker = new google.maps.Marker({
        position: position,
        draggable: true,
        animation: google.maps.Animation.DROP,
        map: map
    });

    marker.type = type; // probably not a good idea to do this.

    google.maps.event.addListener(marker, 'drag', function() {
        var marker = this;
        clearTimeout(dragTimer);
        dragTimer = setTimeout(function() {
            getLocationName(marker.getPosition(), function(name) {
                if (marker.type === 'start') {
                    routeStart.value = name;
                } else {
                    endStart.value = name;
                }
            });
        }, 250);
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        calcRoute(startMarker.getPosition(), endMarker.getPosition());
    });

    if (type === 'start') {
        startMarker = marker;
    } else {
        endMarker = marker;
    }
}

javascript - 距離を計算し、Googleマップの原点からマーカーを移動します

1 に答える 1

Related

Reference