Javascript Google Maps V3-未定义directionService_Javascript_Google Maps_Google Maps Api 3

Javascript Google Maps V3-未定义directionService

javascript google-maps google-maps-api-3

Javascript Google Maps V3-未定义directionService,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正试着在我的地图上设置一个方向服务，但无法让它工作。以下是html： <div> <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" />     <span class="bold">To:</span> <

我正试着在我的地图上设置一个方向服务，但无法让它工作。以下是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>

我正在获取所有正确的数据（origin、start和end），但下一行是失败的，我的JS错误是“directionService未定义”

我们花了几个小时试图解决这个问题，但无法找出问题所在，尽管这就像谷歌地图一样简单：-(

如果有人认为我真的很棒，这简直让我发疯了！

原始海报的评论：

我将页面加载条件下jquery中的3个变量移到了外部，现在工作正常了……这个问题解决了


var方向显示；
var directionsService=new google.maps.directionsService（）；
函数初始化（）
{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变异性肌肽=
{
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapDiv”），myOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）
{
var selectedMode=document.getElementById（“模式”）.value；
var start=document.getElementById（“start”）.value；
var end=document.getElementById（“end”）.value；
google.maps.DirectionsTravelMode.DRIVING
如果（selectedMode==“驱动”）
{
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
}
else if（selectedMode==“行走”）
{
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.WALKING
};
}
else if（selectedMode==“骑自行车”）
{
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.BICYCLING
};
}
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
发件人：
致：
旅行方式：
驱动
行走
骑自行车

别担心，伙计们，我是个白痴！我将页面加载条件下jquery中的3个变量移到了外部，现在可以正常工作了……这个问题已经解决了。请您对代码进行解释好吗？与原始问题的代码有什么不同？它有什么优点？没有它对任何人都没有帮助。

$(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);
        }
    });
}

alert(request.toSource());

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