自定义点标记 |
您所在的位置:网站首页 › 码头在地图上的标志 › 自定义点标记 |
本文介绍如何设置自定义点标记AMap.Marker,并介绍如何更改其样式、图标和内容,包括: 自定义图标点标记自定义内容点标记自定义图标示例亲手试一试 下载完整代码 1、使用说明1.1 准备成为开发者并创建 key为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 1.2 创建地图const map = new AMap.Map("container", { zoom: 10, //地图级别 center: [116.397428, 39.90923], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 });前往展示地图,了解完整地图创建 1.3 为创建的 Marker 指定自定义图标 URL准备可访问的图标 URL,设置icon属性即可展示自定义图标。 const marker = new AMap.Marker({ position: new AMap.LngLat(116.39, 39.9), offset: new AMap.Pixel(-10, -10), icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL title: "北京", }); map.add(marker);提示设置了自定义图标可以使用offset偏移量调整显示位置。 查看offset属性教程 1.4 为创建的 Marker 指定 Icon 实例准备线上可访问icon图片,生成Icon实例。此种方式可以设置图标大小size,偏移imageOffset等属性,比单纯设置 URL 更加灵活。 //创建 AMap.Icon 实例: const icon = new AMap.Icon({ size: new AMap.Size(25, 34), //图标尺寸 image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像 imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量,适于雪碧图等 imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片 }); // 将 Icon 实例添加到 marker 上: const marker = new AMap.Marker({ position: new AMap.LngLat(116.35, 39.89), //点标记的位置 offset: new AMap.Pixel(-13, -30), //偏移量 icon: icon, //添加 Icon 实例 title: "北京", zooms: [2, 12], //点标记显示的层级范围,超过范围不显示 }); map.add(marker);查看示例 1.5 为创建的 Marker 指定自定义内容对于更加复杂的 marker 展示,我们可以使用 AMap.Marker的content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活,设置了 content 以后会覆盖 icon 属性。 const content = ` `; const marker = new AMap.Marker({ content: content, //自定义点标记覆盖物内容 position: [116.397428, 39.90923], //基点位置 offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置 }); map.add(marker);提示自定义样式 .custom-content-marker { width: 25px; height: 34px; } .custom-content-marker img { width: 100%; height: 100%; }查看示例 2、本章涉及的属性及方法说明2.1 AMap.Marker参数/方法 说明 类型 参数值描述 默认值 position 点标记在地图上显示的位置 AMap.LngLat| Array 经纬度对象或经纬度构成的一维数组。例如: AMap.LngLat(116.39,39.9)或[116.39, 39.9] - offset 点标记显示位置偏移量 Pixel 详见 offset属性教程 [0,0] title 鼠标滑过点标记时的文字提示 String - - zooms 点标记显示的层级范围,超过范围不显示 Array - [2, 20] icon 在点标记中显示的图标 Icon | String 可以传一个图标地址,也可以传Icon对象,有合法的content内容设置时,此属性无效 - content 点标记显示内容。content有效时,icon属性将被覆盖 String HTML 要素字符串 | HTML DOM 对象 - 查看所有AMap.Marker属性和方法 2.2 AMap.Icon参数/方法 说明 类型 参数值描述 默认值 size 图标尺寸 Size - (36,36) image 图标的取图地址 String - 蓝色图钉图片 imageOffset 图标取图偏移量,适于雪碧图等 Pixel - - imageSize 图标所用图片大小 Size 根据所设置的大小拉伸或压缩图片,等同于 CSS 中的background-size属性。可用于实现高清屏的高清效果 - 查看所有AMap.Icon属性和方法 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |