logo标签列表

谷歌地图V3 - directionService未定义。

javascriptgoogle-mapsgoogle-maps-api-3
4

我正在尝试将一个方向服务放到我的地图上，但是无法让它工作。以下是HTML代码：

<div>
        <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> &nbsp;&nbsp;&nbsp;
        <span class="bold">To:</span> <input type="text" disabled="disabled" size="<?php echo $address_length;?>" value="<?php echo $address ;?>"/>
        <input id="end" type="hidden" value="<?php echo $latlng ;?>" /><br/><br/>
        <span class="bold">Mode of Travel:</span>
            <select id="mode">
              <option value="DRIVING">Driving</option>
              <option value="WALKING">Walking</option>
              <option value="BICYCLING">Bicycling</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()";/>
    </div><br class="clear" />
    <div class="inline">
        <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;">
            <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript>
        </div>
    </div>
</div>

在页面底部，我有一些内联JavaScript代码。
$(function() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
initialize();
});

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(<?php echo $latlng; ?>);
    var myOptions = {
        zoom:15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
    directionsDisplay.setMap(map);
}
function calcRoute() {
    var selectedMode = document.getElementById("mode").value;
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode[selectedMode]
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
        }
    });
}

您可以看到，latlng是从PHP变量中填充的。一切似乎都正常工作，初始地图加载等。

在JS函数calcRoute中，如果我使用alert输出varr值，则会出现以下情况：

alert(request.toSource());

我获取了所有正确的数据（起点、终点和路径），但是下一行代码出现错误，我的JS报错信息是“directionService未定义”。
我已经花了几个小时来尝试修复这个问题，但是即使这是一个非常简单的谷歌地图应用程序，我仍然找不到问题所在:-(
如果有人有任何想法，我将不胜感激，这让我感到非常烦恼！
1
不用担心，伙计们，我是个白痴！我把这三个变量从 jQuery 的页面加载条件里移到了外面，现在它可以正常工作了……这个问题已经解决。 - Tim Blackburn
2个回答
4

原帖评论：

我把三个变量从jquery页面加载条件里移到外面，现在它可以正常工作了... 问题已解决。

1
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
    directionsDisplay.setMap(map);
}

function calcRoute() 
{
    var selectedMode = document.getElementById("mode").value;
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    google.maps.DirectionsTravelMode.DRIVING

        if(selectedMode=="DRIVING")
        {
            var request = {
            origin: start,
            destination: end,
            travelMode:google.maps.DirectionsTravelMode.DRIVING
            };
        }
        else if(selectedMode=="WALKING")
        {
            var request = {
            origin: start,
            destination: end,
            travelMode:google.maps.DirectionsTravelMode.WALKING
            };
        }
        else if(selectedMode=="BICYCLING")
        {
            var request = {
            origin: start,
            destination: end,
            travelMode:google.maps.DirectionsTravelMode.BICYCLING
            };
        }

        directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div>
        <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> &nbsp;&nbsp;&nbsp;
        <span class="bold">To:</span> <input type="text" id="end" />
        <span class="bold">Mode of Travel:</span>
            <select id="mode">
              <option value="DRIVING">Driving</option>
              <option value="WALKING">Walking</option>
              <option value="BICYCLING">Bicycling</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()"/>
    </div><br class="clear" />
    <div class="inline">
        <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;">
            <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript>
        </div>
    </div>
</div>
</body>
</html>







use this code,it will work fine.
请问您能否在代码中加入一些解释说明呢？与原问题的代码相比，这段代码有何不同之处？它有哪些优势呢？如果没有解释说明，对任何人都不是很有帮助。 - Bowdzone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接