Question

我想在谷歌地图上的两个位置之间画线。

对Eg说：伦敦到加拿大

我有两个带自动填充功能的文本框，可以选择绘制线条的位置。

这是我的代码：

<script src="~/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,places&language=en-AU&signed_in=true&v=3.exp"></script>
 <input type="text" class="login" value="" name="source" id="source">
 <input type="text" class="login" value="" name="destination" id="destination">

使用google api自动完成的脚本：

<script>
     var autocomplete = new google.maps.places.Autocomplete(jQuery_1_1_3("#source")[0], {});

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
        });

        var autocomplete1 = new google.maps.places.Autocomplete(jQuery_1_1_3("#destination")[0], {});

        google.maps.event.addListener(autocomplete1, 'place_changed', function () {
            var place = autocomplete1.getPlace();
        });
    </script>

谷歌地图代码在这两个位置之间排列：

function initialize() {
        //alert(s)

            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(-25.363882, 131.044922)
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            map.controls[google.maps.ControlPosition.TOP_CENTER].push(
                document.getElementById('info'));


            marker1 = new google.maps.Marker({
                map: map,
                draggable: true,
                position: new google.maps.LatLng("21.1702401, 72.8310607")
            });

            marker2 = new google.maps.Marker({
                map: map,
                draggable: true,
                position: new google.maps.LatLng("20.9467019, 72.9520348")
            });

            @*marker3 = new google.maps.Marker({
                map: map,
                draggable: true,
                position: new google.maps.LatLng(@Model.RouteName)
            });*@


        var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
            marker2.getPosition());
        map.fitBounds(bounds);

        google.maps.event.addListener(marker1, 'position_changed', update);
        google.maps.event.addListener(marker2, 'position_changed', update);
        //google.maps.event.addListener(marker3, 'position_changed', update);

        var polyOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            map: map,
        };
        poly = new google.maps.Polyline(polyOptions);

        var geodesicOptions = {
            strokeColor: '#CC0099',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            geodesic: true,
            map: map
        };
        geodesicPoly = new google.maps.Polyline(geodesicOptions);

        update();
    }

    function update() {
        var path = [marker1.getPosition(), marker2.getPosition()];
        poly.setPath(path);
        geodesicPoly.setPath(path);
        var heading = google.maps.geometry.spherical.computeHeading(path[0],
            path[1]);
        document.getElementById('heading').value = heading;
        document.getElementById('origin').value = path[0].toString();
        document.getElementById('destination').value = path[1].toString();
    }
    google.maps.event.addDomListener(window, 'load', initialize());

现在，我想点击此按钮显示Google地图：

 function DisplaygoogleMap() {
        var source=$("#source").val();
        var destination=$("#destination").val();
}

现在我正在页面加载上显示我的Google地图并收到此错误：

TypeError ：document.getElementById（...）为null
过多的递归

无法显示谷歌地图并获得递归错误

0 个答案: