Question

我正在尝试将方向服务放到我的地图上，但无法让它工作。这是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);
        }
    });
}

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

在JS函数calcRoute中，如果我使用

警告varr值

alert(request.toSource());

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

一直在寻找解决这个问题的好几个小时，但是无法找出问题所在，即使这与谷歌地图一样简单： - （

如果有人有任何想法，我会非常感激，这让我疯狂！

Answer 1

来自原始海报的评论：

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

Answer 2

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

Google Maps V3 - directionService未定义

2 个答案: