添加点标记 |
您所在的位置：网站首页 › 高德地图怎么添加位置名称信息 › 添加点标记 |
添加点标记
点标记是地图覆盖物中非常重要的要素之一，可以用来标记地图上的某个位置。JS API 支持多种类型的点标记，你可以根据需求来选择合适的类型。本文介绍如何在地图图面上添加自定义的点标记AMap.Marker。 自定义点标记示例亲手试一试 下载完整代码 1、添加自定义点标记 Marker11.1 准备成为开发者并创建 key为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 21.2 创建地图const map = new AMap.Map("container", { viewMode: "2D", //默认使用 2D 模式 zoom: 11, //地图级别 center: [116.397428, 39.90923], //地图中心点 });前往展示地图，了解完整地图创建 31.3 自定义MarkerMarker实例的内容content是可以自定义的，content属性值是字符串拼接的 DOM 元素。 //点标记显示内容 const markerContent = `
X
`自定义内容的样式 .custom-content-marker { position: relative; width: 25px; height: 34px; } .custom-content-marker img { width: 100%; height: 100%; } .custom-content-marker .close-btn { position: absolute; top: -6px; right: -8px; width: 15px; height: 15px; font-size: 12px; background: #ccc; border-radius: 50%; color: #fff; text-align: center; line-height: 15px; box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); } .custom-content-marker .close-btn:hover{ background: #666; }41.4 创建Marker对象提示如果不知道如何确认经纬度前往 拾取坐标 const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度 const marker = new AMap.Marker({ position: position, content: markerContent, //将 html 传给 content offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点 });提示
offset: new AMap.Pixel(-13, -30)，之所以为(-13，-30)，因为需要让上图以 [center bottom] 的方式扎在对应的经纬度上，上图是宽26px，高34px(去掉下部阴影为30px)，因此需要对自定内容做个offset的偏移(-13，-30)。 查看offset属性教程 51.5 将Marker添加到地图上 map.add(marker);61.6 给 Marker 绑定事件function clearMarker() { map.remove(marker); //清除 marker } document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件将Marker从地图上移除：map.remove(marker)。 2、本章涉及的属性及方法说明2.1 AMap.Marker参数/方法 说明 类型 参数值描述 默认值 position 点标记在地图上显示的位置 AMap.LngLat| Array AMap.LngLat()经纬度对象 | 经纬度构成的一维数组[116.39, 39.9] - content 点标记显示内容。content有效时，icon属性将被覆盖 String HTML 要素字符串 | HTML DOM 对象 - offset 点标记显示位置偏移量 - 具体说明见 代码示例步骤4 [0,0] 查看所有AMap.Marker属性和方法 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |