百度地图4.1_1开发教程(8)为marker加上备注

项目需要在marker上添加对应的备注,这个效果在其他App上也可以见到,在朋友的帮助下,发现实现这个效果也不是很难。
首先上效果图: 

这里写图片描述
由于没有找到合适的图片,所有备注的背景开口方向不对,这里仅做个示例不要在意那些细节。

还是应该先说一下实现思路吧,我们知道,marker的点的图标,是可以自定义的,根据我们公司web开发人员所说,web端是提供了为marker显示备注的api,但我们手机端没有对应的api,虽然,但是还是可以实现的。可能有人会想到,把显示的图标和备注写在一起做成,marker图标不就行了吗,而我,就是这样实现的。

主布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <com.baidu.mapapi.map.MapView
        android:id="@+id/activity_test_mv_mapview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"/>
</LinearLayout>

marker布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center_vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/item_main_flight_remark_iv_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:src="@mipmap/ic_flight"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/popup_flight_info"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/item_main_flight_remark_tv_remarks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"/>
    </LinearLayout>


</LinearLayout>
目前的布局是这样的:

这里写图片描述

    private BitmapDescriptor ic_flight;
    private Marker mBGMarker; // 飞机Marker

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        ButterKnife.bind(this);

        initWidget();
        addFlightInfo(FlightInfo.flightInfos);
    }

    private void initWidget()
    {
        mBaiduMap = mv_mapview.getMap();
    }

	/**
	* 添加marker
	**/
    private void addFlightInfo(List<FlightInfo> flightInfos)
    {
        LatLng latLng = null ;
        View view = LayoutInflater.from(TestActivity.this).inflate(R.layout.item_main_flight_remark, null);
        ImageView iv_image = (ImageView)view.findViewById(R.id.item_main_flight_remark_iv_image);
        TextView tv_remarks = (TextView)view.findViewById(R.id.item_main_flight_remark_tv_remarks);

        for (int i = 0; i < flightInfos.size(); i++)
        {
//            iv_image.setImageResource(R.mipmap.ic_del_all); // 自定义修改marker左边的图标
            tv_remarks.setText(String.format("型号:%1$s\n单位:%2$s\n速度:%3$s\n",flightInfos.get(i).getModel(),flightInfos.get(i).getNum(), flightInfos.get(i).getSpeed()));
            latLng = new LatLng(flightInfos.get(i).getLatitude(), flightInfos.get(i).getLongitude());
            ic_flight = BitmapDescriptorFactory.fromBitmap(getBitmapFromView(view));
            MarkerOptions mo = new MarkerOptions().position(latLng).icon(ic_flight).zIndex(i).draggable(true);
            mBGMarker = (Marker) (mBaiduMap.addOverlay(mo));
        }
        MapStatusUpdate u = MapStatusUpdateFactory.newLatLng(latlng);// 移动中心店至最后一个点
        mBaiduMap.animateMapStatus(u);
    }

FlightInfo.flightInfos是我写的静态类里的模拟数据
可以看到,我们的布局通过BitmapDescriptorFactory.fromBitmap(getBitmapFromView(view);这个方法,将布局加载成了一个bitmap,然后作为marker的点显示到地图上。

献上工具类:
public class BitmapTransView
{

    public static Bitmap getBitmapFromView(View view) {
        view.destroyDrawingCache();
        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.setDrawingCacheEnabled(true);
        Bitmap bitmap = view.getDrawingCache(true);
        return bitmap;
    }
}

如此,就实现了我们要的功能。结合我之前的博客可实现点击marker弹出详情等更多功能。

如果帮到你,请帮我点赞啦,谢谢。

工具下载地址:http://download.csdn.net/detail/u012552275/9705461


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值