H5、PC端实现打卡定位 (基于高德地图）

一、获取高德地图 key 与安全密钥高德开发平台创建新应用,创建好后, 点击添加key, 根据提示消息填写好, 提交即可, 这样就能获取key与安全密钥啦。注意(域名白名单, 记住不要填写端口)域名白名单: 地图控制台通常限制了可调用API的域名。开发环境常用的localhost、127.0.0.1或本地IP需要添加到平台的白名单中否则geocoder.getAddress(逆地理编码用)会返回权限错误。二、代码实现高德地图的key和安全密钥export const settings: Settings { amapKey: 你的key, amapSecurityCode: 你的安全秘钥 };计算两点距离/** * 计算两点距离 * param start 起点坐标 * param end 终点坐标 * returns 距离米 */ export function calculateDistance(start: Location, end: Location): number { const { latitude: lat1, longitude: lng1 } start; const { latitude: lat2, longitude: lng2 } end; const R 6378137; // 地球半径米 const dLat toRad(lat2 - lat1); const dLng toRad(lng2 - lng1); const a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2); const c 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; }动态加载高德地图loadAMapScript() { if ((window as any).AMap) { return; } (window as any)._AMapSecurityConfig { securityJsCode: settings.amapSecurityCode // 请在高德控制台查看 }; const script document.createElement(script); script.type text/javascript; script.src https://webapi.amap.com/maps?v2.0key${settings.amapKey}pluginAMap.Geolocation,AMap.Geocoder; script.onload () { console.log(高德地图加载成功); }; script.onerror () { this.$toast.fail(高德地图加载失败); }; document.head.appendChild(script); }使用AMap.plugin动态加载高德地图API插件, 这里加载高德定位插件(AMap.Geolocation), 用于按需加载地图功能插件避免一次性加载所有功能导致性能问题。// 获取位置信息 getLocation() { this.isLoading true; this.$toast.loading({ message: 定位中..., forbidClick: true }); if (!(window as any).AMap) { this.$toast.fail(高德地图未加载); this.isLoading false; return; } // 使用高德定位插件 (window as any).AMap.plugin(AMap.Geolocation, () { const geolocation new (window as any).AMap.Geolocation({ enableHighAccuracy: true, // 是否使用GPS等高精度定位默认:true timeout: 10000, // 超过指定时间未获取到位置则失败 maximumAge: 0, // 可接受缓存位置的最大时间0 表示不使用缓存 convert: true, // true: 转为高德坐标 (GCJ-02)false: 返回原始坐标 (WGS-84) panToLocation: false, // 定位成功后地图是否平移到该位置 zoomToAccuracy: false // 定位成功后地图是否缩放到精度范围 }); geolocation.getCurrentPosition((status: string, result: any) { this.isLoading false; this.$toast.clear(); if (status complete) { this.longitude result.position.lng.toFixed(6); this.latitude result.position.lat.toFixed(6); const position1 { longitude: Number(this.longitude), latitude: Number(this.latitude ) }; const position2 { longitude: 120.214215, latitude: 30.250422 }; const distance calculateDistance(position1, position2); this.$toast.fail({ message: 距离${distance} 米, duration: 6000 }); this.reverseGeocode(this.longitude, this.latitude); } else { this.$toast.fail(定位失败${result.message || 请检查定位权限}); console.error(定位错误:, result); } }); }); }逆地理编码 (坐标转为地址)// 逆地理编码 reverseGeocode(lng: string, lat: string) { (window as any).AMap.plugin(AMap.Geocoder, () { const geocoder new (window as any).AMap.Geocoder({ city: national, radius: 1000 }); geocoder.getAddress([lng, lat], (status: string, result: any) { if (status complete result.regeocode) { this.address result.regeocode.formattedAddress; this.isLocated true; this.$toast.success(定位成功); } else { this.address ( 经度:${lng}, 纬度:${lat} ); this.isLocated true; this.$toast.fail({ message: ${JSON.stringify(status)}, 定位失败${JSON.stringify(result)}, duration: 30000 }); } }); }); }总结定位功能实现还是比较简单的, 相信看完这篇, 你也基本会了, 自己动手试一下吧 !!!如果对你有帮助,可以帮忙点个赞, 我会非常开心, 谢谢