百度地图创建InfoWindow自定义View显示

雨点打透心脏的1/2处 2022-08-06 14:25 1134阅读 0赞

最近学习使用百度地图,自己做了个可以简单搜索兴趣点,设置搜索范围,搜索关键字,定位功能的应用。在使用百度地图API时发现了问题。

我想要完成的需求是:

在地图上长按然后弹出自定义的View,并且能与用户进行交互操作。

但在百度地图开发指南中关于弹出覆盖物就简单的一段实例,如下: 查看连接

  1. 弹出窗覆盖物
  2. 弹出窗覆盖物的实现方式如下,开发者可利用此接口,构建具有更强交互性的地图页面。
  3. //创建InfoWindow展示的view
  4. Button button = new Button(getApplicationContext());
  5. button.setBackgroundResource(R.drawable.popup);
  6. //定义用于显示该InfoWindow的坐标点
  7. LatLng pt = new LatLng(39.86923, 116.397428);
  8. //创建InfoWindow , 传入 view, 地理坐标, y 轴偏移量
  9. InfoWindow mInfoWindow = new InfoWindow(button, pt, -47);
  10. //显示InfoWindow
  11. mBaiduMap.showInfoWindow(mInfoWindow);
  12. 下图为点击Marker弹出InfoWindow的示例图,开发者只需将InfoWindow的显示方法写在Maker的点击事件处理中即可实现该效果。
  13. 运行结果如下:

Center

从上面简单的代码看出, InfoWindow可以显示View,但上面的实例仅仅是使用代码动态的创建了一个简单的View,但能不能从xml初始化一个自定义复杂的View呢?

在网上查阅资料发现各种答案,可能是度娘的原因,反正是没有找到有效的方法。有的解决了,但方法超复杂,不忍直视了。

自己就去查阅百度API,在InfoWindow的构造方法:

  1. InfoWindow
  2. public InfoWindow(View view,
  3. LatLng position,
  4. int yOffset)
  5. 通过传入的 view 构造一个 InfoWindow, 此时只是利用该view生成一个Bitmap绘制在地图中。
  6. 参数:
  7. view - InfoWindow 展示的 view
  8. position - InfoWindow 显示的地理位置
  9. yOffset - InfoWindow Y 轴偏移量
  10. listener - InfoWindow 点击监听者
  11. 抛出:
  12. java.lang.IllegalArgumentException - view position 不能为 null

发现了InfoWindow的构造方法中,第一参数要求的是View,那能不能传入一个自定义的View呢,说干就干,就自己创建一个View,并将其传入InfoWindow,核心代码如下:

  1. //====================地图长按监听=============================
  2. @Override
  3. public void onMapLongClick(final LatLng latLng) {
  4. //将长按点设置为地图显示中心
  5. MapStatusUpdate mapStatusUpdate = MapStatusUpdateFactory.newLatLng(latLng);
  6. map.animateMapStatus(mapStatusUpdate);
  7. map.clear();//清空地图上的标记
  8. //长按点位置显示标记
  9. markerOptions = new MarkerOptions();
  10. markerOptions.position(latLng);
  11. BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.location1);
  12. markerOptions.icon(bitmapDescriptor);
  13. markerOptions.zIndex(9);
  14. Marker marker = (Marker) map.addOverlay(markerOptions);
  15. //从xml创建要显示的View,并设置相应的值
  16. LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
  17. View view = inflater.inflate(R.layout.layout_map_item, null);
  18. TextView txtLatLng = (TextView)view.findViewById(R.id.text_item_latlng);
  19. final EditText background = (EditText) view.findViewById(R.id.ed_item_background);
  20. final EditText keyWord = (EditText) view.findViewById(R.id.ed_item_keyword);
  21. Button btnSearch = (Button) view.findViewById(R.id.btn_search);
  22. Button btnCancel = (Button) view.findViewById(R.id.btn_cancel);
  23. txtLatLng.setText("纬度:"+latLng.latitude+",经度:"+latLng.longitude);
  24. final LatLng lngFinal = latLng;
  25. //点击view上面的检索按钮调用方法
  26. btnSearch.setOnClickListener(new View.OnClickListener() {
  27. @Override
  28. public void onClick(View v) {
  29. //Log.d("WorkMainActivity","搜索附近500米");
  30. map.clear();//清空地图上的标记
  31. String circumBackground = background.getText().toString();
  32. if(null==circumBackground||"".equals(circumBackground)){
  33. return;
  34. }else {
  35. String keyWordString = keyWord.getText().toString();
  36. if(null==keyWordString||"".equals(keyWordString)){
  37. return;
  38. }else {
  39. int circum = Integer.parseInt(circumBackground);
  40. PoiNearbySearchOption poiNearbySearchOption = new PoiNearbySearchOption();
  41. poiNearbySearchOption.location(lngFinal);
  42. //以长按坐标点为中心,画指定半径的圆,并制定透明度为100,作为搜索范围
  43. CircleOptions circleOptions = new CircleOptions();
  44. circleOptions.center(lngFinal);
  45. circleOptions.radius(circum);
  46. circleOptions.fillColor(Color.argb(100,28,95,167));
  47. map.addOverlay(circleOptions);
  48. poiNearbySearchOption.keyword(keyWordString);
  49. poiNearbySearchOption.radius(circum);
  50. poiSearch.searchNearby(poiNearbySearchOption);
  51. poiSearch.setOnGetPoiSearchResultListener(WorkMainActivity.this);
  52. }
  53. }
  54. }
  55. });
  56. //点击取消按钮
  57. btnCancel.setOnClickListener(new View.OnClickListener() {
  58. @Override
  59. public void onClick(View v) {
  60. //Log.d("WorkMainActivity","取消搜索");
  61. map.hideInfoWindow();
  62. }
  63. });
  64. InfoWindow infoWindow = new InfoWindow(view, latLng, -47);
  65. map.showInfoWindow(infoWindow);
  66. }

至于View的定义文件,即layout_map_item文件代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="wrap_content"
  5. android:background="#2B9685"
  6. android:layout_height="wrap_content">
  7. <TextView
  8. android:layout_width="100dp"
  9. android:layout_height="wrap_content"
  10. android:text="搜索附近"
  11. android:textSize="20sp"
  12. android:layout_gravity="center_horizontal"
  13. android:gravity="center_horizontal"
  14. />
  15. <TextView
  16. android:id="@+id/text_item_latlng"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_gravity="center_horizontal"
  20. android:background="#37B158"
  21. />
  22. <LinearLayout
  23. android:orientation="horizontal"
  24. android:layout_width="match_parent"
  25. android:layout_height="wrap_content">
  26. <EditText
  27. android:id="@+id/ed_item_background"
  28. android:layout_width="0dp"
  29. android:layout_height="wrap_content"
  30. android:layout_weight="1"
  31. android:background="#58C7F9"
  32. android:hint="范围(m)"
  33. />
  34. <EditText
  35. android:id="@+id/ed_item_keyword"
  36. android:layout_width="0dp"
  37. android:layout_height="wrap_content"
  38. android:layout_weight="1"
  39. android:background="#BCEAA7"
  40. android:hint="关键字"
  41. />
  42. </LinearLayout>
  43. <LinearLayout
  44. android:orientation="horizontal"
  45. android:layout_width="match_parent"
  46. android:layout_height="wrap_content">
  47. <Button
  48. android:id="@+id/btn_search"
  49. android:layout_width="0dp"
  50. android:layout_height="wrap_content"
  51. android:background="#BABA66"
  52. android:textSize="20sp"
  53. android:text="检索"
  54. android:layout_weight="1"
  55. />
  56. <Button
  57. android:id="@+id/btn_cancel"
  58. android:layout_width="0dp"
  59. android:layout_height="wrap_content"
  60. android:background="#BABAFF"
  61. android:textSize="20sp"
  62. android:layout_weight="1"
  63. android:text="取消"
  64. />
  65. </LinearLayout>
  66. </LinearLayout>

结果发现,确实可行,运行效果如下:(注:该程序编译版本API 19,需要手机,模拟器4.4.2以上的版本才能正常运行,如果版本过低,可以更改 AndroidManifest.xml中的标签,改成相应版本即可)

Center 1

Center 2

(下面附上程序全部代码)

下载源代码

发表评论

表情:
评论列表 (有 0 条评论,1134人围观)

还没有评论,来说两句吧...

相关阅读