1

下面的代码仅显示它不加载地图的 div 部分可以帮助提前感谢

我参考了以下页面： https ://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
    <script type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionService();
        var map;
        var haight = new google.maps.LatLng(19.20,21.02);
        var oceanBeach = new google.maps.LatLng(14.22,18.22);
        function initialize(){
            directionDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
              zoom: 5,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: haight
            };
            map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);
            directionsDisplay.setMap(map);
        }
        function calcRoute(){
            var selectMode = document.getElementById('mode').value;
            var request = {
              origing: haight,
              destination: oceanBeach,
              travelMode: google.maps.TravelMode[selectedMode]
            };
            directionsService.route(request, function(response, status){
                if( status === google.maps.setDirectionsStatus.OK){
                    directionsDisplay.setDirections(response);
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
    <div>
        <strong>Mode of Travel</strong>
        <select id="mode" onchange="calcRoute();">
            <option value="DRIVING">DRIVING</option>
            <option value="WALKING">WALKING</option>
            <option value="BICYCLING">BICYCLING</option>
            <option value="TRANSIT">TRANSIT</option>
        </select>
    </div>
     <div id="googleMap" style="width:800px;height:600px; left: 200px; top: 50px "/>                     </body>
     </html>
4

0 回答 0