高德地图 js api 实现定位到当前位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高德地图hello world</title> <style> #container{ margin-left:auto; margin-right:auto; height:550px; width:280px; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="container"> </div> <script type = "text/javascript" src = "https://webapi.amap.com/maps?v=1.4.15&key=a4df1b5a57b9ba3e9be795464b7009ac"></script> <script> $(function () { var map = new AMap.Map('container'); map.setZoom(15); map.plugin(['AMap.Scale'], function () { var scale = new AMap.Scale({}); map.addControl(scale); }); map.plugin('AMap.Geolocation', function () { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true,// 是否使用高精度定位,默认:true convert:true, showMarker:true, panToLocation:true, timeout: 10000 }); geolocation.getCurrentPosition(); map.addControl(geolocation); AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) function onComplete(data) { // data是具体的定位信息 window.alert("定位成功!"); } function onError(data) { // 定位出错 window.alert("定位出错!"); } }) }); </script> </body> </html>
DEMO下载地址:下载
分类:
其它
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?