0

ユーザーが2つの都市を入力できるようにし、指定された入力の場所を表示するこのコードがあります。しかし、私が欲しいのは、最初の都市から他の都市への方向も示すことです。どうやってするか？

これが私の練習コードです：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQ8OCC8En5vNHod25Ov3Qs5E1v7NPRSsg&sensor=true">
    </script>
    <script type="text/javascript">
        var geocoder;
        var map;
        function initialize1() {

        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 100.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

        function initialize() {
            // add mapOptions here to the values in the input boxes.
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 100.644),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP  
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
            geocoder = new google.maps.Geocoder();
            addAddress(document.getElementById('from').value);
            addAddress(document.getElementById('to').value);
        }

        function addAddress(place) {
            var address = place;
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
    </script>
  </head>
  <body>

    From: <input id="from" type="text" name="From"><br>
    To: <input id="to" type="text" name="To"><br>

    <button type="button" onclick="initialize()">View example (map-simple.html)</button>

    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

ありがとう

ジェイソン

4

3 に答える 3

0

説明：最初に、異なる場所と異なるデータの2つのマーカーを作成しました。次に、マーカーをドラッグした後、アドレスと2つのボタンの開始と終了を示す情報ウィンドウが表示されます。あなたはこの部分までやったと思います。したがって、この後、クリックした開始ボタンまたは終了ボタンに応じて入力される2つのテキストボックスを使用しました。この後、ユーザーが検索ボタンをクリックすると、このテキストボックスの値を使用して、2つのマーカー間の方向が検索されます。または終了.....""テキストボックスに直接アドレスを入力して、それらの間の方向を見つけることもできます"ここで全体の操作のためにgmap3を使用しましたここにあなたを助けるかもしれない以下のコードがあります

<script type="text/javascript">
    window.onload = clear;
    function clear() {
        $("#from").val(null)
        $("#destination").val(null)
    }

    $(document).ready(function () {
        var starting = "";
        var finishing = "";
        $("#find").click(function () {
            starting = $("#from").val();
            finishing = $("#destination").val();
            $("#map").gmap3(
            {
                action: 'getRoute',
                options: {
                    origin: starting,
                    destination: finishing,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                },
                callback: function (results) {
                    if (!results) {
                        alert("returning")
                        return
                    };
                    $(this).gmap3(
                    {
                        action: 'addDirectionsRenderer',
                        options: {
                            preserveViewport: true,
                            draggable: false,
                            directions: results

                        }
                    }
                    );
                }
            })
        })
        $("#map").gmap3({

            action: 'addMarkers',
            markers: [ //markers array
                {lat: 22.74, lng: 83.28, data: 'madhu' },
                { lat: 17.74, lng: 82.28, data: 'raghu' }
            ],
            map: { // this is for map options not for any markers
                center: [17.74, 83.28],
                zoom: 5
            },
            marker: {
                options: {
                    draggable: true
                },

                events: {// marker events
                    dragend: function (marker, event, data) {
                        var contentString = '<div id="main content">'
                            + '<input type="button" id="start" value="start" />'
                            + '<input type="button" id="finish" value="finish" />'
                            + '</div>';
                        //get address on click event
                        $(this).gmap3({
                            action: 'getAddress',
                            latLng: marker.getPosition(),
                            callback: function (results) {
                                var map = $(this).gmap3('get'),
                                infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' })
                                if (infowindow) {
                                    content = results && results[1] ? results && results[1].formatted_address : 'no address';
                                    infowindow.open(map, marker);
                                    infowindow.setContent(content + contentString);
                                }
                                else {
                                    content = results && results[1] ? results && results[1].formatted_address : 'no address';
                                    $(this).gmap3({
                                        action: 'addinfowindow',
                                        anchor: marker,
                                        options: { content: content + contentString },
                                        events: {
                                            domready: function () {
                                                $("#start").click(function () {
                                                    alert("start clicked  " + content);
                                                    $("#from").val(content);
                                                    starting = content; 
                                                    check();
                                                })
                                                $("#finish").click(function () {
                                                    alert("finish clicked  " + content);
                                                    $("#destination").val(content);
                                                    finishing = content;
                                                })
                                            }
                                        }
                                    });
                                }

                            }

                        });
                    },
                }
            },
        });
    });
</script>

これが上記のhtml部分です

 <div id="headinput">
            <input type="text" value="enter from" id="from" />
            <input type="text" value="enter destination" id="destination" />
            <input type="button" value="find" id="find" />
        </div>
        <br />
        <div id ="map"style="width: 100%; top: auto; left: auto; position: relative; height: 600px; float:left" ></div>

これは、Firefoxブラウザでチェックしたもので完全に機能します........：D

于 2012-10-17T08:42:38.080 に答える
0

「場所」とは、以下のような方向レンダラーを使用して方向を取得できるアドレスを意味する場合。IDが#fromと#destinationのtoとfromのアドレスを表示する場合は、まず2つのマーカーの場所のアドレスを2つのテキストボックスに保存し、次のコードに従います。

      $("#find").click(function () {
            starting = $("#from").val();
            finishing = $("#destination").val();
            $("#map").gmap3(
            {
                action: 'getRoute',
                options: {
                    origin: starting,
                    destination: finishing,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                },
                callback: function (results) {
                    if (!results) {
                        alert("returning")
                        return
                    };
                    $(this).gmap3(
                    {
                        action: 'addDirectionsRenderer',
                        options: {
                            preserveViewport: true,
                            draggable: false,
                            directions: results

                        }
                    }
                    );
                }
            })
        })
于 2012-10-17T07:30:37.213 に答える
0

Google MapsAPIv3のDirectionsServiceを使用します。ドキュメントの例を次に示します。

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple

およびテキストの指示付き：

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

于 2012-10-17T13:22:05.287 に答える