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

这篇博客详细介绍了如何在高德地图中实现点击marker图标来切换其显示样式,并在再次点击时恢复到之前的状态,提供了实用的编程技巧。

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

<!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到markers
        markers.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>

 

<think>好的,用户的问题是在Vue中使用高德地图,想要实现点击Marker切换样式,并恢复一个点击Marker的默认样式。我需要先回忆一下高德地图API的相关操作,特别是关于Marker的事件处理和样式修改。 首先,用户提到他们已经在Vue中初始化了地图,并能够动态添加Marker。现在需要处理点击事件,切换当前点击Marker样式,同时恢复之前点击的那个的默认样式。这需要维护一个变量来记录当前被选中的Marker,这样在下次点击时,可以将其样式恢复,再设置新点击Marker样式。 接下来,我需要考虑如何给每个Marker绑定点击事件。根据高德地图的文档,每个Marker实例有一个on方法,可以监听事件,比如'click'。当事件触发时,执行回调函数,处理样式的变化。 然后,样式的修改可以通过Marker的setIcon方法来实现。默认样式和选中样式需要预先定义好,可能是不同的图片路径或者图标对象。这里用户可能需要自定义图标的URL,或者使用高德提供的默认图标。 另外,用户可能希望每个Marker在被点击时,除了改变自己的样式,还要检查是否有之前被选中的Marker,并将其恢复。因此,需要一个变量(比如currentMarker)来保存当前选中的实例。每次点击新的Marker时,先检查currentMarker是否存在,如果存在,就调用它的setIcon方法恢复默认图标,然后将currentMarker更新为当前点击Marker,并设置其新图标。 还需要注意,在Vue中,这些Marker实例可能需要存储在组件的data中,或者作为组件的属性,以便在多个方法之间共享和访问。比如,在data里定义一个currentMarker: null,初始时没有选中的Marker。 另外,动态添加Marker时,可能需要遍历接口返回的数据,为每个数据创建一个Marker,并绑定事件。这时候,每个Marker点击事件处理函数应该能够访问到该Marker实例,以便修改其样式。 可能的代码结构是在添加Marker的时候,循环创建每个Marker,并在其on('click')的回调中处理样式切换。例如: data() { return { map: null, markers: [], currentMarker: null } }, methods: { addMarkers() { // 假设markerData是从接口获取的数据 this.markers = markerData.map(item => { const marker = new AMap.Marker({ position: [item.lng, item.lat], icon: defaultIconUrl, // 其他配置 }); marker.on('click', () => this.handleMarkerClick(marker)); return marker; }); this.map.add(this.markers); }, handleMarkerClick(clickedMarker) { if (this.currentMarker) { this.currentMarker.setIcon(defaultIconUrl); // 恢复之前样式 } clickedMarker.setIcon(activeIconUrl); // 设置当前点击样式 this.currentMarker = clickedMarker; // 更新当前选中的Marker } } 这样,每次点击任何一个Marker时,都会触发handleMarkerClick方法,先恢复一个样式,再设置当前点击样式,并保存当前Marker的引用。 需要注意的是,如果用户是通过接口动态获取数据来添加Marker,那么每次添加新的Marker时,都要确保正确绑定事件,并且currentMarker在需要的时候能够正确重置,比如当地图重新加载或数据更新时。 另外,可能还需要处理地图上多个Marker点击冲突,但高德地图的API应该已经处理了事件的冒泡,所以点击Marker时不会触发地图的点击事件。 最后,测试一下这个逻辑是否正确:点击一个Marker,currentMarker为null,所以直接设置它的样式为active,currentMarker保存它。点击第二个Marker时,currentMarker存在,恢复样式,然后设置第二个为active,并更新currentMarker。再次点击第二个,不会有变化,因为currentMarker已经是它自己,恢复后再设置,可能不会有问题,但可能需要判断是否是同一个实例,避免不必要的操作。 总结下来,关键就是维护一个currentMarker变量,并在每次点击时处理前一个恢复当前的激活。</think>### Vue高德地图点击切换Marker样式实现方法 在Vue中实现高德地图Marker点击切换样式恢复一个样式,可通过以下步骤实现: --- #### **1. 数据存储结构** 在组件中定义`currentMarker`变量,用于记录当前被选中的Marker实例: ```javascript data() { return { map: null, markers: [], // 存储所有Marker实例 currentMarker: null // 记录当前选中Marker } } ``` --- #### **2. 动态创建Marker** 通过接口数据创建Marker时,需绑定点击事件: ```javascript methods: { // 动态添加Marker addMarkers() { const defaultIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'; const activeIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; // 假设接口数据为markerData markerData.forEach(item => { const marker = new AMap.Marker({ position: [item.lng, item.lat], icon: defaultIcon, // 初始样式 content: `<div class="custom-marker">${item.title}</div>` }); // 绑定点击事件 marker.on('click', () => this.handleMarkerClick(marker, activeIcon, defaultIcon)); this.markers.push(marker); }); this.map.add(this.markers); // 将Marker添加到地图 } } ``` --- #### **3. 点击事件处理** 通过`setIcon()`方法动态修改样式: ```javascript methods: { // 处理Marker点击 handleMarkerClick(clickedMarker, activeIcon, defaultIcon) { if (this.currentMarker && this.currentMarker !== clickedMarker) { this.currentMarker.setIcon(defaultIcon); // 恢复一个Marker的默认样式 } clickedMarker.setIcon(activeIcon); // 设置当前Marker为激活样式 this.currentMarker = clickedMarker; // 更新当前选中Marker } } ``` --- #### **4. 完整示例** 整合初始化地图与事件绑定: ```javascript mounted() { this.initMap(); }, methods: { initMap() { this.map = new AMap.Map('map', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 10 }); this.addMarkers(); // 初始化完成后添加Marker }, // 其他方法同上 } ``` --- #### **关键说明** - **变量记录**:通过`currentMarker`跟踪当前激活的Marker,确保每次点击仅保留一个激活状态[^1] - **事件解耦**:每个Marker独立绑定事件,避免因数据更新导致的事件监听重复 - **性能优化**:若Marker数量较多,可结合`setExtData`存储状态,避免频繁操作DOM ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

_格鲁特宝宝

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

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

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

打赏作者

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

抵扣说明:

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

余额充值