0

我有这段代码允许用户输入两个城市，并显示给定输入的位置。但我想要的是展示从第一个城市到另一个城市的方向。怎么做？

这是我的练习代码：

<!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

说明：起初我创建了两个不同位置和不同数据的标记，然后在任何标记的拖动之后都会有显示地址的信息窗口和两个按钮开始和结束。我想你已经完成了这部分。因此，在此之后，我使用了两个文本框，它们将根据单击的开始按钮或完成按钮来填充。在此之后，如果用户单击查找按钮，则此文本框值用于查找两个标记之间的方向注意：“在这里，您可以为 from 或 to 的任何标记，您必须维护的唯一区别是更改单击的按钮即开始或完成......” “你甚至可以直接在文本框中给出地址并找到它们之间的方向” 这里对于整个操作我使用 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 的往返地址，然后按照下面的代码

      $("#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 回答