使用JavaScript的谷歌地图API

//用于文本框搜索。。。。。。。。。。。。。。
google.maps.event.addDomListener（窗口'load'，函数（）{
var places=new google.maps.places.Autocomplete（document.getElementById（'txtFrom'）；
google.maps.event.addListener（places，'place_changed'，函数（）{
var place=places.getPlace（）；
});
var places1=new google.maps.places.Autocomplete（document.getElementById（'txtTo'）；
google.maps.event.addListener（places1，'place_changed'，函数（）{
var place1=places1.getPlace（）；
});
});
函数计算器输出（rootfrom、rootto）{
//中心位于意大利那不勒斯
变量myOptions={
缩放：10，
中心：新google.maps.LatLng（40.84,14.25），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//画地图
var mapObject=new google.maps.Map（document.getElementById（“DivMap”），myOptions）；
var directionsService=new google.maps.directionsService（）；
变量方向请求={
来源：rootfrom，
目的地：rootto，
travelMode:google.maps.Directions travelMode.DRIVING，
unitSystem:google.maps.unitSystem.METRIC
};
方向服务.路线(
指示请求，
功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
新google.maps.DirectionsRenderer({
map:mapObject，
方向:回应
});
}
其他的
$（“#lblError”）.append（“找不到根”）；
}
);
}
$（文档）.ready（函数（）{
//如果浏览器支持地理定位API
if（typeof navigator.geolocation==“未定义”）{
$（“#lblError”）.text（“您的浏览器不支持地理位置API”）；
返回；
}
$（“#计算路线”）.submit（函数（事件）{
event.preventDefault（）；
计算器输出（$（“#txtFrom”）.val（），$（“#txtTo”）.val（））；
});
});
#DivMap
{
边框：1px纯黑；
宽度：500px；
高度：400px；
边缘顶部：30px；
左边缘：32%；
}

在谷歌地图中获取方向



根目录：
根目录：





从中获取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?
您需要一个API密钥，才能使Google地图在您的项目中生效。您可以从以下位置获取API密钥：


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


var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'DivMap'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}

在第二个谷歌地图参考中，更改代码如下：

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



使用获得的API密钥更改\u API\u密钥

这将启用你的地图，你可以做你想做的事情。
在添加我自己的密钥以检查它是否工作后，我发现它实际上没有工作

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

上面尝试绑定目标id“calculate route”提交事件以执行内部功能？虽然在我看来，id“calculate route”并不存在

更改此项：

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


根目录：
根目录：





对于其中一个，您在html顶部包含了两次maps api javascript文件，一个没有“places”在这里获取api密钥->我不认为我得到了@pokeybitI按照您所说的做了，并解决了错误，但它没有在屏幕上显示任何地图。你认为这是离婚的原因吗？地图应该显示在哪里？Thanks@N.Cre，我已更新我的答案。问题不是div。您需要先初始化地图，然后才能开始使用它。如果这解决了您的问题/回答了您的问题，请