【编程实践】利用高德地图开放平台制作简易地图规定半径范围

狮智先生

已于 2025-01-19 22:34:12 修改

阅读量2.3k

点赞数 15

分类专栏：编程实践文章标签： html css

于 2024-09-21 20:36:00 首次发布

本文链接：https://blog.csdn.net/weixin_41512747/article/details/142422097

版权

学习笔记同时被 2 个专栏收录

31 篇文章

订阅专栏

编程实践

24 篇文章

订阅专栏

需求分析 [small demo]

使用高德地图API创建一个显示特定半径范围的简易地图。
注册高德开放平台账号，获取API Key。（精度要求不高可不需要）
创建HTML页面，引入高德地图API。
设置地图中心点和初始缩放级别。
编写代码绘制指定半径的圆形区域。
完成地图初始化、圆形区域绘制等基本功能。

具体实现

高德开放平台介绍

链接: https://lbs.amap.com/

在这里插入图片描述

高德坐标拾取

在该网址，选择某个地方进行点击坐标拾取，之后需要用到。以广州塔为例，拾取坐标为东经113.32度，北纬23.11度，精度在小数点后两位，登录后可获取更精确位置。

精确地点坐标获取可访问，https://jingweidu.bmcx.com/，经纬度查询
在这里插入图片描述

在开放平台创建网页版

选择一个起始页，如下图，

在这里插入图片描述
起始页是简单的地图可视化案例。如要实现，指定半径区域的、指定范围的可以采用下面代码，将代码复制粘贴到右侧 编辑器中。

// 2024-09-21
<!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>3D视图中的圆绘制</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        center: [113.32, 23.11],// 地图页面的中心位置，小数点后数字越多越精确.
        viewMode: '2D',
        pitch: 60,
        rotation: 0,
        features: ['bg', 'road', 'point'],
        mapStyle: 'amap://styles/light',
        layers: [
            // 高德默认标准图层
            new AMap.TileLayer.Satellite(),
            // 楼块图层
            new AMap.Buildings({
                zooms: [16, 18],
                zIndex: 10,
                heightFactor: 2//2倍于默认高度，3D下有效
            })
        ],
        zoom: 16
    });
    var circle = new AMap.Circle({
        center: [113.32, 23.11], // 数组类型，指定圆的中心点坐标，格式为 [longitude, latitude]，即 [经度, 纬度]
        radius: 3000, // 数字类型，指定圆的半径，半径为3000米
        borderWeight: 3, // 数字类型，指定圆轮廓的宽度，单位为像素,圆轮廓宽度
        strokeColor: "#FF33FF", // 字符串类型，指定圆轮廓的颜色，可以使用CSS颜色值
        strokeOpacity: 1, // 数字类型，指定圆轮廓的透明度，取值范围为0到1
        strokeWeight: 6, // 数字类型，指定圆轮廓的线宽，单位为像素
        fillOpacity: 0.4, // 数字类型，指定圆的填充透明度，取值范围为0到1
        strokeStyle: 'dashed', // 圆轮廓线型
        strokeDasharray: [10, 10], // 数组类型，当 strokeStyle 为 ‘dashed’ 时，用于定义虚线样式，格式为 [实线长度, 间隙长度]
        fillColor: '#1791fc', // 字符串类型，指定圆的填充颜色，可以使用CSS颜色值
        zIndex: 50, // 数字类型，指定圆的堆叠顺序，值越大，圆在地图上显示的层级越高
    });

    map.add(circle);
    map.setFitView([circle]); // 缩放地图以包含圆

    // 如果需要编辑圆，可以添加以下代码
    // 注意：AMap.CircleEditor 是在 AMap v2.0 中引入的，而本示例使用的是 v1.4.15
    // 因此，以下代码可能不会在 v1.4.15 中工作，你需要升级到 AMap v2.0 或更高版本
    // var circleEditor = new AMap.CircleEditor(map, circle);
    // circleEditor.open();
</script>
</body>
</html>