谷歌地圖不加載

谷歌地圖不在當本地主機上運行時加載，但它直接從磁盤運行時工作正常。如何解決這個問題？我想找到源和目標之間的距離和方向。html頁面加載正確，但沒有任何事情發生時點擊獲取路線。谷歌地圖不加載

<DOCTYPE html> 
<head> 
<title></title> 
<style type="text/css"> 
    body 
    { 
     font-family: Arial; 
     font-size: 10pt; 
    } 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false&libraries=places"></script> 
<script type="text/javascript"> 
    var source, destination; 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    google.maps.event.addDomListener(window, 'load', function() { 
     new google.maps.places.SearchBox(document.getElementById('txtSource')); 
     new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
     directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
    }); 

    function GetRoute() { 
     var mumbai = new google.maps.LatLng(18.9750, 72.8258); 
     var mapOptions = { 
      zoom: 7, 
      center: mumbai 
     }; 
     map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
     directionsDisplay.setMap(map); 
     directionsDisplay.setPanel(document.getElementById('dvPanel')); 

     //DIRECTIONS AND ROUTE// 
     source = document.getElementById("txtSource").value; 
     destination = document.getElementById("txtDestination").value; 

     var request = { 
      origin: source, 
      destination: destination, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 

     //DISTANCE AND DURATION// 
     var service = new google.maps.DistanceMatrixService(); 
     service.getDistanceMatrix({ 
      origins: [source], 
      destinations: [destination], 
      travelMode: google.maps.TravelMode.DRIVING, 
      unitSystem: google.maps.UnitSystem.METRIC, 
      avoidHighways: false, 
      avoidTolls: false 
     }, function (response, status) { 
      if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
       var distance = response.rows[0].elements[0].distance.text; 
       var duration = response.rows[0].elements[0].duration.text; 
       var dvDistance = document.getElementById("dvDistance"); 
       dvDistance.innerHTML = ""; 
       dvDistance.innerHTML += "Distance: " + distance + "<br />"; 
       dvDistance.innerHTML += "Duration:" + duration; 

      } else { 
       alert("Unable to find the distance via road."); 
      } 
     }); 
    } 
</script> 
</head> 
<body> 

<table border="0" cellpadding="0" cellspacing="3"> 
    <tr> 
     <td colspan="2"> 
      Source: 
      <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" /> 
      &nbsp; Destination: 
      <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" /> 
      <br /> 
      <input type="button" value="Get Route" onclick="GetRoute()" /> 
      <hr /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <div id="dvDistance"> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div id="dvMap" style="width: 500px; height: 500px"> 
      </div> 
     </td> 
     <td> 
      <div id="dvPanel" style="width: 500px; height: 500px"> 
      </div> 
     </td> 
    </tr> 
</table> 
<br /> 
</body> 
</html> 



`

來源

2017-04-04 sree

你是什麼意思 '不加載'？瀏覽器的控制檯說什麼？ – creimers

問題：你必須在這裏增加谷歌地圖API密鑰來訪問谷歌地圖。

解決方案：：這是與我的api鍵一起工作，請生成你自己的並替換爲我的。

請參見指令：Get your api key here!!

<DOCTYPE html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false&libraries=places"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBgeepqF19Lq0I2jhEWj88uafs55jmnFso&libraries=places&callback=GetRoute" async defer></script> 

    <script type="text/javascript"> 
     var source, destination; 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     google.maps.event.addDomListener(window, 'load', function() { 
      new google.maps.places.SearchBox(document.getElementById('txtSource')); 
      new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
      directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
     }); 

     function GetRoute() { 
      var mumbai = new google.maps.LatLng(18.9750, 72.8258); 
      var mapOptions = { 
       zoom: 7, 
       center: mumbai 
      }; 
      map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('dvPanel')); 

      //DIRECTIONS AND ROUTE// 
      source = document.getElementById("txtSource").value; 
      destination = document.getElementById("txtDestination").value; 

      var request = { 
       origin: source, 
       destination: destination, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function (response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 

      //DISTANCE AND DURATION// 
      var service = new google.maps.DistanceMatrixService(); 
      service.getDistanceMatrix({ 
       origins: [source], 
       destinations: [destination], 
       travelMode: google.maps.TravelMode.DRIVING, 
       unitSystem: google.maps.UnitSystem.METRIC, 
       avoidHighways: false, 
       avoidTolls: false 
      }, function (response, status) { 
       if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
        var distance = response.rows[0].elements[0].distance.text; 
        var duration = response.rows[0].elements[0].duration.text; 
        var dvDistance = document.getElementById("dvDistance"); 
        dvDistance.innerHTML = ""; 
        dvDistance.innerHTML += "Distance: " + distance + "<br />"; 
        dvDistance.innerHTML += "Duration:" + duration; 

       } else { 
        alert("Unable to find the distance via road."); 
       } 
      }); 
     } 
    </script> 
    </head> 
    <body> 

    <table border="0" cellpadding="0" cellspacing="3"> 
     <tr> 
      <td colspan="2"> 
       Source: 
       <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" /> 
       &nbsp; Destination: 
       <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" /> 
       <br /> 
       <input type="button" value="Get Route" onclick="GetRoute()" /> 
       <hr /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <div id="dvDistance"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div id="dvMap" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
      <td> 
       <div id="dvPanel" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <br /> 
    </body> 
    </html>

來源

2017-04-04 22:05:51

thanku ...問題現在解決了。 – sree

谷歌地圖不加載

回答

相關問題