高德地图API使用

最新推荐文章于 2024-06-14 09:32:39 发布

三体问题

最新推荐文章于 2024-06-14 09:32:39 发布

阅读量3.3k

点赞数 1

文章标签：街景地图

本文链接：https://blog.csdn.net/q943520218/article/details/103704502

版权

高德地图二次开发提供了很多接口，功能强大。

首先需要申请一个KEY教程如下：链接

通过这个key替换

<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的KEY&plugin=AMap.Autocomplete"></script>

其中plugin=AMap.Autocomplete为需要加载的组件类型，例如还有plugin=AMap.Driving等

实现功能如下功能：

可以在轨迹上查点，然后通过查询API导航轨迹：

代码实现如下：

<!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>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="./TrackEdit.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>
<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .map{
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
    <h4>左击获取经纬度：</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat"

最低0.47元/天解锁文章

三体问题

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
高德地图API使用

高德地图二次开发提供了很多接口，功能强大。首先需要申请一个KEY教程如下：链接通过这个key替换<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的KEY&plugin=AMap.Autocomplete"></script>其中plugin=AMa...
复制链接

扫一扫