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

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

效果图:

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

1、承载数据的实体

我们从server返回的数据部分,终于可能是个Json数组。我们须要转换为实体集合,即以下的Info.java:

  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. }

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

2、地图中动态加入Overlay

为了方便,我把button都放在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.  
  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,不然可能会失效~~~)

  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仅仅会运行一次

  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.  
  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. });

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

  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显示以及设置初值,当用户单击地图时再将其隐藏。

好了。到此介绍完毕~~

源代码点击下载

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

百度地图相关博客视频版本号已经上线:Android中百度地图的使用期待您的支持。

博主部分视频已经上线,假设你不喜欢枯燥的文本。请猛戳(初录。期待您的支持):

1、Android 自己定义控件实战 电商活动中的刮刮卡

2、Android自己定义控件实战  打造Android流式布局和热门标签

3、Android智能机器人“小慕”的实现

4、高仿QQ5.0側滑

5、高仿微信5.2.1主界面及消息提醒

百度地图相关博客视频版本号已经上线:Android中百度地图的使用期待您的支持。

博主部分视频已经上线,假设你不喜欢枯燥的文本。请猛戳(初录,期待您的支持):

1、Android 自己定义控件实战 电商活动中的刮刮卡

2、Android自己定义控件实战  打造Android流式布局和热门标签

3、Android智能机器人“小慕”的实现

4、高仿QQ5.0側滑

5、高仿微信5.2.1主界面和消息提醒

版权声明:本文博客原创文章。博客,未经同意,不得转载。

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. linux c coding style

    Linux kernel coding style This is a short document describing the preferred coding style for the lin ...

  2. linux stat系统调用,获取文件信息。

    stat 函数原型: int stat(const char *path, struct stat *buf); struct stat 说明 struct stat { mode_t st_mode ...

  3. [概率dp] ZOJ 3822 Domination

    题意: 给N×M的棋盘.每天随机找一个没放过棋子的格子放一个棋子 问使得每一个每列都有棋子的天数期望 思路: dp[i][j][k] 代表放了i个棋子占了j行k列 到达目标状态的期望 然后从 dp[n ...

  4. 编程算法 - 扑克牌的顺子 代码(C)

    扑克牌的顺子 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 从扑克牌中随机抽取5张牌, 推断是不是一个顺子, 即这5张牌是不是连续的. 2~1 ...

  5. Web 应用程序项目 XXXX 已配置为使用 IIS。 无法访问 IIS 元数据库。您没有足够的特权访问计算机上的 IIS 网站。(转载)

    Web 应用程序项目 XXXX 已配置为使用 IIS. 无法访问 IIS 元数据库.您没有足够的特权访问计算机上的 IIS 网站. 2012年05月19日 ⁄ 综合 ⁄ 共 261字 ⁄ 字号 小 中 ...

  6. KeyValuePair用法(转)

    转载自:http://blog.sina.com.cn/s/blog_9741eba801016w61.html C# KeyValuePair<TKey,TValue>的用法.结构体,定 ...

  7. 解析stm32的时钟

    STM32 时钟系统  http://blog.chinaunix.net/uid-24219701-id-4081961.html STM32的时钟系统 ***   http://www.cnblo ...

  8. Eclipse使用技巧总结(二)

    七.快速切换打开的文件 Ctrl + F6 八.快速大写.小写转换 Ctrl + Shift + Y Ctrl + Shift + X 九.快速删除光标所在行 Ctrl + D 十.快速复制 Ctrl ...

  9. 我的Python成长之路---第一天---Python基础(作业2:三级菜单)---2015年12月26日(雾霾)

    作业二:三级菜单 三级菜单 可一次进入各个子菜单 思路: 这个题看似不难,难点在于三层循环的嵌套,我的思路就是通过flag的真假来控制每一层的循环的,简单来说就是就是通过给每一层循环一个单独的布尔变量 ...

  10. java--继承的一些笔记

    public class Person { public void display(){ System.out.println("Play Person..."); } stati ...