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

浏览数：14 / 时间：2015年06月11日

学习内容来自“慕课网”

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

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

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

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

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

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

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

  1 package com.example.map;
  2 
  3 import java.io.Serializable;
  4 import java.util.ArrayList;
  5 import java.util.List;
  6 
  7 public class Info implements Serializable
  8 {
  9     private static final long serialVersionUID = -1010711775392052966L;
 10     //经纬度
 11     private double latitude;
 12     private double longitude;
 13     //图片id
 14     private int imgId;
 15     //商家的名称
 16     private String name;
 17     //距离
 18     private String distance;
 19     //点赞的数量
 20     private int zan;
 21 
 22     public static List<Info> infos = new ArrayList<Info>();
 23     //这里的数据都是死的，实际开发中数据都是从服务器中获取的，这里只演示如何添加覆盖物这个效果
 24     static
 25     {
 26         infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",
 27                 "距离209米", 1456));
 28         infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",
 29                 "距离897米", 456));
 30         infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装城",
 31                 "距离249米", 1456));
 32         infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",
 33                 "距离679米", 1456));
 34     }
 35     //构造方法
 36     public Info(double latitude, double longitude, int imgId, String name,
 37             String distance, int zan)
 38     {
 39         this.latitude = latitude;
 40         this.longitude = longitude;
 41         this.imgId = imgId;
 42         this.name = name;
 43         this.distance = distance;
 44         this.zan = zan;
 45     }
 46 
 47     public double getLatitude()
 48     {
 49         return latitude;
 50     }
 51 
 52     public void setLatitude(double latitude)
 53     {
 54         this.latitude = latitude;
 55     }
 56 
 57     public double getLongitude()
 58     {
 59         return longitude;
 60     }
 61 
 62     public void setLongitude(double longitude)
 63     {
 64         this.longitude = longitude;
 65     }
 66 
 67     public int getImgId()
 68     {
 69         return imgId;
 70     }
 71 
 72     public void setImgId(int imgId)
 73     {
 74         this.imgId = imgId;
 75     }
 76 
 77     public String getName()
 78     {
 79         return name;
 80     }
 81 
 82     public void setName(String name)
 83     {
 84         this.name = name;
 85     }
 86 
 87     public String getDistance()
 88     {
 89         return distance;
 90     }
 91 
 92     public void setDistance(String distance)
 93     {
 94         this.distance = distance;
 95     }
 96 
 97     public int getZan()
 98     {
 99         return zan;
100     }
101 
102     public void setZan(int zan)
103     {
104         this.zan = zan;
105     }
106 
107 }

二、添加覆盖物

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

res-menu-main.xml

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

 1 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
 2 
 3     <item
 4         android:id="@+id/id_map_common"
 5         
 6         android:showAsAction="never"
 7         android:title="普通地图"/>
 8     <item
 9         android:id="@+id/id_map_site"
10         
11         android:showAsAction="never"
12         android:title="卫星地图"/>
13     <item
14         android:id="@+id/id_map_traffic"
15         
16         android:showAsAction="never"
17         android:title="实时交通(off)"/>
18     <item
19         android:id="@+id/id_map_location"
20         
21         android:showAsAction="never"
22         android:title="定位我的位置"/>
23     <item
24         android:id="@+id/id_mode_common"
25         
26         android:showAsAction="never"
27         android:title="普通模式"/>
28     <item
29         android:id="@+id/id_mode_following"
30         
31         android:showAsAction="never"
32         android:title="跟随模式"/>
33     <item
34         android:id="@+id/id_mode_compass"
35         
36         android:showAsAction="never"
37         android:title="罗盘模式"/>
38     <item
39         android:id="@+id/id_add_overlay"
40         
41         android:showAsAction="never"
42         android:title="添加覆盖物"/>
43 
44 </menu>

给菜单项添加响应事件

 1 //菜单按钮的响应事件
 2     @Override
 3     public boolean onOptionsItemSelected(MenuItem item) {
 4         // TODO Auto-generated method stub
 5         switch (item.getItemId()) {
 6         case R.id.id_map_common:
 7             mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
 8             break;
 9         case R.id.id_map_site:
10             mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
11             break;
12         case R.id.id_map_traffic:
13             if(mBaiduMap.isTrafficEnabled())
14             {
15                 mBaiduMap.setTrafficEnabled(false);
16                 item.setTitle("实时交通(off)");
17             }
18             else
19             {
20                 mBaiduMap.setTrafficEnabled(true);
21                 item.setTitle("实时交通(on)");
22             }
23             break;
24         case R.id.id_map_location:
25             //定位最新自己的位置
26             centerToMyLocation();
27             break;
28 
29         case R.id.id_mode_common:
30             //设置普通模式
31             mLocationMode = LocationMode.NORMAL;
32             break;
33         case R.id.id_mode_following:
34             //设置跟随模式
35             mLocationMode = LocationMode.FOLLOWING;
36             break;
37         case R.id.id_mode_compass:
38             //设置罗盘模式
39             mLocationMode = LocationMode.COMPASS;
40             break;
41         case R.id.id_add_overlay:
42             //设置添加覆盖物
43             addOverlays(Info.infos);
44             break;
45         default:
46             break;
47         }
48         return super.onOptionsItemSelected(item);
49     }

这是添加覆盖物的方法，

 1 private void addOverlays(List<Info> infos) {
 2         // TODO Auto-generated method stub
 3         //添加覆盖物
 4         //清楚定位的一些图层
 5         mBaiduMap.clear();
 6         // 经纬度
 7         LatLng latLng = null;
 8         Marker marker = null;
 9         OverlayOptions options;
10         for (Info info : infos)
11         {
12             // 经纬度
13             latLng = new LatLng(info.getLatitude(), info.getLongitude());
14             // 图标
15             options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);//5表示图层的位置，越大越在上面
16             marker = (Marker) mBaiduMap.addOverlay(options);
17             Bundle arg0 = new Bundle();
18             arg0.putSerializable("info", info);
19             marker.setExtraInfo(arg0);
20         }
21         //定位好之后，讲地图定位到最后一个图标的位置
22         MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
23         mBaiduMap.setMapStatus(msu);
24         
25     }

效果图：

技术分享

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

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

二、实现覆盖物信息效果

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="220dp"
 5     android:id="@+id/id_maker_ly"
 6     android:background="#cc4e5a6b" >
 7 
 8     <ImageView
 9         android:id="@+id/id_info_img"
10         android:layout_width="fill_parent"
11         android:layout_height="150dp"
12         android:layout_marginBottom="10dp"
13         android:layout_marginLeft="12dp"
14         android:layout_marginRight="12dp"
15         android:layout_marginTop="10dp"
16         android:background="@drawable/img_border"
17         android:scaleType="fitXY"
18         android:src="@drawable/a01" >
19     </ImageView>
20 
21     <RelativeLayout
22         android:layout_width="fill_parent"
23         android:layout_height="50dp"
24         android:layout_alignParentBottom="true"
25         android:background="@drawable/bg_map_bottom" >
26 
27         <LinearLayout
28             android:layout_width="wrap_content"
29             android:layout_height="wrap_content"
30             android:layout_centerVertical="true"
31             android:layout_marginLeft="20dp"
32             android:orientation="vertical" >
33 
34             <TextView
35                 android:id="@+id/id_info_name"
36                 android:layout_width="wrap_content"
37                 android:layout_height="wrap_content"
38                 android:text="老米家泡馍"
39                 android:textColor="#fff5eb" />
40 
41             <TextView
42                 android:id="@+id/id_info_distance"
43                 android:layout_width="wrap_content"
44                 android:layout_height="wrap_content"
45                 android:text="距离200米"
46                 android:textColor="#fff5eb" />
47         </LinearLayout>
48 
49         <LinearLayout
50             android:layout_width="wrap_content"
51             android:layout_height="wrap_content"
52             android:layout_alignParentRight="true"
53             android:layout_centerVertical="true"
54             android:layout_marginRight="20dp"
55             android:orientation="horizontal" >
56 
57             <ImageView
58                 android:layout_width="wrap_content"
59                 android:layout_height="wrap_content"
60                 android:background="@drawable/map_zan"
61                 android:clickable="true" />
62 
63             <TextView
64                 android:id="@+id/id_info_zan"
65                 android:layout_width="wrap_content"
66                 android:layout_height="wrap_content"
67                 android:text="789"
68                 android:layout_gravity="center"
69                 android:textColor="#fff5eb" />
70         </LinearLayout>
71     </RelativeLayout>
72 
73 </RelativeLayout>

注意第16行代码

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

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

res-drawable-img_border.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" >
 3 
 4     <stroke
 5         android:width="2dp"
 6         android:color="#AAFFFFFF" />
 7 
 8     <padding
 9         android:bottom="2dp"
10         android:left="2dp"
11         android:right="2dp"
12         android:top="2dp" >
13     </padding>
14 </shape>