码迷，mamicode.com
首页 > 移动开发 > 详细

android 百度地图系列之添加覆盖物和覆盖物的点击事件

时间：2016-07-03 19:40:23      阅读：261      评论：0      收藏：0      [点我收藏+]

标签：

之前讲了百度地图定位和地图基本操作，这篇博客讲一下，怎么去给地图添加覆盖物，并当点击覆盖物的时候显示详细信息。
要给地图添加覆盖物，首先需要覆盖物的经纬度，如果还要实现点击事件，显示详细的信息，还需要覆盖物的描述信息（如图片，位置名称等），所以先新建一个实体类，来存放这些信息。
实体类必须实现序列化接口

package com.zwinsoft.mybaidumap.entity;

import java.io.Serializable;

/**
 * 地图标注信息实体类
 * @author jing__jie
 *
 */
public class MarkerInfoUtil implements Serializable{
    private static final long serialVersionUID = 8633299996744734593L;

    private double latitude;//纬度
    private double longitude;//经度
    private String name;//名字
    private int imgId;//图片
    private String description;//描述
    //构造方法
    public MarkerInfoUtil() {}
    public MarkerInfoUtil(double latitude, double longitude, String name, int imgId, String description) {
        super();
        this.latitude = latitude;
        this.longitude = longitude;
        this.name = name;
        this.imgId = imgId;
        this.description = description;
    }
    //toString方法
    @Override
    public String toString() {
        return "MarkerInfoUtil [latitude=" + latitude + ", longitude=" + longitude + ", name=" + name + ", imgId="
                + imgId + ", description=" + description + "]";
    }
    //getter setter
    public double getLatitude() {
        return latitude;
    }
    public void setLatitude(double latitude) {
        this.latitude = latitude;
    }
    public double getLongitude() {
        return longitude;
    }
    public void setLongitude(double longitude) {
        this.longitude = longitude;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getImgId() {
        return imgId;
    }
    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
}

在activity中添加几条markerinfo数据，用来显示marker

private void setMarkerInfo() {
    infos = new ArrayList<MarkerInfoUtil>();
    infos.add(new MarkerInfoUtil(117.216624,39.142693,"天津站",R.drawable.tianjinzhan,"天津站，俗称天津东站，隶属北京铁路局管辖"));
    infos.add(new MarkerInfoUtil(117.176955,39.111345,"南开大学",R.drawable.nankai,"正式成立于1919年，是由严修、张伯苓秉承教育救国理念创办的综合性大学。"));
    infos.add(new MarkerInfoUtil(117.174081,39.094994,"天津水上公园",R.drawable.shuishang,"天津水上公园原称青龙潭，1951年7月1日正式对游客开放，有北方的小西子之称。"));
    }

在activity_main.xml中，添加一个按钮，当点击的时候显示marker，再次点击的时候marker消失。

case R.id.btn_marker:
    if(!showMarker){
        //显示marker
        addOverlay(infos);
        showMarker = true;
    }else{
        //关闭显示marker
        mBaiduMap.clear();
        showMarker = false;
    }
    break;

//显示marker
private void addOverlay(List<MarkerInfoUtil> infos2) {
    //清空地图
    mBaiduMap.clear();
    //创建marker的显示图标
    BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(R.drawable.ditu1);
    LatLng latLng = null;
    Marker marker;
    OverlayOptions options;
    for(MarkerInfoUtil info:infos){
        //获取经纬度
        latLng = new LatLng(info.getLatitude(),info.getLongitude());
        //设置marker
        options = new MarkerOptions()
                .position(latLng)//设置位置
                .icon(bitmap)//设置图标样式
                .zIndex(9) // 设置marker所在层级
                .draggable(true); // 设置手势拖拽;
        //添加marker
        marker = (Marker) mBaiduMap.addOverlay(options);
        //使用marker携带info信息，当点击事件的时候可以通过marker获得info信息
        Bundle bundle = new Bundle();
        //info必须实现序列化接口
        bundle.putSerializable("info", info);
        marker.setExtraInfo(bundle);
    }
    //将地图显示在最后一个marker的位置
    MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
    mBaiduMap.setMapStatus(msu);
}

这样marker就显示出来了。效果图：
技术分享
下面需要添加marker的点击事件，使marker在点击的时候，显示info中的信息。首先需要一个布局用来展示图片，名称等信息。

<RelativeLayout
    android:id="@+id/rl_marker"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="220dp" 
    android:background="#ffffff"
    android:visibility="gone"
    android:clickable="true"><!-- 如果不添加这个属性，当点击布局时，会和地图点击事件干扰 -->
    <ImageView 
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"/>
    <TextView 
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_img"
        android:textSize="18sp"
        android:textColor="#000000"
        android:layout_marginBottom="5dp"/>
    <TextView 
        android:id="@+id/tv_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_name"
        android:textSize="14sp"
        android:textColor="#000000"/>
</RelativeLayout>

添加marker的点击事件

//添加marker点击事件的监听
mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {
    @Override
    public boolean onMarkerClick(Marker marker) {
        //从marker中获取info信息
        Bundle bundle = marker.getExtraInfo();
        MarkerInfoUtil infoUtil = (MarkerInfoUtil) bundle.getSerializable("info");
        //将信息显示在界面上
        ImageView iv_img = (ImageView)rl_marker.findViewById(R.id.iv_img);
        iv_img.setBackgroundResource(infoUtil.getImgId());
        TextView tv_name = (TextView)rl_marker.findViewById(R.id.tv_name);
        tv_name.setText(infoUtil.getName());
        TextView tv_description = (TextView)rl_marker.findViewById(R.id.tv_description);
        tv_description.setText(infoUtil.getDescription());
        //将布局显示出来
        rl_marker.setVisibility(View.VISIBLE);
        return true;
    }
});

效果图：
技术分享
再添加一个地图点击事件，当点击地图的时候，将详细信息布局影藏

//地图点击事件
mBaiduMap.setOnMapClickListener(new OnMapClickListener() {
@Override
public boolean onMapPoiClick(MapPoi arg0) {
    return false;
}
@Override
public void onMapClick(LatLng arg0) {
    rl_marker.setVisibility(View.GONE);
}
});

其中点击显示info信息的布局是固定的，有时候我们需要显示一个infowindow，跟随在marker上，这就需要百度地图提供的InfoWindow来实现。
在marker的点击监听中添加

//infowindow中的布局
TextView tv = new TextView(MainActivity.this);
tv.setBackgroundResource(R.drawable.infowindow);
tv.setPadding(20, 10, 20, 20);
tv.setGravity(Gravity.CENTER);
tv.setTextColor(android.graphics.Color.WHITE);
tv.setText(infoUtil.getName());
bitmapDescriptor = BitmapDescriptorFactory.fromView(tv);
//infowindow位置
LatLng latLng = new LatLng(infoUtil.getLatitude(), infoUtil.getLongitude());
//infowindow点击事件
OnInfoWindowClickListener listener = new OnInfoWindowClickListener() {
    @Override
    public void onInfoWindowClick() {
        //隐藏infowindow
        mBaiduMap.hideInfoWindow();
    }
};
//显示infowindow，-47是偏移量，使infowindow向上偏移，不会挡住marker
InfoWindow infoWindow = new InfoWindow(bitmapDescriptor, latLng, -47, listener);
mBaiduMap.showInfoWindow(infoWindow);

效果图：
技术分享
下面总结一下MainActivity代码，包含地图控制（地图模式控制，地图缩放控制），地图定位，带方向的定位，显示覆盖物，显示覆盖物点击事件等，希望大家多多指正。

package com.zwinsoft.mybaidumap;

import java.util.ArrayList;
import java.util.List;

import com.baidu.location.BDLocation;
import com.baidu.location.BDLocationListener;
import com.baidu.location.LocationClient;
import com.baidu.location.LocationClientOption;
import com.baidu.mapapi.SDKInitializer;
import com.baidu.mapapi.map.BaiduMap;
import com.baidu.mapapi.map.BaiduMap.OnMapClickListener;
import com.baidu.mapapi.map.BaiduMap.OnMapStatusChangeListener;
import com.baidu.mapapi.map.BaiduMap.OnMarkerClickListener;
import com.baidu.mapapi.map.BitmapDescriptor;
import com.baidu.mapapi.map.BitmapDescriptorFactory;
import com.baidu.mapapi.map.InfoWindow;
import com.baidu.mapapi.map.InfoWindow.OnInfoWindowClickListener;
import com.baidu.mapapi.map.MapPoi;
import com.baidu.mapapi.map.MapStatus;
import com.baidu.mapapi.map.MapStatusUpdate;
import com.baidu.mapapi.map.MapStatusUpdateFactory;
import com.baidu.mapapi.map.MapView;
import com.baidu.mapapi.map.Marker;
import com.baidu.mapapi.map.MarkerOptions;
import com.baidu.mapapi.map.MyLocationConfiguration;
import com.baidu.mapapi.map.MyLocationConfiguration.LocationMode;
import com.baidu.mapapi.map.MyLocationData;
import com.baidu.mapapi.map.OverlayOptions;
import com.baidu.mapapi.model.LatLng;
import com.zwinsoft.mybaidumap.entity.MarkerInfoUtil;
import com.zwinsoft.mybaidumap.tools.MyOrientationListener;
import com.zwinsoft.mybaidumap.tools.MyOrientationListener.OnOrientationListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 我的百度地图首页
 * @author jing__jie
 *
 */
public class MainActivity extends Activity implements OnClickListener {
    private MapView mMapView = null;
    private BaiduMap mBaiduMap;
    private ImageButton ib_large,ib_small,ib_mode,ib_loc,ib_traffic,ib_marker;
    //模式切换，正常模式
    private boolean modeFlag = true;
    //当前地图缩放级别
    private float zoomLevel; 
    //定位相关
    private LocationClient mLocationClient;
    private MyLocationListener mLocationListener;
    //是否第一次定位，如果是第一次定位的话要将自己的位置显示在地图 中间
    private boolean isFirstLocation = true;
    //创建自己的箭头定位
    private BitmapDescriptor bitmapDescriptor;
    //经纬度
    double mLatitude;
    double mLongitude;
    //方向传感器监听
    private MyOrientationListener myOrientationListener;
    private float mLastX;
    private List<MarkerInfoUtil> infos;
    //显示marker
    private boolean showMarker = false;
    private RelativeLayout rl_marker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //在使用SDK各组件之前初始化context信息，传入ApplicationContext  
        //注意该方法要再setContentView方法之前实现  
        SDKInitializer.initialize(getApplicationContext());  
        setContentView(R.layout.activity_main);  
        //初始化控件
        initView();
        //初始化地图
        initMap();
        //定位
        initLocation();
        //创建自己的定位图标，结合方向传感器，定位的时候显示自己的方向
        initMyLoc();
        //创建marker信息
        setMarkerInfo();
    }  
    private void setMarkerInfo() {
        infos = new ArrayList<MarkerInfoUtil>();
        infos.add(new MarkerInfoUtil(117.216624,39.142693,"天津站",R.drawable.tianjinzhan,"天津站，俗称天津东站，隶属北京铁路局管辖"));
        infos.add(new MarkerInfoUtil(117.176955,39.111345,"南开大学",R.drawable.nankai,"正式成立于1919年，是由严修、张伯苓秉承教育救国理念创办的综合性大学。"));
        infos.add(new MarkerInfoUtil(117.174081,39.094994,"天津水上公园",R.drawable.shuishang,"天津水上公园原称青龙潭，1951年7月1日正式对游客开放，有北方的小西子之称。"));
    }
    private void initMyLoc() {
        //初始化图标
        bitmapDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.arrow);
        //方向传感器监听
        myOrientationListener = new MyOrientationListener(this);
        myOrientationListener.setOnOrientationListener(new OnOrientationListener() {

            @Override
            public void onOrientationChanged(float x) {
                mLastX = x;
            }
        });
    }
    private void initMap() {
        //获取地图控件引用  
        mMapView = (MapView) findViewById(R.id.bmapView);
        // 不显示缩放比例尺
        mMapView.showZoomControls(false);
        // 不显示百度地图Logo
        mMapView.removeViewAt(1);
        //百度地图
        mBaiduMap = mMapView.getMap();
        // 改变地图状态
        MapStatus mMapStatus = new MapStatus.Builder().zoom(15).build();
        MapStatusUpdate mMapStatusUpdate = MapStatusUpdateFactory.newMapStatus(mMapStatus);
        mBaiduMap.setMapStatus(mMapStatusUpdate);
        //设置地图状态改变监听器
        mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() {
            @Override
            public void onMapStatusChangeStart(MapStatus arg0) {
            }
            @Override
            public void onMapStatusChangeFinish(MapStatus arg0) {
            }
            @Override
            public void onMapStatusChange(MapStatus arg0) {
                //当地图状态改变的时候，获取放大级别
                zoomLevel = arg0.zoom;
            }
        });
        //地图点击事件
        mBaiduMap.setOnMapClickListener(new OnMapClickListener() {
            @Override
            public boolean onMapPoiClick(MapPoi arg0) {
                return false;
            }
            @Override
            public void onMapClick(LatLng arg0) {
                rl_marker.setVisibility(View.GONE);
            }
        });
    }
    private void initLocation() {
        //定位客户端的设置
        mLocationClient = new LocationClient(this);
        mLocationListener = new MyLocationListener();
        //注册监听
        mLocationClient.registerLocationListener(mLocationListener);
        //配置定位
        LocationClientOption option = new LocationClientOption();
        option.setCoorType("bd09ll");//坐标类型
        option.setIsNeedAddress(true);//可选，设置是否需要地址信息，默认不需要
        option.setOpenGps(true);//打开Gps
        option.setScanSpan(1000);//1000毫秒定位一次
        option.setIsNeedLocationPoiList(true);//可选，默认false，设置是否需要POI结果，可以在BDLocation.getPoiList里得到
        mLocationClient.setLocOption(option);

    }
    private void initView() {
        //地图控制按钮
        ib_large = (ImageButton)findViewById(R.id.ib_large);
        ib_large.setOnClickListener(this);
        ib_small = (ImageButton)findViewById(R.id.ib_small);
        ib_small.setOnClickListener(this);
        ib_mode = (ImageButton)findViewById(R.id.ib_mode);
        ib_mode.setOnClickListener(this);
        ib_loc = (ImageButton)findViewById(R.id.ib_loc);
        ib_loc.setOnClickListener(this);
        ib_traffic = (ImageButton)findViewById(R.id.ib_traffic);
        ib_traffic.setOnClickListener(this);
        ib_marker = (ImageButton)findViewById(R.id.ib_marker);
        ib_marker.setOnClickListener(this);
        rl_marker = (RelativeLayout)findViewById(R.id.rl_marker);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ib_large:
            if (zoomLevel < 18) {
                mBaiduMap.setMapStatus(MapStatusUpdateFactory.zoomIn());
                ib_small.setEnabled(true);
            } else {
                showInfo("已经放至最大，可继续滑动操作");
                ib_large.setEnabled(false);
            }
            break;
        case R.id.ib_small:
            if (zoomLevel > 6) {
                mBaiduMap.setMapStatus(MapStatusUpdateFactory.zoomOut());
                ib_large.setEnabled(true);
            } else {
                ib_small.setEnabled(false);
                showInfo("已经缩至最小，可继续滑动操作");
            }
            break;
        case R.id.ib_mode://卫星模式和普通模式
            if(modeFlag){
                modeFlag = false;
                mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
                showInfo("开启卫星模式");
            }else{
                modeFlag = true;
                mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
                showInfo("开启普通模式");
            }
            break;
        case R.id.ib_loc:
            isFirstLocation = true;
            showInfo("返回自己位置");
            break;
        case R.id.ib_traffic://是否开启交通图
            if(mBaiduMap.isTrafficEnabled()){
                mBaiduMap.setTrafficEnabled(false);
                ib_traffic.setBackgroundResource(R.drawable.offtraffic);
                showInfo("关闭实时交通图");
            }else{
                mBaiduMap.setTrafficEnabled(true);
                ib_traffic.setBackgroundResource(R.drawable.ontraffic);
                showInfo("开启实时交通图");
            }
            break;
        case R.id.ib_marker:
            if(!showMarker){
                //显示marker
                showInfo("显示覆盖物");
                addOverlay(infos);
                showMarker = true;
                ib_marker.setBackgroundResource(R.drawable.ditu4);
            }else{
                //关闭显示marker
                showInfo("关闭覆盖物");
                mBaiduMap.clear();
                showMarker = false;
                ib_marker.setBackgroundResource(R.drawable.ditu3);
            }
            break;
        default:
            break;
        }
    }  
    //显示marker
    private void addOverlay(List<MarkerInfoUtil> infos) {
        //清空地图
        mBaiduMap.clear();
        //创建marker的显示图标
        BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(R.drawable.ditu1);
        LatLng latLng = null;
        Marker marker;
        OverlayOptions options;
        for(MarkerInfoUtil info:infos){
            //获取经纬度
            latLng = new LatLng(info.getLatitude(),info.getLongitude());
            //设置marker
            options = new MarkerOptions()
                    .position(latLng)//设置位置
                    .icon(bitmap)//设置图标样式
                    .zIndex(9) // 设置marker所在层级
                    .draggable(true); // 设置手势拖拽;
            //添加marker
            marker = (Marker) mBaiduMap.addOverlay(options);
            //使用marker携带info信息，当点击事件的时候可以通过marker获得info信息
            Bundle bundle = new Bundle();
            //info必须实现序列化接口
            bundle.putSerializable("info", info);
            marker.setExtraInfo(bundle);
        }
        //将地图显示在最后一个marker的位置
        MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
        mBaiduMap.setMapStatus(msu);
        //添加marker点击事件的监听
        mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                //从marker中获取info信息
                Bundle bundle = marker.getExtraInfo();
                MarkerInfoUtil infoUtil = (MarkerInfoUtil) bundle.getSerializable("info");
                //将信息显示在界面上
                ImageView iv_img = (ImageView)rl_marker.findViewById(R.id.iv_img);
                iv_img.setBackgroundResource(infoUtil.getImgId());
                TextView tv_name = (TextView)rl_marker.findViewById(R.id.tv_name);
                tv_name.setText(infoUtil.getName());
                TextView tv_description = (TextView)rl_marker.findViewById(R.id.tv_description);
                tv_description.setText(infoUtil.getDescription());
                //将布局显示出来
                rl_marker.setVisibility(View.VISIBLE);

                //infowindow中的布局
                TextView tv = new TextView(MainActivity.this);
                tv.setBackgroundResource(R.drawable.infowindow);
                tv.setPadding(20, 10, 20, 20);
                tv.setTextColor(android.graphics.Color.WHITE);
                tv.setText(infoUtil.getName());
                tv.setGravity(Gravity.CENTER);
                bitmapDescriptor = BitmapDescriptorFactory.fromView(tv);
                //infowindow位置
                LatLng latLng = new LatLng(infoUtil.getLatitude(), infoUtil.getLongitude());
                //infowindow点击事件
                OnInfoWindowClickListener listener = new OnInfoWindowClickListener() {
                    @Override
                    public void onInfoWindowClick() {
                        //隐藏infowindow
                        mBaiduMap.hideInfoWindow();
                    }
                };
                //显示infowindow
                InfoWindow infoWindow = new InfoWindow(bitmapDescriptor, latLng, -47, listener);
                mBaiduMap.showInfoWindow(infoWindow);
                return true;
            }
        });
    }
    //自定义的定位监听
    private class MyLocationListener implements BDLocationListener{
        @Override
        public void onReceiveLocation(BDLocation location) {
            //将获取的location信息给百度map
            MyLocationData data = new MyLocationData.Builder()  
                    .accuracy(location.getRadius())  
                    // 此处设置开发者获取到的方向信息，顺时针0-360  
                    .direction(mLastX)
                    .latitude(location.getLatitude())  
                    .longitude(location.getLongitude())
                    .build();
            mBaiduMap.setMyLocationData(data);
            //更新经纬度
            mLatitude = location.getLatitude();
            mLongitude = location.getLongitude();
            //配置定位图层显示方式，使用自己的定位图标
            MyLocationConfiguration configuration = new MyLocationConfiguration(LocationMode.NORMAL, true, bitmapDescriptor);
            mBaiduMap.setMyLocationConfigeration(configuration);
            if(isFirstLocation){
                //获取经纬度
                LatLng ll = new LatLng(location.getLatitude(),location.getLongitude());
                MapStatusUpdate status = MapStatusUpdateFactory.newLatLng(ll);
                //mBaiduMap.setMapStatus(status);//直接到中间
                mBaiduMap.animateMapStatus(status);//动画的方式到中间
                isFirstLocation = false;
                showInfo("位置：" + location.getAddrStr());
            }
        }

    }
    @Override
    protected void onStart() {
        super.onStart();
        //开启定位
        mBaiduMap.setMyLocationEnabled(true);
        if(!mLocationClient.isStarted()){
            mLocationClient.start();
        }
        //开启方向传感器
        myOrientationListener.start();
    }
    @Override
    protected void onStop() {
        super.onStop();
        //关闭定位
        mBaiduMap.setMyLocationEnabled(false);
        if(mLocationClient.isStarted()){
            mLocationClient.stop();
        }
        //关闭方向传感器
        myOrientationListener.stop();
    }
    @Override  
    protected void onDestroy() {  
        super.onDestroy();  
        //在activity执行onDestroy时执行mMapView.onDestroy()，实现地图生命周期管理  
        mMapView.onDestroy();  
    }  
    @Override  
    protected void onResume() {  
        super.onResume();  
        //在activity执行onResume时执行mMapView. onResume ()，实现地图生命周期管理  
        mMapView.onResume();  
    }  
    @Override  
    protected void onPause() {  
        super.onPause();  
        //在activity执行onPause时执行mMapView. onPause ()，实现地图生命周期管理  
        mMapView.onPause();  
    }
    //显示消息
    private void showInfo(String str){
        Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    }
}

android 百度地图系列之添加覆盖物和覆盖物的点击事件

标签：

原文地址：http://blog.csdn.net/jing__jie/article/details/51800042
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！