Question

＆＃13;

//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());
        });
    });

＆＃13;

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

＆＃13;

<!--<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>

＆＃13;

所以我从以下网站找到了这个源代码，用于使用路线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代码以初始化地图。

<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＆＃34;计算路由＆＃34;提交事件来执行内部功能？虽然从我看到的，id＆＃34;计算路线＆＃34;不存在。

改变这个：

<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>

使用JavaScript指向Google Map API

3 个答案: