Google Maps V3 - directionService не определено - PullRequest
Новая
       1

Google Maps V3 - directionService не определено

4 голосов
/ 29 октября 2011

Я пытаюсь разместить службу направления на своей карте, но не могу заставить ее работать.Вот 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, если я выдаю значения varr, используя 

alert(request.toSource());

Я получаю все правильные данные(начало, начало и конец), но следующая строка - это ошибка, моя ошибка JS - directionService не определена.

Несколько часов пытался это исправить, но не смог найтив чем проблема, хотя это примерно так же просто, как на карте Google: - (

Если у кого-то возникнут какие-то мысли, я был бы очень рад, это сводит меня с ума!

Ответы [ 2 ]

4 голосов
/ 30 октября 2011

Комментарий от оригинального постера:

Я переместил 3 переменные внутри jquery при условии загрузки страницы наружу, и теперь он работает нормально ... Этот вопрос решен.

1 голос
/ 04 февраля 2015 
<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.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...