Android 百度地图 SDK v3.0.0 （三） 添加覆盖物Marker与InfoWindow的使用

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

 

上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向，如果你还不清楚，请查看：Android 百度地图 SDK v3.0.0 （二） 定位与结合方向传感器，本章会教大家如何添加覆盖物，实现周边搜索，以及对覆盖物的点击出现介绍等效果。

效果图：

我们的需求是，当用户点击衣食住行，或者对对附近搜索是，从服务器返回数据（经纬度，商家信息，介绍等），然后动态生成覆盖物，实现上述效果。关于图片，由于手机上的内存的有限性，所有的图片下载完成都应该存入预设的缓存中，例如LruCache，然后需要的时候从缓存取，缓存没有，下载完成放入缓存；即实现所有的图片所占的内存永远不会超过缓存预设的内存值，当然了本篇的重点不是这个，我直接拿了几张图片加入我们的项目中模拟。

1、承载数据的实体

我们从服务器返回的数据部分，最终可能是个Json数组，我们需要转换为实体集合，即下面的Info.java：

[java] view plaincopy
  1. package com.zhy.zhy_baidu_ditu_demo03;  
  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 = -758459502806858414L;  
  10.     /** 
  11.      * 精度 
  12.      */  
  13.     private double latitude;  
  14.     /** 
  15.      * 纬度 
  16.      */  
  17.     private double longitude;  
  18.     /** 
  19.      * 图片ID，真实项目中可能是图片路径 
  20.      */  
  21.     private int imgId;  
  22.     /** 
  23.      * 商家名称 
  24.      */  
  25.     private String name;  
  26.     /** 
  27.      * 距离 
  28.      */  
  29.     private String distance;  
  30.     /** 
  31.      * 赞数量 
  32.      */  
  33.     private int zan;  
  34.   
  35.     public static List<Info> infos = new ArrayList<Info>();  
  36.   
  37.     static  
  38.     {  
  39.         infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",  
  40.                 "距离209米", 1456));  
  41.         infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",  
  42.                 "距离897米", 456));  
  43.         infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装城",  
  44.                 "距离249米", 1456));  
  45.         infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",  
  46.                 "距离679米", 1456));  
  47.     }  
  48.   
  49.     public Info()  
  50.     {  
  51.     }  
  52.   
  53.     public Info(double latitude, double longitude, int imgId, String name,  
  54.             String distance, int zan)  
  55.     {  
  56.         super();  
  57.         this.latitude = latitude;  
  58.         this.longitude = longitude;  
  59.         this.imgId = imgId;  
  60.         this.name = name;  
  61.         this.distance = distance;  
  62.         this.zan = zan;  
  63.     }  
  64.   
  65.     public double getLatitude()  
  66.     {  
  67.         return latitude;  
  68.     }  
  69.   
  70.     public void setLatitude(double latitude)  
  71.     {  
  72.         this.latitude = latitude;  
  73.     }  
  74.   
  75.     public double getLongitude()  
  76.     {  
  77.         return longitude;  
  78.     }  
  79.   
  80.     public void setLongitude(double longitude)  
  81.     {  
  82.         this.longitude = longitude;  
  83.     }  
  84.   
  85.     public String getName()  
  86.     {  
  87.         return name;  
  88.     }  
  89.   
  90.     public int getImgId()  
  91.     {  
  92.         return imgId;  
  93.     }  
  94.   
  95.     public void setImgId(int imgId)  
  96.     {  
  97.         this.imgId = imgId;  
  98.     }  
  99.   
  100.     public void setName(String name)  
  101.     {  
  102.         this.name = name;  
  103.     }  
  104.   
  105.     public String getDistance()  
  106.     {  
  107.         return distance;  
  108.     }  
  109.   
  110.     public void setDistance(String distance)  
  111.     {  
  112.         this.distance = distance;  
  113.     }  
  114.   
  115.     public int getZan()  
  116.     {  
  117.         return zan;  
  118.     }  
  119.   
  120.     public void setZan(int zan)  
  121.     {  
  122.         this.zan = zan;  
  123.     }  
  124.   
  125. }  


我直接在实体类中声明了一个静态列表集合，模拟从服务器返回的数据Info.infos。

2、地图中动态添加Overlay

为了方便，我把按钮都放在menu菜单中：

[java] view plaincopy
  1. @Override  
  2. public boolean onOptionsItemSelected(MenuItem item)  
  3. {  
  4.     switch (item.getItemId())  
  5.     {  
  6.      case R.id.id_menu_map_addMaker:  
  7.         addInfosOverlay(Info.infos);  
  8.         break;  
  9.     ...   
  10.     ｝     
  11. ｝  

 

[java] view plaincopy
  1. /** 
  2.      * 初始化图层 
  3.      */  
  4.     public void addInfosOverlay(List<Info> infos)  
  5.     {  
  6.         mBaiduMap.clear();  
  7.         LatLng latLng = null;  
  8.         OverlayOptions overlayOptions = null;  
  9.         Marker marker = null;  
  10.         for (Info info : infos)  
  11.         {  
  12.             // 位置  
  13.             latLng = new LatLng(info.getLatitude(), info.getLongitude());  
  14.             // 图标  
  15.             overlayOptions = new MarkerOptions().position(latLng)  
  16.                     .icon(mIconMaker).zIndex(5);  
  17.             marker = (Marker) (mBaiduMap.addOverlay(overlayOptions));  
  18.             Bundle bundle = new Bundle();  
  19.             bundle.putSerializable("info", info);  
  20.             marker.setExtraInfo(bundle);  
  21.         }  
  22.         // 将地图移到到最后一个经纬度位置  
  23.         MapStatusUpdate u = MapStatusUpdateFactory.newLatLng(latLng);  
  24.         mBaiduMap.setMapStatus(u);  
  25.     }  


可以看到，我们迭代添加了Overlay，然后在返回的Marker中设置了商家的信息，用户用户对Marker的点击时，拿到商家数据生成详细信息布局。

3、为地图上的Marker添加点击事件：
[java] view plaincopy
  1. //对Marker的点击  
  2.         mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener()  
  3.         {  
  4.             @Override  
  5.             public boolean onMarkerClick(final Marker marker)  
  6.             {  
  7.                 //获得marker中的数据  
  8.                 Info info = (Info) marker.getExtraInfo().get("info");  
  9.                   
  10.                 InfoWindow mInfoWindow;  
  11.                 //生成一个TextView用户在地图中显示InfoWindow  
  12.                 TextView location = new TextView(getApplicationContext());  
  13.                 location.setBackgroundResource(R.drawable.location_tips);  
  14.                 location.setPadding(30, 20, 30, 50);  
  15.                 location.setText(info.getName());  
  16.                 //将marker所在的经纬度的信息转化成屏幕上的坐标  
  17.                 final LatLng ll = marker.getPosition();  
  18.                 Point p = mBaiduMap.getProjection().toScreenLocation(ll);  
  19.                 Log.e(TAG, "--!" + p.x + " , " + p.y);  
  20.                 p.y -= 47;  
  21.                 LatLng llInfo = mBaiduMap.getProjection().fromScreenLocation(p);  
  22.                 //为弹出的InfoWindow添加点击事件  
  23.                 mInfoWindow = new InfoWindow(location, llInfo,  
  24.                         new OnInfoWindowClickListener()  
  25.                         {  
  26.   
  27.                             @Override  
  28.                             public void onInfoWindowClick()  
  29.                             {  
  30.                                 //隐藏InfoWindow  
  31.                                 mBaiduMap.hideInfoWindow();  
  32.                             }  
  33.                         });  
  34.                 //显示InfoWindow  
  35.                 mBaiduMap.showInfoWindow(mInfoWindow);  
  36.                 //设置详细信息布局为可见  
  37.                 mMarkerInfoLy.setVisibility(View.VISIBLE);  
  38.                 //根据商家信息为详细信息布局设置信息  
  39.                 popupInfo(mMarkerInfoLy, info);  
  40.                 return true;  
  41.             }  
  42.         });  


根据商家的信息Info.java为详细信息布局中的控件添加数据（记得生成TextView的时候，先设置背景，再设置padding，不然可能会失效~~~）

[java] view plaincopy
  1. /** 
  2.      * 根据info为布局上的控件设置信息 
  3.      *  
  4.      * @param mMarkerInfo2 
  5.      * @param info 
  6.      */  
  7.     protected void popupInfo(RelativeLayout mMarkerLy, Info info)  
  8.     {  
  9.         ViewHolder viewHolder = null;  
  10.         if (mMarkerLy.getTag() == null)  
  11.         {  
  12.             viewHolder = new ViewHolder();  
  13.             viewHolder.infoImg = (ImageView) mMarkerLy  
  14.                     .findViewById(R.id.info_img);  
  15.             viewHolder.infoName = (TextView) mMarkerLy  
  16.                     .findViewById(R.id.info_name);  
  17.             viewHolder.infoDistance = (TextView) mMarkerLy  
  18.                     .findViewById(R.id.info_distance);  
  19.             viewHolder.infoZan = (TextView) mMarkerLy  
  20.                     .findViewById(R.id.info_zan);  
  21.   
  22.             mMarkerLy.setTag(viewHolder);  
  23.         }  
  24.         viewHolder = (ViewHolder) mMarkerLy.getTag();  
  25.         viewHolder.infoImg.setImageResource(info.getImgId());  
  26.         viewHolder.infoDistance.setText(info.getDistance());  
  27.         viewHolder.infoName.setText(info.getName());  
  28.         viewHolder.infoZan.setText(info.getZan() + "");  
  29.     }  


这里我们使用了一个ViewHoler进行控件的复用，让findViewById只会执行一次

[java] view plaincopy
  1. /** 
  2.  * 复用弹出面板mMarkerLy的控件 
  3.  *  
  4.  * @author zhy 
  5.  *  
  6.  */  
  7. private class ViewHolder  
  8. {  
  9.     ImageView infoImg;  
  10.     TextView infoName;  
  11.     TextView infoDistance;  
  12.     TextView infoZan;  
  13. }  


最后添加地图的单击事件，隐藏出现的详细信息布局和InfoWindow

[java] view plaincopy
  1. mBaiduMap.setOnMapClickListener(new OnMapClickListener()  
  2.         {  
  3.   
  4.             @Override  
  5.             public boolean onMapPoiClick(MapPoi arg0)  
  6.             {  
  7.                 return false;  
  8.             }  
  9.   
  10.             @Override  
  11.             public void onMapClick(LatLng arg0)  
  12.             {  
  13.                 mMarkerInfoLy.setVisibility(View.GONE);  
  14.                 mBaiduMap.hideInfoWindow();  
  15.   
  16.             }  
  17.         });  


最后看一下我们的布局文件：

[html] view plaincopy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <com.baidu.mapapi.map.MapView  
  7.         android:id="@+id/id_bmapView"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:clickable="true" />  
  11.   
  12.     <RelativeLayout  
  13.         android:id="@+id/id_marker_info"  
  14.         android:visibility="gone"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="220dp"  
  17.         android:layout_alignParentBottom="true"  
  18.         android:background="#CC4e5a6b"  
  19.         android:clickable="true" >  
  20.   
  21.         <ImageView  
  22.             android:id="@+id/info_img"  
  23.             android:layout_width="fill_parent"  
  24.             android:layout_height="150dp"  
  25.             android:layout_marginBottom="10dp"  
  26.             android:layout_marginLeft="12dp"  
  27.             android:layout_marginRight="12dp"  
  28.             android:layout_marginTop="10dp"  
  29.             android:alpha="1.0"  
  30.             android:background="@drawable/map_image_border_white"  
  31.             android:clickable="true"  
  32.             android:scaleType="fitXY"  
  33.             android:src="@drawable/a04" />  
  34.   
  35.         <RelativeLayout  
  36.             android:layout_width="fill_parent"  
  37.             android:layout_height="50dp"  
  38.             android:layout_alignParentBottom="true"  
  39.             android:background="@drawable/bg_map_bottom" >  
  40.   
  41.             <LinearLayout  
  42.                 android:layout_width="fill_parent"  
  43.                 android:layout_height="wrap_content"  
  44.                 android:layout_centerVertical="true"  
  45.                 android:layout_marginLeft="20dp"  
  46.                 android:orientation="vertical" >  
  47.   
  48.                 <TextView  
  49.                     android:id="@+id/info_name"  
  50.                     android:layout_width="wrap_content"  
  51.                     android:layout_height="wrap_content"  
  52.                     android:text="老米家泡馍小炒"  
  53.                     android:textColor="#FFF5EB" />  
  54.   
  55.                 <TextView  
  56.                     android:id="@+id/info_distance"  
  57.                     android:layout_width="wrap_content"  
  58.                     android:layout_height="wrap_content"  
  59.                     android:text="距离200米"  
  60.                     android:textColor="#FFF5EB" />  
  61.             </LinearLayout>  
  62.   
  63.             <LinearLayout  
  64.                 android:layout_width="wrap_content"  
  65.                 android:layout_height="wrap_content"  
  66.                 android:layout_alignParentRight="true"  
  67.                 android:layout_centerVertical="true"  
  68.                 android:layout_marginRight="20dp"  
  69.                 android:orientation="horizontal" >  
  70.   
  71.                 <ImageView  
  72.                     android:layout_width="wrap_content"  
  73.                     android:layout_height="wrap_content"  
  74.                     android:onClick="zan"  
  75.                     android:src="@drawable/map_zan" />  
  76.   
  77.                 <TextView  
  78.                     android:id="@+id/info_zan"  
  79.                     android:layout_width="wrap_content"  
  80.                     android:layout_height="wrap_content"  
  81.                     android:layout_gravity="center"  
  82.                     android:text="652"  
  83.                     android:textColor="#FFF5EB" />  
  84.             </LinearLayout>  
  85.         </RelativeLayout>  
  86.     </RelativeLayout>  
  87.   
  88. </RelativeLayout>  


除了MapView，其他都是详细信息的布局，默认是隐藏的，当用户点击Marker显示以及设置初值，当用户单击地图时再将其隐藏。

 

好了，到此介绍完毕~~

参考：http://blog.csdn.net/lmj623565791/article/details/37737213

Android 百度地图 SDK v3.0.0 （三） 添加覆盖物Marker与InfoWindow的使用,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢