高德js api自适应多点标记，设置点标注文本标签及线路绘制

最新推荐文章于 2024-09-02 14:32:24 发布

置顶

wyyyyy11

最新推荐文章于 2024-09-02 14:32:24 发布

阅读量1.5k

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/wyyyyy11/article/details/130526641

版权

本文展示了如何使用高德JavaScript API创建自适应的多点标记，并设置点标注文本标签，以及如何绘制线路。通过提供的API链接，获取点的经纬度和文本标注信息，结合公交线路查询数据绘制路线。实现方法包括将点的经纬度组织成数组，传入高德的marker方法，线路数据用于构建路径数组，绘制在地图上。注意删除未使用的引入，并使用自己的API key。

摘要由CSDN通过智能技术生成

此图片为最终实现的效果，多点标记，点击编辑点展示文本标注提示以及线路的绘制。

此demo用到的高德api地址为：

自适应多个点标记：https://lbs.amap.com/demo/javascript-api/example/marker/adaptive-show-multiple-markers

设置点标记的文本标签：https://lbs.amap.com/demo/javascript-api/example/marker/set-marker-text-label

公交信息查询（公交线路查询里面的绘制路线方法）：https://lbs.amap.com/demo/javascript-api/example/bus-info/search-bus-route

多点标记接口数据返回格式如下，点的渲染需要拿到点的经纬度，剩下的是文本标注需要用到的信息

线路绘制接口数据返回格式如下，画线需要拿到各个站点的经纬度来进行线路的绘制

直接上完整代码（可能有的多引入了没用，自己看着删哈）

<!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" />
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />

    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img {
            width: 25px;
            height: 34px;
        }
    </style>
</he