高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高德地图 - 点击改变当前marker图标</title><link rel="shortcut icon" href="#" /><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><style>#cm_map {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="cm_map"></div>
</body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=fb5dce704318a76bbbdc4dfbff58cc83"></script>
<script type="text/javascript">var cmMap = new AMap.Map('cm_map', {resizeEnable: true, zoom: 9,// center: [121.481041,31.683859],  //崇明东平森林公园经纬度center: [121.635058,31.576855]  //崇明岛经纬度});cmMap.setMapStyle('amap://styles/darkblue');    //  标准 darkblue// 停车场分布var preIcon, clickIcon, markers = [], lnglats = [[121.395354,31.6193],[121.610123,31.524003],[121.690257,31.380364],];preIcon = new AMap.Icon({image: "img/cz/parking_unchecked.png",size: new AMap.Size(30, 37), //图标大小imageSize: new AMap.Size(30, 37)});clickIcon = new AMap.Icon({image: "img/cz/parking_checked.png",size: new AMap.Size(30, 37), //图标大小imageSize: new AMap.Size(30, 37)});for (var i = 0; i < lnglats.length; i++) {var marker = new AMap.Marker({map: cmMap,position: lnglats[i],icon: preIcon,offset: new AMap.Pixel(-0, -37)})cmMap.setFitView()// marker逐一push到markersmarkers.push(marker)marker.on('click', resetMap);// marker.emit('click', {target: marker});}//鼠标点击事件,设置地图中心点及放大显示级别function resetMap(e) {// cmMap.setCenter(e.target.getPosition());cmMap.setZoomAndCenter(11, e.target.getPosition());for (var i = 0; i < markers.length; i++) {markers[i].setIcon(preIcon);}e.target.setIcon(clickIcon);}
</script>
</html>

高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）相关推荐

前端 vue 使用高德地图组件：（二）获取鼠标点击位置坐标和图标覆盖物拖动后的坐标
上一篇文章,我们已经成功加载了地图并设置了自定义的图标覆盖物,但是在业务开发中,对地图的运用肯定不是到此为止,对地图组件的操作经常需要坐标值的参与,这篇文章就是简单介绍下坐标值的获取一:我们可以给地 ...
高德地图定位拖动改变位置
现在关于地图使用越来越多,相信大家可能都或多或少的用到过,本篇文章简单总结了一下关于高德地图定位且可以拖动改变位置的功能的实现. 首先按照高德开发文档,导入jar包,申请key,可以在高德地图的开放平 ...
js添加多marker 高德地图_web开发如何使用高德地图API（四）通过AMap.Marker自定义标点...
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 准备工作: 首先,注册开发者账号,成为高德开放平台开发者 ...
android百度地图更换定位图标,android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）...
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...
android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...
高德地图自定义背景图+自定义文字，marker自定义
mounted() {this.addMarker()}, //实例化marker addMarker() {let me = this;var position = new AMap.LngLat( ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）
关于车辆的轨迹回放功能方法,主要分为两种,一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:两种方法,各有各的优缺点,前者是比较简单,但是不能在中途 ...
vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)
vue-aMap高德地图的应用(添加覆盖物点坐标.自定义图标.添加信息窗体信息等) 最近在项目开发中用到了aMap高德地图,简单记录一下,话不多说,直接上代码. 官方文档参考:高德地图aMap官方文档 ...
webapp通过点击调用高德地图或百度地图导航
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...

高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）

高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）相关推荐

最新文章

热门文章