【高德地图入门】--- 绘制点

最新推荐文章于 2024-06-03 15:36:09 发布
最新推荐文章于 2024-06-03 15:36:09 发布
阅读量3.5k 收藏 5
点赞数 1
分类专栏： 【地图开发】 文章标签： css3 html5 几何学 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39078783/article/details/122085153
版权
本文详细介绍高德地图API中点、线、面的绘制方法，包括Marker、Text、ElasticMarker及LabelMarker等类型的使用技巧，适用于初学者快速掌握地图元素的添加。

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

高德地图内置了许多遮盖物的api，今天主要就是讲解常用的点，线，面的绘制方法

点的绘制相对简单，只需要一个坐标值即可，例： [ 116.396783,39.894813 ]

创建地图

为了更好的展示点的绘制，我们需要先创建一个地图对象

<body>
    <div id="container"></div>
</body>

     const map = window.map = new AMap.Map("container", {
        center: [116.381674, 39.910732],
        viewMode: "3D",
        zoom: 8,
      });

点的类型

高德地图提供了多种点的绘制类型，其中包括图标Marker，文字text，灵活点标记ElasticMarker，标注类LabelMarker 等

Marker类

    new AMap.Marker({
      map,
      position: [115.887289, 39.961275],
      icon: "https://cloud-change.oss-cn-beijing.aliyuncs.com/icon/4.png?versionId=CAEQGxiCgICm78D17RciIDE1NWRhYjZlZmQyMDQyZjZiZGViOGEzNDFkYmQwNGQ5",
    });

地图：
在这里插入图片描述

Marker的四个主要属性

  • map：要显示该marker的地图对象
  • position：点标记在地图上显示的位置，默认为地图中心点
  • icon：需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效
  • content：点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖

icon和content 任选其一
当然 marker的属性 还有很多

Text类

    new AMap.Text({
      map,
      position: [115.618336, 39.87965],
      text: "我是text",
    });

在这里插入图片描述

text 与marker属性相似，不同就在于icon换成了text。
Text属性，请点我

ElasticMarker
灵活点标记，一种可以随着地图级别变化而改变图标和大小的点标记，插件类
对于插件类，在使用时需要额外引入plugin=ElasticMarker ，稍后可以在文章尾部的全部代码中查看如何引入

    new AMap.ElasticMarker({
      map: map,
      position: [115.933104, 39.998766],
      styles: [
        {
          icon: {
            img: "https://a.amap.com/jsapi_demos/static/resource/img/trees.png",
            size: [366, 201],
            ancher: [183, 101],
            imageSize: [865, 1156],
            imageOffset: [45, 480],
            fitZoom: 17.5,
            scaleFactor: 2,
            maxScale: 2,
            minScale: 0.125,
          },
        },
      ],
      zoomStyleMapping: {
        8: 0,
        9: 0,
        10: 0,
        11: 0,
        12: 0,
        13: 0,
        14: 0,
        15: 0,
        16: 0,
        17: 0,
        18: 0,
        19: 0,
        20: 0,
      },
    });

在这里插入图片描述
ElasticMarker主要四个属性

  • map：要显示该marker的地图对象
  • position：点标记在地图上显示的位置，默认为地图中心点
  • styles：这是个对象数组，主要设置点的样式，具体采用哪个样式由zoomStyleMapping决定
  • zoomStyleMapping：是个对象，如上面的例子中 的 14 ：0 ，表示当地图的缩放等级为14级时，采用styles中下标为0的样式

其他属性

LabelMarker 类

    let layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让，默认为开启，v1.4.15 新增属性
      collision: true,
      // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      animation: true,
    });

    map.add(layer);

    let labelMarker = new AMap.LabelMarker({
      name: "京味斋烤鸭店",
      position: [115.898359,39.909869 ],
      icon: {
        type: "image",
        image: "https://a.amap.com/jsapi_demos/static/images/poi-marker.png",
        clipOrigin: [547, 92],
        clipSize: [50, 68],
        size: [25, 34],
        anchor: "bottom-center",
        angel: 0,
        retina: true,
      },
      text: {
        content: "京味斋烤鸭店",
        direction: "top",
        offset: [0, 0],
        style: {
          fontSize: 13,
          fontWeight: "normal",
          fillColor: "#fff",
          padding: "2, 5",
          backgroundColor: "#22884f",
        },
      },
    });

    layer.add(labelMarker);

在这里插入图片描述
LabelMarker 需要依赖于LabelsLayer ，labelMarker 可以同时设置图标和文字
其他属性

到此 点的绘制就基本介绍完了，对于这些点对象他们有一些共同且的方法和事件都是日常开发中非常常见的

  let text = new AMap.Text({
      map,
      position: [115.618336, 39.87965],
      text: "我是text",
    });
    //隐藏
    text.hide()
    //显示
    text.show()
    text.on('click',function(e){
      console.log(e)
    })

全部代码展示 （其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>map</title>
    <style>
      body,
      html,
      #container {
        margin: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
  </body>
  <script>
    window._AMapSecurityConfig = {
      securityJsCode: "xxxx",
    };
  </script>
  <script
    language="javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=ElasticMarker"
  ></script>

  <script language="javascript">
    const map = (window.map = new AMap.Map("container", {
      center: [116.381674, 39.910732],
      viewMode: "3D",
      zoom: 8,
      showLabel: false,
    }));
    //--------------------------------------Marker--------------------------------------
    new AMap.Marker({
      map,
      position: [115.887289, 39.961275],
      icon: "https://cloud-change.oss-cn-beijing.aliyuncs.com/icon/4.png?versionId=CAEQGxiCgICm78D17RciIDE1NWRhYjZlZmQyMDQyZjZiZGViOGEzNDFkYmQwNGQ5",
    });

    //--------------------------------------Text--------------------------------------
    let text = new AMap.Text({
      map,
      position: [115.618336, 39.87965],
      text: "我是text",
    });
    //隐藏
    text.hide()
    //显示
    text.show()
    text.on('click',function(e){
      console.log(e)
    })

    //--------------------------------------ElasticMarker--------------------------------------
    new AMap.ElasticMarker({
      map: map,
      position: [115.933104, 39.998766],
      styles: [
        {
          icon: {
            img: "https://a.amap.com/jsapi_demos/static/resource/img/trees.png",
            size: [366, 201],
            ancher: [183, 101],
            imageSize: [865, 1156],
            imageOffset: [45, 480],
            fitZoom: 17.5,
            scaleFactor: 2,
            maxScale: 2,
            minScale: 0.125,
          },
        },
      ],
      zoomStyleMapping: {
        8: 0,
        9: 0,
        10: 0,
        11: 0,
        12: 0,
        13: 0,
        14: 0,
        15: 0,
        16: 0,
        17: 0,
        18: 0,
        19: 0,
        20: 0,
      },
    });

    //--------------------------------------LabelMarker--------------------------------------
    var layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让，默认为开启，v1.4.15 新增属性
      collision: true,
      // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      animation: true,
    });

    map.add(layer);

    var labelMarker = new AMap.LabelMarker({
      name: "京味斋烤鸭店",
      position: [115.898359,39.909869 ],
      icon: {
        type: "image",
        image: "https://a.amap.com/jsapi_demos/static/images/poi-marker.png",
        clipOrigin: [547, 92],
        clipSize: [50, 68],
        size: [25, 34],
        anchor: "bottom-center",
        angel: 0,
        retina: true,
      },
      text: {
        content: "京味斋烤鸭店",
        direction: "top",
        offset: [0, 0],
        style: {
          fontSize: 13,
          fontWeight: "normal",
          fillColor: "#fff",
          padding: "2, 5",
          backgroundColor: "#22884f",
        },
      },
    });

    layer.add(labelMarker);

  </script>
</html>
Openlayers入门教程 --- 万字长篇
大剑师兰特的GIS世界
03-13 7147
也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。
React 使用原生高德地图
albert12336的博客
05-30 2401
地图是一个 App 里面重要的一个元素，目前市场上比较有名的有高德地图，百度地图，腾讯地图。这里举个例子来讲怎样在React 使用原生高德地图，其它类型的地图的引入也很类似。 刚开始的时候，本来想着直接从 npm 里面引入，但查了一下，无论高德地图，还是百度，腾讯地图，都没有一个比较全的库，而且大部分最后一次维护都是半年之前的。所以决定直接使用原生的： 首先我们看看，高德地图官方网怎么讲的（https://lbs.amap.com/api/javascript-api/guide/abc/prepar.
高德地图JS API 海量点标记LabelMarker
weixin_45511682的博客
05-28 1640
LabelMarker 是高德地图提供的用于在地图上高效展示大量标记点的类。与普通的Marker不同，LabelMarker适用于需要在同一地图上显示数千甚至数万个标记点的场景，具有更高的性能和更好的用户体验。
高德地图绘制
01-06
根据所给的经纬度利用高德地图API,绘制线路图,简单易用.
【高德地图】Android高德地图绘制标记点Marker
D_AKJS
02-22 4817
效果如下图：绘制自定义Marker的自定义icon图标是通过来处理，它能将图标资源文件转换成位图（Bitmap）对象，以便在地图上使用。//绘制自定义markermarkerOption.title("测试2").snippet("我是自定义marker");//设置Marker可拖动//设置marker平贴地图效果至于icon图标可以在阿里巴巴矢量图标库里面下载png格式的图片即可。🚩扩展：在自定义的marker中绘制文字等其他信息。
基于高德地图的描点操作，监听地图缩放，展示合理数量的marker
weixin_33670786的博客
10-17 1053
原文:基于高德地图的描点操作，监听地图缩放，展示合理数量的marker 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lx583274568/article/details/54089707 1.根据两...
高德地图绘制点（简单实现）
qq_41804086的博客
09-05 5440
第一步  配置高德地图的所有要配置的东西  记住APPKEY  一定要看清楚 这是个坑 导入jar包  第二步xml 实现map控件 第三步代码（犹豫时间紧任务重直接写关键代码至于配置的信息去高德看） //在activity执行onCreate时执行mMapView.onCreate(savedInstanceState)，创建地图 mMapView = (MapVie...
六月-高德地图绘制指南
最新发布
ll_883963的博客
06-03 746
【代码】6月-高德地图绘制指南。
android高德标记多个点,android-------高德地图两点路线和多个点路线绘制
weixin_31695145的博客
05-25 1702
最近朋友需要两点路线和多个点路线绘制这个功能，帮忙弄了一下，写这篇博客与大家分享一下。两点路线是起点和终点两个经纬度点，高德绘制出路线，可以实现实线和虚线功能效果图：相关属性：mPolylineOptions = new PolylineOptions();mPolylineOptions.setDottedLine(true);//设置是否为虚线mPolylineOptions.geodes...
winform加载高德地图
09-11
高德地图提供了JavaScript API，允许在地图上绘制各种图形，包括线条。在C#中调用JavaScript函数实现画线： 1. 添加一个按钮（Button）到WinForm，命名为"DrawLine"。 2. 在按钮的Click事件中，调用JavaScript函数...
基于高德地图，绘制自己的地图，和响应事件。很适合初学者
12-04
本教程将详细介绍如何基于高德地图进行地图绘制与事件响应，非常适合初学者入门。 首先，我们需要了解高德地图JavaScript API的基础概念。这个API允许开发者在网页中嵌入地图，并通过JavaScript代码控制地图的各种...
高德地图描点工具
04-08
在高德地图上描一组点,在右侧记录下这一组点的坐标信息.
Cesium_point_line:Cesium基于高德地图画点线面
05-18
Cesium_point_line Cesium基于高德地图画点线面 安装配置node环境 进入目录，运行node server.js 浏览器打开地址，进入Hello World界面
高德地图绘制一个多边形(react)
m0_61476911的博客
03-15 1109
react中使用高德地图绘制多边形
高德地图（定位、描点）
weixin_34326429的博客
11-27 838
为什么80%的码农都做不了架构师？>>> ...
高德地图绘制自定义点
Henrybalabl的博客
12-04 606
高德地图
高德地图绘制图层
︶￣城南花已开
03-07 573
高德地图绘制覆盖物图层，可编辑
高德地图绘制 GPX 路径，gpx 文件详解
热门推荐
学习笔记
01-19 1万+
gpx文件是在分享地图路径时最常用的一种数据格式。里面包含了路径点的相关信息，每个点还有可能拥有自己的时间、距离等信息。一直想自己导出自己的 gpx 路线，然后导入到地图中查看这个路线的具体信息，今天细致看了下，大体找到了方法，分享下。因为对高德地图的操作已经很熟了，所以再看官方的文档就很轻松，不熟的可以看看我以前关于高德地图的一些文章。Demo 页面：我要实现的结果是类似这样的：目前是这样的，当然日后会优化。
高德地图的绘制路线、批量标记点和点的信息展示
weixin_43222587的博客
09-27 3693
一、设置初始值，绘制矢量图形 二、绘制路径 三、批量标记点 四、路线设置 五、打开信息窗体
地图绘制功能介绍：点和连线的添加
要在地图上绘制点和连线，首先需要了解并使用地图API（应用程序编程接口），如Google Maps API、百度地图API或高德地图API。这些API提供了丰富的功能，可以实现地图的加载、定位、绘制点、连线等操作。 - **Google ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸渔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值