Question

我正在使用Google JSv3和Maps Engine图层来加载我的数据。我想在我的地图应用程序上使用路线服务，我使用下面的代码给它一个镜头。但它没有显示方向。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#control {
    width: 100%;
    position: absolute;
    top: 0px;
}

#control input {
    width: 15%;
    max-width: 200px;
}


#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

#directions-panel {
    height: 100%;
    float: right;
    width: 390px;
    overflow: auto;
}

#map-canvas {
    margin-right: 400px;
}

@media print {
    #map-canvas {
        height: 500px;
        margin: 0;
    }

    #directions-panel {
        float: none;
        width: auto;
    }
}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=A##################&sensor=true">
    </script>
    <script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?libraries=visualization&key=#################">
    </script>
    <script type="text/javascript">
var my_LAT = 42;
var my_LONG = -99;
var directionsRenderer;
var directionsService;
function initialize() {

  directionsService = new google.maps.DirectionsService();
    assertNonNull(directionsService, "directionsService");

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(my_LAT, my_LONG),
        };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var directionsPanel = document.getElementById('directions-panel');

  var directionsOptions = {
          map: map,
          panel: directionsPanel
        };
    assertNonNull(directionsOptions, "directionsOptions");

    directionsRenderer = new google.maps.DirectionsRenderer(directionsOptions);
    assertNonNull(directionsRenderer, "directionsRenderer");


   var mapsLayer = new google.maps.visualization.MapsEngineLayer({
     mapId: '13146737986395928398-',
     layerKey: 'layer_00001',
     map: map,
     suppressInfoWindows: false,
     clickable: true

    });

  var mapsLayer2 = new google.maps.visualization.MapsEngineLayer({
     mapId: '13146737986395928398-',
     layerKey: 'layer_00002',
     map: map,
     suppressInfoWindows: false,
     clickable: true

    });


function calcRoute() {
      var start = document.getElementById('Start').value;
      var end = document.getElementById('End').value;

    // Initialize request, a DirectionsRequest object

    var request = {
      origin: start,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
    };
    assertNonNull(request, "request");

    // Issue a directions search request.

    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsRenderer.setDirections(result);
        }
    });
}  

    // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Your Geo-Location',
        maxWidth: 200


      });

       var marker = new google.maps.Marker({
    position: pos,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 5,

    },
    draggable: true,
    map: map
  });
  //Uncomment the function below if you want to change the center to the user's location
      //map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

}
  //Initialize ends


      function assertNonNull(object, name) {
    assert(object !== null, name + " is null. Initialize it!");
}

function assert(condition, message) {
    message = message || "Assertion failed!";
    if (!condition) {
        alert(message);
        throw message;
    }
}  



google.maps.event.addDomListener(window, 'load', initialize);
initialize();
document.getElementById("directions-button").onclick = calcRoute;


    </script>
  </head>
  <body>

 <div id="directions-panel"></div>
<div id="map-canvas"></div>
<div id="control">
    <input id="start" type="textbox" value="" placeholder="Start"/>
    <input id="end" type="textbox" value="" placeholder="End"/>
    <input id="directions-button" type="button" value="Get Directions"/>
</div>
  </body>
</html>

Answer 1

我的代码calcRoute中的javascript错误未定义，然后HTML ID区分大小写：“start”与“Start”不同，“end”与“End”不同。此外，您正在调用两次初始化。

working fiddle（没有地图引擎层，因为那些似乎无法访问）

var my_LAT = 42;
var my_LONG = -99;
var directionsRenderer;
var directionsService;

function initialize() {

    directionsService = new google.maps.DirectionsService();
    assertNonNull(directionsService, "directionsService");

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(my_LAT, my_LONG)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var directionsPanel = document.getElementById('directions-panel');

    var directionsOptions = {
        map: map,
        panel: directionsPanel
    };
    assertNonNull(directionsOptions, "directionsOptions");

    directionsRenderer = new google.maps.DirectionsRenderer(directionsOptions);
    assertNonNull(directionsRenderer, "directionsRenderer");


    var mapsLayer = new google.maps.visualization.MapsEngineLayer({
        mapId: '13146737986395928398-',
        layerKey: 'layer_00001',
        map: map,
        suppressInfoWindows: false,
        clickable: true

    });

    var mapsLayer2 = new google.maps.visualization.MapsEngineLayer({
        mapId: '13146737986395928398-',
        layerKey: 'layer_00002',
        map: map,
        suppressInfoWindows: false,
        clickable: true

    });



    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Your Geo-Location',
                maxWidth: 200


            });

            var marker = new google.maps.Marker({
                position: pos,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5
                },
                draggable: true,
                map: map
            });
            //Uncomment the function below if you want to change the center to the user's location
            //map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

}

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;

    // Initialize request, a DirectionsRequest object

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    assertNonNull(request, "request");

    // Issue a directions search request.

    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(result);
        }
    });
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }
    document.getElementById("directions-button").onclick = calcRoute;
}
//Initialize ends


function assertNonNull(object, name) {
    assert(object !== null, name + " is null. Initialize it!");
}

function assert(condition, message) {
    message = message || "Assertion failed!";
    if (!condition) {
        alert(message);
        throw message;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

Google Maps APIv3路线服务

1 个答案: