Question

它在codepen上工作得很好但是当我将它下载到我的电脑时，它不起作用。我试图弄清楚这几个小时，它可能是它在codepen上运行但不在我的计算机浏览器上的原因？我知道我做的事情非常愚蠢，我没有意识到。我工作的所有其他谷歌地图代码都很好

    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>

  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }


      #panel {
        position: absolute;
        top: 5px;
        left: 40%;
        margin-left: -180px;
        z-index: 5;
        background-color: #ffb052;
        padding: 5px;
        border: 1px solid #999;
        color: #444;
        font-family: Arial;
      }
  </style>
</head>

<body>

<div id="panel">
    <b>Start (A): </b>

    <input id="start" onchange="calcRoute();" />

    <b>End (B): </b>
    <select id="end" onchange="">


      <option value="sydney, AU">Sydney</option>
      <option value="melbourne, AU">Melbourne</option>
      <option value="-33.751873,150.698227">Penrith</option>

    </select>
    <input type="button" onclick="calcRoute();" />
    <b>Distance:</b> <span id='total'></span>
    </div>
    <div id="map-canvas"></div>


    <script>
    var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

// Sites
var penrith = new google.maps.LatLng(-33.751873,150.698227);
var charlestown = new google.maps.LatLng(-32.963991,151.694228);










function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var australia = new google.maps.LatLng(-25.274398, 133.775136);
  var mapOptions = {
    zoom:4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: australia
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



    var penrithMarker = new google.maps.Marker({
      position: penrith,
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=..|fb8d32|000000',
      title: 'Penrith Club'
      });


    var charlestownMarker = new google.maps.Marker({
      position: charlestown,
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=..|fb8d32|000000',
      title: 'Charlestown Club'
      });




  directionsDisplay.setMap(map);
  // Enables Distance Calc
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
  });



}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}


function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.
  document.getElementById("total").innerHTML = total + " km";
}


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

    </script>

</body>

Answer 1

我希望这有效，只有副本和粘贴，欢呼。

<html>
   <head>
      <style>
         html, body, #map-canvas {
         height: 100%;
         margin: 0px;
         padding: 0px
         }
         #panel {
         position: absolute;
         top: 5px;
         left: 40%;
         margin-left: -180px;
         z-index: 5;
         background-color: #ffb052;
         padding: 5px;
         border: 1px solid #999;
         color: #444;
         font-family: Arial;
         }
      </style>
   </head>
   <body>
      <div id="panel">
         <b>Start (A): </b>
         <b>End (B): </b>
         <select id="end" onchange="calcRoute();">
            <option value="47.2970596,11.51218330000006">Absam</option>
            <option value="47.52602899999999,11.706817199999932">Achenkirch</option>
            <option value="47.31316,10.998730000000023">Affenhausen </option>
            <option value="47.3990938,11.943168199999946">Alpbach</option>
            <option value="47.2624249,11.462091200000032">Ampass</option>
            <option value="47.20705,10.761870000000044">Arzl im Pitztal
            </option>
            <option value="47.26660109999999,11.895328199999994">Aschau im Zillertal
            </option>
            <option value="47.3112528,11.198198899999966">Auland bei Seelfeld
            </option>
            <option value="47.19569,11.302649999999971">Axamer Lizum</option>
            <option value="47.2303585,11.279548999999975">Axams</option>
            <option value="47.5108796,12.118506600000046">Bad Haring
            </option>
            <option value="47.2970596,11.51218330000006">Bad Tölz über Garmisch</option>
            <option value="47.30548899999999,10.962690000000066">Barwies</option>
            <option value="47.3001526,11.563272299999994">Baumkirchen</option>
            <option value="47.40969,10.748219899999981">Berwang</option>
            <option value="47.15991,9.808210000000031">Bludenz</option>
            <option value="46.7340955,11.288801499999977">Bozen</option>
            <option value="47.50075,9.742309999999975">Bregenz</option>
            <option value="47.1525,15.046010000000024">Breitenbach</option>
            <option value="47.0094541,11.509094199999936">Brenner
            </option>
         </select>
         <button type="button" onclick="calcRoute();">Calculate</button>
         <b>Distance:</b> <span id='total'></span>
      </div>
      <div id="map-canvas"></div>
      <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
      <script type="text/javascript">
         var directionsDisplay;
         var directionsService = new google.maps.DirectionsService();
         var map;
         
         // Sites
         var penrith = new google.maps.LatLng(-33.751873,150.698227);
         var charlestown = new google.maps.LatLng(-32.963991,151.694228);
         
         function initialize() {
         directionsDisplay = new google.maps.DirectionsRenderer();
         var australia = new google.maps.LatLng(47.2692124,11.404102400000056);
         var mapOptions = {
         zoom:4,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         center: australia
         };
         map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
         
         directionsDisplay.setMap(map);
         // Enables Distance Calc
         google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
         computeTotalDistance(directionsDisplay.directions);
         });
         
         }
         
         function calcRoute() {
         var pointA = new google.maps.LatLng(47.257372,11.350713000000042);
         var end = document.getElementById('end').value;
         var request = {
         origin:pointA,
         destination:end,
         travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
         directionsService.route(request, function(response, status) {
         if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
         }
         });
         }
         
         function computeTotalDistance(result) {
         var total = 0;
         var myroute = result.routes[0];
         for (i = 0; i < myroute.legs.length; i++) {
         total += myroute.legs[i].distance.value;
         }
         total = total / 1000;
         document.getElementById("total").innerHTML = total + " km";
         }
         google.maps.event.addDomListener(window, 'load', initialize);
      </script>
   </body>
   <html>

我正在使用codepen上的Google地图代码

1 个答案: