高德地图点击marker图标改变效果实现过程

想在集成的高德地图中实现一个marker受到点击时,图标变大的效果,网上查了好多,要么不符合我的需求,要么语焉不详,干脆自己动手写了个,现在把代码分享出来

 

 


 


aMap.setOnMarkerClickListener(new OnMarkerClickListener() {

                @Override
                public boolean onMarkerClick(Marker marker) {      

                    marker.showInfoWindow();//显示大图标

                    lastBm = getNormalIcon(marker.getOptions());//记录即将被覆盖的原图,用于以后恢复

                    Marker markerNew = changeMarkerImg(marker);//改变marker的icon,并得到新的marker对象
                    String curMarkerId = markerNew.getId();// 记录下这个图标的id,用于判断再次点击是否还是这个按钮
                    resetMarker(curMarkerId, markerNew);//重置除点击按钮外的所有按钮
                    markerLast = markerNew;// 记录当前marker对象,用于下次点击时判断

                    return true;
                }
            });



2,更换marker的icon方法

    private Marker changeMarkerImg(Marker marker) {

        MarkerOptions options = marker.getOptions();
        options.getIcon().recycle();// 回收原图片

        Bitmap bm = BitmapFactory.decodeResource(getResources(),
                R.drawable.ico_dot);

        marker.setIcon(BitmapDescriptorFactory.fromBitmap(bm));
        return marker;
    }



3,重置除点击按钮外的所有按钮

private void resetMarker(String curMarkerId, Marker markerNew) {

        if (null != markerLast) {

            if (!TextUtils.equals(curMarkerId, markerLast.getId())) {

                markerLast.setIcon(new BitmapDescriptorFactory()
                        .fromBitmap(lastBm));

            }
        }

    }

4,生成infoWindow的回调方法

@Override
    public View getInfoWindow(Marker marker) {

        View infoWindow = getPressView(marker);

        return infoWindow;
    }


    @SuppressLint("NewApi")
    public View getPressView(Marker marker) {

        // 小气泡部分
        View infoWindow = getLayoutInflater().inflate(
                R.layout.custom_info_window, null);
        Bitmap bitmap = getPressIcon(marker.getOptions());
        BitmapDrawable background = new BitmapDrawable(
                MarkerActivity.this.getResources(), bitmap);
        infoWindow.findViewById(R.id.info_window).setBackground(background);

        // 业务部分

        buttomView.setVisibility(View.VISIBLE);

        marker.getSnippet();

        if (marker.getSnippet().contains("加油站")) {
            // 加油站图片
            markerName.setText("加油站");
        } else if (marker.getSnippet().contains("银行")) {
            // 银行图片
            markerName.setText("银行");
        } else if (marker.getSnippet().contains("厕所")) {
            // 厕所图片
            markerName.setText("厕所");
        }

        markerContent.setText("" + marker.getTitle());

        return infoWindow;
    }



5,生成默认图标bitmap的方法
    private Bitmap getNormalIcon(MarkerOptions options) {

        Bitmap bm = null;

        if (options.getSnippet().contains("加油站")) {
            // 加油站图片
            bm = BitmapFactory.decodeResource(getResources(),
                    R.drawable.ico_refuel_normal);
        } else if (options.getSnippet().contains("银行")) {
            // 银行图片
            bm = BitmapFactory.decodeResource(getResources(),
                    R.drawable.ico_money_normal);
        } else if (options.getSnippet().contains("厕所")) {
            // 厕所图片
            bm = BitmapFactory.decodeResource(getResources(),
                    R.drawable.ico_toilet_normal);
        }

        return bm;
    }


 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
改变高德地图marker的颜色,可以通过以下步骤实现: 1. 创建Marker时,设置Marker的icon属性为一个Image对象,该对象包含了Marker图标和大小等信息。 2. 创建Image对象时,可以通过设置Image的size和image属性来指定图标的大小和图片地址。同时,还可以通过设置Image的imageSize属性来指定实际图片的大小。 3. 在修改Marker的颜色时,可以通过创建一个新的Image对象来替换原有的icon属性,从而改变Marker的颜色。 下面是一个简单的示例代码,用于在点击Marker改变其颜色: ```javascript // 创建一个Marker对象 var marker = new AMap.Marker({ position: [116.39, 39.9], // Marker的位置 icon: new AMap.Icon({ // Marker图标 size: new AMap.Size(20, 20), // Marker的大小 imageSize: new AMap.Size(20, 20), // 实际图片的大小 image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' // 图片地址 }) }); // 添加Marker对象到地图上 map.add(marker); // 绑定Marker的click事件 marker.on('click', function() { // 创建一个新的Image对象,替换Marker的icon属性 marker.setIcon(new AMap.Icon({ size: new AMap.Size(20, 20), imageSize: new AMap.Size(20, 20), image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png' // 更改颜色后的图片地址 })); }); ``` 在上述代码中,我们创建了一个红色的Marker,并在其click事件中将其颜色替换为蓝色。你可以根据自己的需要修改这段代码,来实现你想要的Marker颜色变化效果
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值