安卓开发_慕课网_百度地图_添加覆盖物

学习内容来自“慕课网”

本片学习内容接自前四篇基础

安卓开发_慕课网_百度地图

安卓开发_慕课网_百度地图_实现定位

安卓开发_慕课网_百度地图_实现方向传感器

安卓开发_慕课网_百度地图_实现模式转换

请先学习前4篇再学习本篇，因为本篇在前四篇的基础上进行代码的编写

一、新建一个类用来存放数据（距离，点赞数，介绍图等信息）

package com.example.map;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class Info implements Serializable
{
    private static final long serialVersionUID = -1010711775392052966L;
    //经纬度
    private double latitude;
    private double longitude;
    //图片id
    private int imgId;
    //商家的名称
    private String name;
    //距离
    private String distance;
    //点赞的数量
    private int zan;

    public static List<Info> infos = new ArrayList<Info>();
    //这里的数据都是死的，实际开发中数据都是从服务器中获取的，这里只演示如何添加覆盖物这个效果
    static
    {
        infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",
                "距离209米", 1456));
        infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",
                "距离897米", 456));
        infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装城",
                "距离249米", 1456));
        infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",
                "距离679米", 1456));
    }
    //构造方法
    public Info(double latitude, double longitude, int imgId, String name,
            String distance, int zan)
    {
        this.latitude = latitude;
        this.longitude = longitude;
        this.imgId = imgId;
        this.name = name;
        this.distance = distance;
        this.zan = zan;
    }

    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 int getImgId()
    {
        return imgId;
    }

    public void setImgId(int imgId)
    {
        this.imgId = imgId;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public String getDistance()
    {
        return distance;
    }

    public void setDistance(String distance)
    {
        this.distance = distance;
    }

    public int getZan()
    {
        return zan;
    }

    public void setZan(int zan)
    {
        this.zan = zan;
    }

}

二、添加覆盖物

首先在菜单中增加"添加覆盖物"菜单项

res-menu-main.xml

红色字体部分为新添加的代码部分

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/id_map_common"
        
        android:showAsAction="never"
        android:title="普通地图"/>
    <item
        android:id="@+id/id_map_site"
        
        android:showAsAction="never"
        android:title="卫星地图"/>
    <item
        android:id="@+id/id_map_traffic"
        
        android:showAsAction="never"
        android:title="实时交通(off)"/>
    <item
        android:id="@+id/id_map_location"
        
        android:showAsAction="never"
        android:title="定位我的位置"/>
    <item
        android:id="@+id/id_mode_common"
        
        android:showAsAction="never"
        android:title="普通模式"/>
    <item
        android:id="@+id/id_mode_following"
        
        android:showAsAction="never"
        android:title="跟随模式"/>
    <item
        android:id="@+id/id_mode_compass"
        
        android:showAsAction="never"
        android:title="罗盘模式"/>
38     <item
39         android:id="@+id/id_add_overlay"
40         
41         android:showAsAction="never"
42         android:title="添加覆盖物"/>

</menu>

给菜单项添加响应事件

//菜单按钮的响应事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        switch (item.getItemId()) {
        case R.id.id_map_common:
            mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
            break;
        case R.id.id_map_site:
            mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
            break;
        case R.id.id_map_traffic:
            if(mBaiduMap.isTrafficEnabled())
            {
                mBaiduMap.setTrafficEnabled(false);
                item.setTitle("实时交通(off)");
            }
            else
            {
                mBaiduMap.setTrafficEnabled(true);
                item.setTitle("实时交通(on)");
            }
            break;
        case R.id.id_map_location:
            //定位最新自己的位置
            centerToMyLocation();
            break;

        case R.id.id_mode_common:
            //设置普通模式
            mLocationMode = LocationMode.NORMAL;
            break;
        case R.id.id_mode_following:
            //设置跟随模式
            mLocationMode = LocationMode.FOLLOWING;
            break;
        case R.id.id_mode_compass:
            //设置罗盘模式
            mLocationMode = LocationMode.COMPASS;
            break;
41         case R.id.id_add_overlay:
42             //设置添加覆盖物
43             addOverlays(Info.infos);
            break;
        default:
            break;
        }
        return super.onOptionsItemSelected(item);
    }

这是添加覆盖物的方法 ，

private void addOverlays(List<Info> infos) {
        // TODO Auto-generated method stub
        //添加覆盖物
        //清楚定位的一些图层
        mBaiduMap.clear();
        // 经纬度
        LatLng latLng = null;
        Marker marker = null;
        OverlayOptions options;
        for (Info info : infos)
        {
            // 经纬度
            latLng = new LatLng(info.getLatitude(), info.getLongitude());
            // 图标
            options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);//5表示图层的位置，越大越在上面
            marker = (Marker) mBaiduMap.addOverlay(options);
            Bundle arg0 = new Bundle();
            arg0.putSerializable("info", info);
            marker.setExtraInfo(arg0);
        }
        //定位好之后，讲地图定位到最后一个图标的位置
        MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
        mBaiduMap.setMapStatus(msu);
        
    }

效果图：

可以看到，地图上显示了4个覆盖物的坐标，但是这些坐标无法点击

。下面学习实现点击坐标显示相应的信息效果

二、实现覆盖物信息效果

实现建立显示信息的信息框的布局文件

<RelativeLayout
        android:id="@+id/id_maker_ly"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_alignParentBottom="true"
        android:background="#cc4e5a6b"
        android:clickable="true"
        android:visibility="gone" >

        <ImageView
            android:id="@+id/id_info_img"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:layout_marginTop="10dp"
18             android:background="@drawable/img_border"
            android:scaleType="fitXY"
            android:src="@drawable/a01" >
        </ImageView>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/bg_map_bottom" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/id_info_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="老米家泡馍"
                    android:textColor="#fff5eb" />

                <TextView
                    android:id="@+id/id_info_distance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="距离200米"
                    android:textColor="#fff5eb" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:orientation="horizontal" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/map_zan"
                    android:clickable="true" />

                <TextView
                    android:id="@+id/id_info_zan"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="789"
                    android:textColor="#fff5eb" />
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>

注意第18行代码

这里还需要建一个.xml文件

在res目录下新建文件夹drawable 在此文件夹下新建img_border.xml

res-drawable-img_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke
        android:width="2dp"
        android:color="#AAFFFFFF" />

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" >
    </padding>
</shape>

信息框布局文件就由这两个.xml文件构成了

MainActivity.java

package com.example.map;

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.OnMarkerClickListener;
import com.baidu.mapapi.map.BitmapDescriptor;
import com.baidu.mapapi.map.BitmapDescriptorFactory;
import com.baidu.mapapi.map.InfoWindow;
import com.baidu.mapapi.map.MapPoi;
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.example.map.MyOrientationListener.OnOrientationListener;
import com.example.map.R;

import android.location.Location;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Point;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
    
    private MapView mMapView = null;
    private BaiduMap mBaiduMap;
    //简化代码            用于this.context=this;
    private Context context;
    //定位相关
    private LocationClient mLocationClient;
    private MyLocationListener mLocationListener;
    //是否第一次定位的标志
    private boolean isFirstIn = true;
    //定位经纬度
    private double mLatitude;
    private double mLongtitude;
    //自定义定位图标
    private BitmapDescriptor mIconLocation;
    private LocationMode mLocationMode;
    private MyOrientationListener myOrientationListener;
    private float mCurrentX;
 65     //添加覆盖物
 66     private BitmapDescriptor mMarker;
 67     //信息框的布局
 68     private RelativeLayout mMarkerLy;
    
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      //在使用SDK各组件之前初始化context信息，传入ApplicationContext  
        //注意该方法要再setContentView方法之前实现  
        SDKInitializer.initialize(getApplicationContext());  
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        this.context = this;
        initView();
        //初始化定位
        initLocation();
 85         //初始化覆盖物相关
 86         initMarker();
 87         mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener()
 88         {
 89             @Override
 90             public boolean onMarkerClick(Marker marker)
 91             {
 92                 Bundle extraInfo = marker.getExtraInfo();
 93                 Info info = (Info) extraInfo.getSerializable("info");
 94                 
 95                 ImageView iv = (ImageView) mMarkerLy.findViewById(R.id.id_info_img);
 96                 TextView distance = (TextView) mMarkerLy.findViewById(R.id.id_info_distance);
 97                 TextView name = (TextView) mMarkerLy.findViewById(R.id.id_info_name);
 98                 TextView zan = (TextView) mMarkerLy.findViewById(R.id.id_info_zan);
 99                 
100                 iv.setImageResource(info.getImgId());
101                 distance.setText(info.getDistance());
102                 name.setText(info.getName());
103                 zan.setText(info.getZan() + "");
104 
105                 mMarkerLy.setVisibility(View.VISIBLE);
106                 return true;
107             }
108         });
109         mBaiduMap.setOnMapClickListener(new OnMapClickListener()
110         {
111 
112             @Override
113             public boolean onMapPoiClick(MapPoi arg0)
114             {
115                 return false;
116             }
117 
118             @Override
119             public void onMapClick(LatLng arg0)
120             {
121                 mMarkerLy.setVisibility(View.GONE);
122                 mBaiduMap.hideInfoWindow();
123             }
124         });
125     }
126     
127     private void initMarker() {
128         // TODO Auto-generated method stub
129         //标记图标
130         mMarker = BitmapDescriptorFactory.fromResource(R.drawable.maker);
131         mMarkerLy = (RelativeLayout) findViewById(R.id.id_maker_ly);
132     }

    private void initView() {
        // TODO Auto-generated method stub
        mMapView = (MapView) findViewById(R.id.id_bmapView);
        mBaiduMap = mMapView.getMap();
        //设置打开时的显示比列  这里显示500m左右
        MapStatusUpdate msu = MapStatusUpdateFactory.zoomTo(15.0f); 
        mBaiduMap.setMapStatus(msu);
        }
    private void initLocation() {
        // TODO Auto-generated method stub
        mLocationClient = new LocationClient(this);
        mLocationListener = new MyLocationListener();
        mLocationClient.registerLocationListener(mLocationListener);
        //默认模式为普通型
        mLocationMode = LocationMode.NORMAL;
        LocationClientOption option = new LocationClientOption();
        option.setCoorType("bd09ll");
        option.setIsNeedAddress(true);
        option.setOpenGps(true);
        option.setScanSpan(1000);
        
        mLocationClient.setLocOption(option);
        
        // 初始化图标
        mIconLocation = BitmapDescriptorFactory.fromResource(R.drawable.navi_map_gps_locked);
        myOrientationListener = new MyOrientationListener(context);
        myOrientationListener.setOnOrientationListener(new OnOrientationListener()
        {
            @Override
            public void onOrientationChanged(float x)
            {
                mCurrentX = x;
            }
        });
    }
    //activity销毁时百度地图也销毁
    @Override  
    protected void onDestroy() {   
        super.onDestroy();  
        //在activity执行onDestroy时执行mMapView.onDestroy()，实现地图生命周期管理  
        mMapView.onDestroy();  
    }  
    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        // 开启定位
        mBaiduMap.setMyLocationEnabled(true);
        if (!mLocationClient.isStarted())
            mLocationClient.start();
        // 开启方向传感器
        myOrientationListener.start();
            
    }
    @Override
    protected void onStop() {
        // TODO Auto-generated method stub
        super.onStop();
        // 停止定位
        mBaiduMap.setMyLocationEnabled(false);
        mLocationClient.stop();
        // 停止方向传感器
        myOrientationListener.stop();
    }
    @Override  
    protected void onResume() {  
        super.onResume();  
        //在activity执行onResume时执行mMapView. onResume ()，实现地图生命周期管理  
        mMapView.onResume();  
        }  
    @Override  
    protected void onPause() {  
        super.onPause();  
        //在activity执行onPause时执行mMapView. onPause ()，实现地图生命周期管理  
        mMapView.onPause();  
        }  
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // TODO Auto-generated method stub
        
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    //菜单按钮的响应事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        switch (item.getItemId()) {
        case R.id.id_map_common:
            mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
            break;
        case R.id.id_map_site:
            mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
            break;
        case R.id.id_map_traffic:
            if(mBaiduMap.isTrafficEnabled())
            {
                mBaiduMap.setTrafficEnabled(false);
                item.setTitle("实时交通(off)");
            }
            else
            {
                mBaiduMap.setTrafficEnabled(true);
                item.setTitle("实时交通(on)");
            }
            break;
        case R.id.id_map_location:
            //定位最新自己的位置
            centerToMyLocation();
            break;

        case R.id.id_mode_common:
            //设置普通模式
            mLocationMode = LocationMode.NORMAL;
            break;
        case R.id.id_mode_following:
            //设置跟随模式
            mLocationMode = LocationMode.FOLLOWING;
            break;
        case R.id.id_mode_compass:
            //设置罗盘模式
            mLocationMode = LocationMode.COMPASS;
            break;
257         case R.id.id_add_overlay:
258             //设置添加覆盖物
259             addOverlays(Info.infos);
            break;
        default:
            break;
        }
        return super.onOptionsItemSelected(item);
    }
266     private void addOverlays(List<Info> infos) {
267         // TODO Auto-generated method stub
268         //添加覆盖物
269         //清楚定位的一些图层
270         mBaiduMap.clear();
271         // 经纬度
272         LatLng latLng = null;
273         Marker marker = null;
274         OverlayOptions options;
275         for (Info info : infos)
276         {
277             // 经纬度
278             latLng = new LatLng(info.getLatitude(), info.getLongitude());
279             // 图标
280             options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);//5表示图层的位置，越大越在上面
281             marker = (Marker) mBaiduMap.addOverlay(options);
282             Bundle arg0 = new Bundle();
283             arg0.putSerializable("info", info);
284             marker.setExtraInfo(arg0);
285         }
286         //定位好之后，讲地图定位到最后一个图标的位置
287         MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
288         mBaiduMap.setMapStatus(msu);
289         
290     }

    //进到自己的位置
    private void centerToMyLocation() {
        LatLng latLng = new LatLng(mLatitude,mLongtitude);
        
        MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
        mBaiduMap.animateMapStatus(msu);
    }
    private class MyLocationListener implements BDLocationListener{

        @Override
        public void onReceiveLocation(BDLocation location) {
            // TODO Auto-generated method stub
            MyLocationData data = new MyLocationData.Builder()//
            .direction(mCurrentX)//
            .accuracy(location.getRadius())//
            .latitude(location.getLatitude())//
            .longitude(location.getLongitude())//
            .build();
    mBaiduMap.setMyLocationData(data);
    // 设置自定义图标
    MyLocationConfiguration config = new MyLocationConfiguration(mLocationMode, true, mIconLocation);
    mBaiduMap.setMyLocationConfigeration(config);
    //获取最新经纬度
    mLatitude = location.getLatitude();
    mLongtitude = location.getLongitude();
    //判断是否第一次定位
    if (isFirstIn)
    {
        //设置经纬度
        LatLng latLng = new LatLng(location.getLatitude(),location.getLongitude());
        
        MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
        mBaiduMap.animateMapStatus(msu);
        //将是否第一次定位的标志 变为不是第一次定位
        isFirstIn = false;
        //显示当前定位的位置
        Toast.makeText(context, location.getAddrStr(),
                Toast.LENGTH_SHORT).show();
    }

        }
        
    }
}

 其中红色字体部分为本篇新加代码 

对应布局文件

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <RelativeLayout
        android:id="@+id/id_maker_ly"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_alignParentBottom="true"
        android:background="#cc4e5a6b"
        android:clickable="true"
        android:visibility="gone" >

        <ImageView
            android:id="@+id/id_info_img"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/img_border"
            android:scaleType="fitXY"
            android:src="@drawable/a01" >
        </ImageView>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@drawable/bg_map_bottom" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/id_info_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="老米家泡馍"
                    android:textColor="#fff5eb" />

                <TextView
                    android:id="@+id/id_info_distance"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="距离200米"
                    android:textColor="#fff5eb" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:orientation="horizontal" >

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/map_zan"
                    android:clickable="true" />

                <TextView
                    android:id="@+id/id_info_zan"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="789"
                    android:textColor="#fff5eb" />
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

效果图：

点击坐标便显示对应的信息，点击几个坐标以外的位置，信息框便会消失