【高德地图进阶】--- 带图片的点（2）

上一章讲述了AMap.Marker，这一章使用第二种方式Loca来绘制带图片的点。
经过测试，该api 在点击事件上有些问题。如果你的点会有重叠的可能，请谨慎使用该api。

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>IconLayer 天气预报</title><style>html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"></script><!-- 一定要引入 --><scriptlanguage="javascript"src="https://webapi.amap.com/loca?v=1.3.2&key=cccc"></script><script>//设置点的数据 通常都是通过http请求获取，数据的key是任意的，也可以携带其他任意数据，每一个元素就是一个点，//通过点击事件，可以获取点对应的数组元素对象。借此可以实现点携带额外数据的功能var districts = [{name: "北京市",center: "116.407394,39.904211",icon: "https://a.amap.com/Loca/static/manual/weathers/cloudy.png",},{name: "天津市",center: "116.407394,40",icon: "https://a.amap.com/Loca/static/manual/weathers/blizard.png",},];// 创建地图实例var map = new AMap.Map("container", {showIndoorMap: false,viewMode: "3D",center:[116.407394,39.904211],resizeEnable: true,showLabel:false});//创建layervar layer = new Loca.IconLayer({//挂载到地图map: map,//开启事件支持，需要点击事件，必须设置为trueeventSupport: true});//给layer设置数据// 第一个参数是点位的对象数组，第二个参数指定第一个参数中的对象中哪个key是坐标数据layer.setData(districts, {//设置key 这样就会把districts中的每个元素的center作为点坐标数据lnglat: "center",});//设置点的样式layer.setOptions({//用于指定图片的路径、base64URI 或者 Image DOM 对象source: function (res) {//res 是 遍历 districts 中的当前元素var i = res.index;// return 当前遍历到的点的图片 districts中的icon是图片的url ，当然你可以使用其他方式，总之返回什么 点就显示什么return res.value.icon;},// 设置点的样式 style: {size: 28,//透明度opacity: 0.9,},});layer.on("click", function (ev) {console.log("点位", ev);});// 渲染layer.render();</script>
</html>

每一个layer中都可以存放多个点，通过layer可以控制点的显隐点击事件等。
但是有个bug，layer是通过遍历的方式将点渲染到地图上，也就是说如果点坐标相同，后渲染的点会盖住先渲染的点，但是点击事件的触发，他是通过地图的点击事件获取点击的坐标，通过这个坐标遍历点数组判断是否点击到了layer中的点，但它并不是从数组的尾向头遍历，这就导致触发了先渲染的点的点击事件。从视觉上看点击的是最上面的点，触发的却是最下面的点的点击事件

【高德地图进阶】--- 带图片的点（2）相关推荐

【高德地图进阶】--- 添加城市版块纹理
在之前的[高德地图进阶]- 自定义地图中,有了解过如果给地图添加纹理. 但是该功能是收费的,这就劝退了不少人. 通常的业务都是将城市版块抬高,这部分之前的文章也讲述过.都是在地图上添加覆盖物在高德的 ...
【高德地图进阶】--- 3d城市版块之prism
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何绘制城市版块的平面.但为了凸显某个城市,一般情况下都会将该城市的版块抬高实现3d效果.现在我们就来学学如何抬高地图版块整理 ...
【高德地图进阶】--- 带图片的点（1）
在使用地图开发时相信用的最多的就是点,其中难免需要使用到自定义图片的点. 而且点还要具备,可点击,可携带数据等功能. 点的绘制绘制带图片的点常见的方式有四种 AMap.Marker :使用地图 JS ...
Android高德地图贴合图片完成手绘地图展示
上周刚接到一个需求,产品觉得高德的默认地图样式不好看,想要一个手绘地图贴合上去,看着美观很多,然而我内心确是抵触的,无法 ,产品讲了,只能先回答试试看看.接下拉就是一搏谷歌搜索. 1.使用web版本的 ...
android高德方向,Android 高德地图进阶功能
本文接本人上一篇文章:Android APP接入高德SDK问题与记录,如果还不熟悉高德地图接入,可以先阅读这篇文章. 1 切换图层及显示路况通过设置mapType,可以切换地图的类型: aMap.m ...
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块.今天我们使用高德自己的api来绘制城市版块 DistrictSearch DistrictS ...
【高德地图进阶】--- 自定义地图
在开发的过程中, 有时候高德官方地图样式无法符合需求,这就需要我们自定义地图的样式了. 步骤:登录高德地图–>进入控制台–>自定义地图可以直接创建地图,也可以在模板基础上进行修改可以控 ...
【高德地图进阶】--- 带图片的点（3）
SimpleMarker本身继承了AMap.Marker ,所以使用起来并不难,只需要额外引入组件库,用法和marker差不多. 1.引入UI组件库 <script src="http ...
高德地图生成静态图片，显示指定经纬度的地图
最近接到一个地图需求,1.生成静态图片,2.显示指定经纬度的地图然后我结合需求sdkapi后,就确定了大概几个需求.本文只注明几个比较有用的地方,具体还得结合官方文档,普通不是专门以地图开发需求的a ...

【高德地图进阶】--- 带图片的点（2）

代码

【高德地图进阶】--- 带图片的点（2）相关推荐

最新文章

热门文章