关于高德地图添加Marker遇到的一些坑

最近有一个需求,是一个出行类的App,需要在乘客下单后在地图上显示乘客的头像以及司机的头像。
这时候就需要在地图上插上一个marker

ImageLoader.loadLisenter(mContext,headUrl,
imageView);
BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory
                .fromView(imageView1);
        LatLng latLng = new LatLng(lat,lon);

        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.setFlat(true);
        //设置覆盖物比例
        markerOptions.anchor(0.5f, 0.5f);
        markerOptions.icon(bitmapDescriptor);
        markerOptions.position(latLng);
        Marker marker = mAmap.addMarker(markerOptions);
        marker.setClickable(false);

这样做之后发现,我的Marker并没有显示出来,回头找原因发现我的图片加载用了两种,一种有头像Url时,则调用Glide去异步加载图片。

ImageLoader.load(mContext,url,imageView);
内部使用的Glide
public static void load(Context context, String url, ImageView iv) {
    Glide
            .with(context)
            .load(url)
            .crossFade()
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(iv);
}

第二种是调用本地的资源

imageView.setImageResource(R.mipmap.default_headimg);
BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory
        .fromView(imageView);

LatLng latLng = new LatLng(Double.parseDouble(mOrderDetailsBean.getUp_lat()),
        Double.parseDouble(mOrderDetailsBean.getUp_lon()));

MarkerOptions markerOptions = new MarkerOptions();
markerOptions.setFlat(true);
//设置覆盖物比例
markerOptions.anchor(0.5f, 0.5f);
markerOptions.icon(bitmapDescriptor);
markerOptions.position(latLng);
Marker marker = mAmap.addMarker(markerOptions);
marker.setClickable(false);

由于是异步加载,所以在addMarker的时候,图片尚未加载好,所以Marker添加的时候并没有图片,导致无法显示。后发现Glide中有一个监听加载的状态方法,尝试在需要异步加载的时候,监听加载状态,加载完成之后,再进行Marker的添加。最终完美解决了这个问题

public static void loadLisenter(Context context, String url, final ImageView imageView){
    Glide.with(context)
            .load(url)
            .crossFade()
            .transform(new CircleTransform(context))
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(new GlideDrawableImageViewTarget(imageView){
                @Override
                public void onResourceReady(GlideDrawable resource, GlideAnimation<? super
                                            GlideDrawable> animation) {
                    super.onResourceReady(resource, animation);

                    onLoadAccomplish.accomplish(resource.getCurrent(),imageView);
                }
            });
}

在ImageLoader封装的这个工具类中,添加了一个接口,在外部调用接口回调,得到加载完成的Resouce。
这个Resouce是GlideDrawable的对象,可以调用getCurrent();方法,得到Drawable对象,从而进行imageView的资源设置

@Override
public void accomplish(Drawable drawable, ImageView imageView) {
        ImageView imageView1 = new ImageView(mContext);
        LinearLayout.LayoutParams pl = new LinearLayout.LayoutParams(90, 90);
        imageView.setLayoutParams(pl);
        imageView1.setImageDrawable(drawable);

        BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory
                .fromView(imageView1);
        LatLng latLng = new LatLng(Double.parseDouble(mOrderDetailsBean.getUp_lat()),
                Double.parseDouble(mOrderDetailsBean.getUp_lon()));

        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.setFlat(true);
        //设置覆盖物比例
        markerOptions.anchor(0.5f, 0.5f);
        markerOptions.icon(bitmapDescriptor);
        markerOptions.position(latLng);
        Marker marker = mAmap.addMarker(markerOptions);
        marker.setClickable(false);
        }

拖了很久才开始写第一篇带了点技术的博客,刚开始写,发现自己并不知道怎么去描述,技术点也比较简单。希望能帮助到一些刚接触Android的小伙伴或者与我一样碰到这个问题的朋友吧。自己还需要多努力。写的不好或者不对的地方,欢迎大家提出来。

要在高德地图添加 marker 点,可以按照以下步骤进行: 1. 引入高德地图 JavaScript API 库 在 HTML 页面中引入高德地图 JavaScript API 库,可以在官网上下载或使用 CDN 引入。 2. 创建地图 使用 `new AMap.Map()` 方法创建一个地图实例,指定地图容器的 ID 和地图的中心点和缩放级别。 ``` var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); ``` 3. 创建 marker 点 使用 `new AMap.Marker()` 方法创建一个 marker 点,指定 marker 点的位置和其他属性。 ``` var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); ``` 4. 将 marker添加到地图中 使用 `map.add(marker)` 方法将 marker添加到地图中。 ``` map.add(marker); ``` 完整的代码示例: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图添加 marker 点</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图 API Key"></script> <style type="text/css"> #mapContainer { width: 100%; height: 500px; } </style> </head> <body> <div id="mapContainer"></div> <script type="text/javascript"> var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); map.add(marker); </script> </body> </html> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值