使用JavaScript指向Google Map API

Question

 //For TextBox Search.............. google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('txtFrom')); google.maps.event.addListener(places, 'place_changed', function () { var place = places.getPlace(); }); var places1 = new google.maps.places.Autocomplete(document.getElementById('txtTo')); google.maps.event.addListener(places1, 'place_changed', function () { var place1 = places1.getPlace(); }); }); function calculateRoute(rootfrom, rootto) { // Center initialized to Naples, Italy var myOptions = { zoom: 10, center: new google.maps.LatLng(40.84, 14.25), mapTypeId: google.maps.MapTypeId.ROADMAP }; // Draw the map var mapObject = new google.maps.Map(document.getElementById("DivMap"), myOptions); var directionsService = new google.maps.DirectionsService(); var directionsRequest = { origin: rootfrom, destination: rootto, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC }; directionsService.route( directionsRequest, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { new google.maps.DirectionsRenderer({ map: mapObject, directions: response }); } else $("#lblError").append("Unable To Find Root"); } ); } $(document).ready(function () { // If the browser supports the Geolocation API if (typeof navigator.geolocation == "undefined") { $("#lblError").text("Your browser doesn't support the Geolocation API"); return; } $("#calculate-route").submit(function (event) { event.preventDefault(); calculateRoute($("#txtFrom").val(), $("#txtTo").val()); }); }); 

 #DivMap { border: 1px solid Black; width: 500px; height: 400px; margin-top: 30px; margin-left: 32%; } 

 <!--<script src="http://maps.google.com/maps/api/js?sensor=true"></script> REMOVED --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <div style="font-size: 30px; margin: 15px; padding: 15px;"> Get Direction In Google Map</div> <hr /> <br /> <div> <label for="txtFrom"> Root From:</label> <input type="text" id="txtFrom" name="txtFrom" required="required" placeholder="Location From" size="40" /> &nbsp; &nbsp; &nbsp; <label for="txtTo"> Root To:</label> <input type="text" id="txtTo" name="txtTo" required="required" placeholder="Location To" size="40" /> <br /> <br /> <input type="submit" />&nbsp; &nbsp; <input type="reset" />&nbsp; &nbsp; <p id="lblError" style="color: Red; font-size: 17px;" /> </div> <div id="DivMap"> </div> 

所以我從以下網站找到了這個源代碼，用於使用路線API在Google地圖中的兩個地理位置之間繪制路線： http ： //www.codescratcher.com/javascript/get-directions-google-map-api-using -javascript /

我按照逐步指南進行操作，並完成以下所有操作。 看來這段代碼有問題。 我試過解決這些問題，但它對我沒用。 我認為API密鑰存在問題。 誰能想出造成這些問題的原因？ 謝謝 ：）

Answer 1

您需要一個API密鑰才能在您的項目上制作Google Map Live。 您可以從此處獲取API密鑰：

https://developers.google.com/maps/documentation/javascript/get-api-key

在JavaScript部分中，刪除第一個Google地圖參考。

首先在JavaScript代碼的開頭添加一個JavaScript代碼來初始化您的Map。

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('DivMap'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

在第二個Google地圖參考上，更改您的代碼如下：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap&key=YOUR_API_KEY"></script>

使用您獲得的API密鑰更改YOUR_API_KEY 。

這將啟用您的地圖，您可以做您想要的事情。

Answer 2

從https://developers.google.com/maps/documentation/javascript/get-api-key獲取 API密鑰，並使用您的密鑰將其放入您的代碼中

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

刪除所有其他https://maps.googleapis.com/maps/api/js?

Answer 3

添加我自己的密鑰以檢查它是否有效后，我發現它實際上並沒有。

$("#calculate-route").submit(function (event) {
    event.preventDefault();
    calculateRoute($("#txtFrom").val(), $("#txtTo").val());
});

上面嘗試綁定目標id“calculate-route”提交事件來執行內部函數？ 雖然從我看來，id“計算路線”不存在。

改變這個：

<div>
    <label for="txtFrom">
        Root From:</label>
    <input type="text" id="txtFrom" name="txtFrom" required="required" placeholder="Location From"
        size="40" />
    &nbsp; &nbsp; &nbsp;
    <label for="txtTo">
        Root To:</label>
    <input type="text" id="txtTo" name="txtTo" required="required" placeholder="Location To"
        size="40" />
    <br />
    <br />
    <input type="submit" />&nbsp; &nbsp;
    <input type="reset" />&nbsp; &nbsp;
    <p id="lblError" style="color: Red; font-size: 17px;" />
</div>

對此：

<form id="calculate-route">
    <label for="txtFrom">
        Root From:</label>
    <input type="text" id="txtFrom" name="txtFrom" required="required" placeholder="Location From"
        size="40" />
    &nbsp; &nbsp; &nbsp;
    <label for="txtTo">
        Root To:</label>
    <input type="text" id="txtTo" name="txtTo" required="required" placeholder="Location To"
        size="40" />
    <br />
    <br />
    <input type="submit" />&nbsp; &nbsp;
    <input type="reset" />&nbsp; &nbsp;
    <p id="lblError" style="color: Red; font-size: 17px;" />
</form>