2

我有一个包含地图的内容，但它不会出现。我正在使用 jquery mobile 并在 localhost 上运行它。我已经尝试重新加载它几次，但仍然无法正常工作。我卡住了。

所以，这是代码：

    <link rel="stylesheet" href="<?php echo base_url('assets/jquerymobile/jquery.mobile.structure-1.2.0.css'); ?>" />
<link rel="stylesheet" href="<?php echo base_url('assets/jquerymobile/jquery.mobile-1.2.0.css'); ?>" />
<link rel="stylesheet" href="<?php echo base_url('assets/jquerymobile/jquery.mobile.theme-1.2.0.css'); ?>" />
<link rel="stylesheet" href="<?php echo base_url('assets/mobileicon/original/jqm-icon-pack-2.0-original.css'); ?>" />
<link rel="stylesheet" href="<?php echo base_url('assets/mobileicon/original/jqm-icon-pack-1.1.1-original.css'); ?>" />

<script src="<?php echo base_url('assets/jquerymobile/jquery-latest.js'); ?>"></script>
<script src="<?php echo base_url('assets/jquerymobile/jquery.mobile-1.2.0.js'); ?>"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5ICf5NxYQl_Rh4sjBZ2RRtEYEghzWBn4&sensor=true"></script>

<script type="text/javascript">

    var directionDisplay;

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

    function initialize(){
        var latlng= new gogle.maps.LatLng(-6.907341,107.608337);

        //set direction render options
        var rendererOptions= {draggable: true};
        directionsDisplay= new google.maps.DirectionsRenderer(rendererOptions);

        var myOptions={
            zoom: 13,
            center: latng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false;
        }

        //add the map to the map placeholder

        var map= new.google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById(directionsPanel""));

        //add map to the map placeholder
        var map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));

        //add marker for end-point
        var marker = new google.maps.Marker({
            position: latlng;
            map: map;
            title: "Bandung, Indonesia";
        })
    }

    function calcRoute(){
        //travel mode
        var travelMode= $('input[name="travelMode"]:checked').val();
        var start= $("#from").val();
        var via= $("#to").val();

        if(travelMode=='TRANSIT'){
            via= '';
        }

        var end= "51.764696,5.526042";
        var waypoints= [];
        if(via != ''){
            waypoints.push({location: via, stopover: true});
        }

        var request= {
            origin: start,
            destination: end,
            waypoints: waypoints,
            unitSystem: google.maps.UnitSystem.IMPERIAL,
            travelMode: google.maps.DirectionsTravelMode[travelMode]
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                $('#directionsPanel').empty(); // clear the directions panel before adding new directions
                directionsDisplay.setDirections(response);
            } else {
                // alert an error message when the route could nog be calculated.
                if (status == 'ZERO_RESULTS') {
                    alert('No route could be found between the origin and destination.');
                } else if (status == 'UNKNOWN_ERROR') {
                    alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
                } else if (status == 'REQUEST_DENIED') {
                    alert('This webpage is not allowed to use the directions service.');
                } else if (status == 'OVER_QUERY_LIMIT') {
                    alert('The webpage has gone over the requests limit in too short a period of time.');
                } else if (status == 'NOT_FOUND') {
                    alert('At least one of the origin, destination, or waypoints could not be geocoded.');
                } else if (status == 'INVALID_REQUEST') {
                    alert('The DirectionsRequest provided was invalid.');         
                } else {
                    alert("There was an unknown error in your request. Requeststatus: nn"+status);
                }
            }

        });
    }


</script>

我穿上onload= initialize()了身体。函数 calcRoute 已启用，但仍无法正常工作。

HTML 代码：

<div data-role="content" id="directions_map">
    <div id="map_canvas" style="width:100%; height:300px"></div>
</div>

<div data-role="content" id="directions_map">
<form action="transportation.html" onSubmit="calcRoute();return false;" id="routeForm">
    <div>
        <div data-role="fieldcontain">
            <input type="text" name="from" id="from" placeholder="From" maxlength="300" style="width:100%;" data-mini="true"/>
        </div>
        <div data-role="fieldcontain">
            <input type="text" name="to" id="to" placeholder="To" maxlength="300" style="width:100%;" data-mini="true"/>        
        </div>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-mini="true">
            <legend><b style="font-family: Georgia; margin-left: 4px;">Travel Mode:</b></legend>
                <input type="radio" name="travelMode"  id="rchoice1" value="DRIVING" checked="checked" />
                <label for="rchoice1">Driving</label>

                <input type="radio" name="travelMode" id="rchoice2" value="BICYCLING"  />
                <label for="rchoice2">Cycling</label>

                <input type="radio" name="travelMode" id="rchoice3" value="TRANSIT"  />
                <label for="rchoice3">Public transport</label>

                <input type="radio" name="travelMode" id="rchoice4" value="WALKING"  />
                <label for="rchoice4">Walking</label>
            </fieldset>
        </div>

        <div data-role="fieldcontain">      
            <input type="submit" name="submit" data-theme="c" data-mini="true" value="Get directions"/>
        </div>

    </div>
</form>
</div>

请帮助我任何人。谢谢

4

0 回答 0