网站开发包括哪些短视频运营培训学校
高德地图 API 拿到当前定位和目的地址转经纬度，实现路径规划
高德地图 API
是一个强大的工具，可以帮助我们在网页或应用中实现地图相关功能，比如定位、地址解析（将地址转为经纬度）以及路径规划（从当前位置到目的地的路线）。
一、准备工作：获取高德地图 API 密钥
在使用高德地图 API 之前，你需要先去 高德开放平台 注册账号并申请一个 API 密钥（Key）。这个密钥是你调用高德地图服务的“通行证”，没有它就无法使用高德地图的功能。
二、实现定位功能
定位功能的作用是获取用户当前的经纬度，比如你打开一个网页，网页会自动告诉你“你现在的位置是某某地方”。
实现步骤：
- 在网页中引入高德地图的 JavaScript API。
- 使用高德地图的定位插件
AMap.Geolocation来获取用户的当前位置。
示例代码：
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script>
<script>// 创建地图实例const map = new AMap.Map('map-container', {resizeEnable: true, // 地图大小可调整zoom: 11 // 默认缩放级别});// 添加定位插件map.plugin('AMap.Geolocation', function () {const geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位timeout: 10000, // 超过10秒停止定位zoomToAccuracy: true // 自动调整地图视野到定位点});// 开始定位geolocation.getCurrentPosition(function (status, result) {if (status === 'complete') {const position = result.position; // 获取定位结果console.log('当前位置经纬度：', position.lng, position.lat);} else {console.error('定位失败：', result);}});});
</script>
结果：
运行这段代码后，用户的当前位置（经纬度）会被打印到控制台。
三、输入地址获取经纬度
有时候我们需要用户输入一个地址，比如“北京市天安门”，然后通过高德地图 API 把这个地址转换成经纬度。这个过程叫做“地址解析”或“地理编码”。
实现步骤：
- 使用高德地图的地理编码插件
AMap.Geocoder。 - 调用
getLocation方法，将地址转换为经纬度。
示例代码：
<script>// 地址解析功能function getCoordinates(address) {AMap.plugin('AMap.Geocoder', function () {const geocoder = new AMap.Geocoder();// 将地址解析为经纬度geocoder.getLocation(address, function (status, result) {if (status === 'complete' && result.geocodes.length > 0) {const location = result.geocodes[0].location; // 获取经纬度console.log('地址解析成功：', location.lng, location.lat);} else {console.error('地址解析失败，请检查输入的地址');}});});}// 示例：解析“佛山市美的08空间”的经纬度getCoordinates('佛山市美的08空间');
</script>
结果：
运行这段代码后，输入的地址会被解析成经纬度，并打印到控制台。
四、路径规划：从当前位置到目的地
路径规划的作用是根据起点和终点的经纬度，计算出一条路线，并在地图上显示出来。比如你想从“当前位置”到“北京市天安门”，高德地图会帮你规划出一条路线。
实现步骤：
- 使用高德地图的路径规划插件
AMap.Driving。 - 调用
search方法，传入起点和终点的经纬度。
示例代码：
<script>// 路径规划功能function planRoute(start, end) {AMap.plugin('AMap.Driving', function () {const driving = new AMap.Driving({map: map // 将路线显示在地图上});// 规划路线driving.search(start, end, function (status, result) {if (status === 'complete') {console.log('路径规划成功：', result);} else {console.error('路径规划失败：', result);}});});}// 示例：从当前位置到天安门const currentLocation = [116.397428, 39.90923]; // 假设当前位置（经纬度）const destination = [116.404, 39.915]; // 天安门的经纬度planRoute(currentLocation, destination);
</script>
结果：
运行这段代码后，地图上会显示从当前位置到目的地的路线。
五、完整流程：定位 + 地址解析 + 路径规划
我们可以把以上功能整合起来，形成一个完整的流程：
- 定位获取用户当前位置。
- 用户输入目的地地址，解析成经纬度。
- 根据当前位置和目的地的经纬度，规划出一条路线。
示例代码：
<div id="map-container" style="width: 100%; height: 500px;"></div>
<input id="address-input" placeholder="请输入目的地地址" />
<button onclick="startRoutePlanning()">规划路线</button><script>let map, currentLocation;// 初始化地图并定位function initMap() {map = new AMap.Map('map-container', {resizeEnable: true,zoom: 11});map.plugin('AMap.Geolocation', function () {const geolocation = new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,zoomToAccuracy: true});geolocation.getCurrentPosition(function (status, result) {if (status === 'complete') {currentLocation = [result.position.lng, result.position.lat];console.log('当前位置：', currentLocation);} else {console.error('定位失败：', result);}});});}// 地址解析function getCoordinates(address, callback) {AMap.plugin('AMap.Geocoder', function () {const geocoder = new AMap.Geocoder();geocoder.getLocation(address, function (status, result) {if (status === 'complete' && result.geocodes.length > 0) {const location = result.geocodes[0].location;callback([location.lng, location.lat]);} else {alert('地址解析失败，请检查输入的地址');}});});}// 路径规划function planRoute(start, end) {AMap.plugin('AMap.Driving', function () {const driving = new AMap.Driving({ map: map });driving.search(start, end, function (status, result) {if (status === 'complete') {console.log('路径规划成功：', result);} else {console.error('路径规划失败：', result);}});});}// 开始规划路线function startRoutePlanning() {const address = document.getElementById('address-input').value;if (!address) {alert('请输入目的地地址');return;}getCoordinates(address, function (destination) {if (currentLocation) {planRoute(currentLocation, destination);} else {alert('定位失败，请稍后重试');}});}// 初始化地图initMap();
</script>
通过高德地图 API，我们可以轻松实现以下功能：
- 定位：获取用户当前位置。
- 地址解析：将地址转换为经纬度。
- 路径规划：从当前位置到目的地的路线。