高德浏览器定位后导航

最新推荐文章于 2025-06-17 17:10:28 发布

huang_jin_yi_

最新推荐文章于 2025-06-17 17:10:28 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/huang_jin_yi/article/details/100153181

本文详细介绍了如何使用高德地图JavaScript API在网页中实现实时定位，并结合导航功能，为用户提供从当前位置到指定目的地的路线指引。通过获取用户授权，调用高德API进行GPS定位，然后展示地图并规划最佳行驶路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德浏览器定位后导航</title>
    <style>
        html,body,#container{
            height:100%;
        }
        .info{
            width:26rem;
        }
    </style>
<body>
    <div id='container'></div>
    <div class="info">
        <h4 id='status'></h4><hr>
        <p id='result'></p><hr>
        <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
    </div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=84f6a1b06b5954c5c749121a0c47cd5e"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <scri