转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37737213

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

效果图:

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

1、承载数据的实体

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

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

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

2、地图中动态添加Overlay

为了方便,我把按钮都放在menu菜单中:

  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. ...
  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添加点击事件:
  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. InfoWindow mInfoWindow;
  10. //生成一个TextView用户在地图中显示InfoWindow
  11. TextView location = new TextView(getApplicationContext());
  12. location.setBackgroundResource(R.drawable.location_tips);
  13. location.setPadding(30, 20, 30, 50);
  14. location.setText(info.getName());
  15. //将marker所在的经纬度的信息转化成屏幕上的坐标
  16. final LatLng ll = marker.getPosition();
  17. Point p = mBaiduMap.getProjection().toScreenLocation(ll);
  18. Log.e(TAG, "--!" + p.x + " , " + p.y);
  19. p.y -= 47;
  20. LatLng llInfo = mBaiduMap.getProjection().fromScreenLocation(p);
  21. //为弹出的InfoWindow添加点击事件
  22. mInfoWindow = new InfoWindow(location, llInfo,
  23. new OnInfoWindowClickListener()
  24. {
  25. @Override
  26. public void onInfoWindowClick()
  27. {
  28. //隐藏InfoWindow
  29. mBaiduMap.hideInfoWindow();
  30. }
  31. });
  32. //显示InfoWindow
  33. mBaiduMap.showInfoWindow(mInfoWindow);
  34. //设置详细信息布局为可见
  35. mMarkerInfoLy.setVisibility(View.VISIBLE);
  36. //根据商家信息为详细信息布局设置信息
  37. popupInfo(mMarkerInfoLy, info);
  38. return true;
  39. }
  40. });

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

  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. mMarkerLy.setTag(viewHolder);
  22. }
  23. viewHolder = (ViewHolder) mMarkerLy.getTag();
  24. viewHolder.infoImg.setImageResource(info.getImgId());
  25. viewHolder.infoDistance.setText(info.getDistance());
  26. viewHolder.infoName.setText(info.getName());
  27. viewHolder.infoZan.setText(info.getZan() + "");
  28. }

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

  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

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

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

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

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

好了,到此介绍完毕~~

源码点击下载

注:开发者key需要换成自己申请的,不清楚申请的请看第一篇博客的。

Android 百度地图 SDK v3.0.0 (三) 添加覆盖物Marker与InfoWindow的使用的更多相关文章

  1. Android 百度地图 SDK v3.0.0 (三) 加入覆盖Marker与InfoWindow使用

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37737213 上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向, ...

  2. Android 百度地图 SDK v3.0.0 (四) 引入离线地图功能

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37758097 一直觉得地图应用支持离线地图很重要啊,我等移动2G屌丝,流量不易, ...

  3. Android 百度地图 SDK v3.0.0 (四) 离线地图功能介绍

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37758097 一直认为地图应用支持离线地图非常重要啊.我等移动2G屌丝,流量不易 ...

  4. Android 百度地图 SDK v3.0.0 (一)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37729091 最近公司要把百度地图集成的项目中,于是我就研究了一天百度地图的SD ...

  5. 《第一行代码》(三: Android 百度地图 SDK v3.0.0)

    百度地图的SDK变化较大,第一行代码里的demo已经不能用了,一直以为是代码类错误,害我花了很多时间,可以参考这位博主的:http://blog.csdn.net/lmj623565791/artic ...

  6. Android 百度地图 SDK v3.0.0 (二) 定位与结合方向传感器

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37730469 在上一篇博客中,我们成功把地图导入了我们的项目.本篇我们准备为地图 ...

  7. Android百度地图SDK 导航初始化和地图初始化引起的冲突

    如题,相同是百度地图SDK开发过程中遇到的一个问题.交代下背景: 开发了一款内嵌百度地图的应用,因此里面差点儿相同将眼下百度地图SDK开放的主要功能都用到了,定位,地图显示,覆盖物标示.POI搜索,行 ...

  8. Android 百度地图SDK 定位

    引用locSDK_6.1.3.jar,切记添加相应的so文件. 1.定位初始化,需要使用getApplicationContext() mLocClient = new LocationClient( ...

  9. Android 百度地图API(01)_开发环境 HelloBaiduMap

    转载于:http://blog.csdn.net/lmj623565791/article/details/37729091 转载于:http://blog.csdn.net/crazy1235/ar ...

随机推荐

  1. JTree用法及JTree使用经验总结

    import  java.awt.Dimension; import  java.awt.Color; import  javax.swing.JFrame; import  javax.swing. ...

  2. [转]Delphi 中动态链接库(dll)的建立和使用

    动态链接库是一个能够被应用程序和其它的DLL调用的过程和函数的集合体,它里面包含的是公共代码或资源.由于DLL代码使用了内存共享技术,在某些地方windows也给了DLL一些更高的权限,因而DLL中可 ...

  3. web开发 关于src跳转

    src跳转看传递的参数值,如果参数值一样就不会再次跳转,也不会向后台的服务器提供request. 想要随时都能跳转可以传递不同的参数,如 onClick="this.src='http:// ...

  4. javascript关于原型的深刻理解

    Javascript继承机制的设计思想   作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类&qu ...

  5. gdb调试memcached

    1.memcached安装前,要安装libevent 2.memcached在configure中 加上  CPPFLAGS='-ggdb3'选项 例如 本机  ./configure -prefix ...

  6. Python hashlib模块 (主要记录md5加密)

    python提供了一个进行hash加密的模块:hashlib 下面主要记录下其中的md5加密方式(sha1加密一样把MD5换成sha1) >>> import hashlib > ...

  7. 2014 青年歌手大赛 AC

    青年歌手大奖赛_评委会打分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. easyui tabs 真正刷新用法

    //刷新当前标签Tabs function RefreshTab(currentTab) { var url = $(currentTab.panel('options')).attr('href') ...

  9. laravel框架——学习笔记

    routes.php文件创建路由参数由{}包起来,不需要$ Route::get('/stu/{as}','StuController@show'); 在相对应的Controller创建funcito ...

  10. mschedule 简单linux进程管理(树莓派)

    树莓派是神奇的机器,CPU和内存都少的可怜,但体积小功耗低,在上面搞些动搞些西其实也挺有意思,挺好玩的.装的是pidara,基本服务没有精简多少,先cat一下CPU和RAM. [able@raspi ...