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

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

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

我想要完成的需求是：

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

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

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

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

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

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

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

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

//====================地图长按监听=============================
    
        @Override
    
        public void onMapLongClick(final LatLng latLng) {
    
            //将长按点设置为地图显示中心
    
            MapStatusUpdate mapStatusUpdate = MapStatusUpdateFactory.newLatLng(latLng);
    
            map.animateMapStatus(mapStatusUpdate);
    
            map.clear();//清空地图上的标记
    
            //长按点位置显示标记
    
            markerOptions = new MarkerOptions();
    
            markerOptions.position(latLng);
    
            BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromResource(R.drawable.location1);
    
            markerOptions.icon(bitmapDescriptor);
    
            markerOptions.zIndex(9);
    
            Marker marker = (Marker) map.addOverlay(markerOptions);
    
            //从xml创建要显示的View，并设置相应的值
    
            LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
    
            View view = inflater.inflate(R.layout.layout_map_item, null);
    
            TextView txtLatLng = (TextView)view.findViewById(R.id.text_item_latlng);
    
            final EditText background = (EditText) view.findViewById(R.id.ed_item_background);
    
            final EditText keyWord = (EditText) view.findViewById(R.id.ed_item_keyword);
    
            Button btnSearch = (Button) view.findViewById(R.id.btn_search);
    
            Button btnCancel = (Button) view.findViewById(R.id.btn_cancel);
    
            txtLatLng.setText("纬度："+latLng.latitude+",经度:"+latLng.longitude);
    
            final LatLng lngFinal = latLng;
    
            //点击view上面的检索按钮调用方法
    
            btnSearch.setOnClickListener(new View.OnClickListener() {
    
                @Override
    
                public void onClick(View v) {
    
                    //Log.d("WorkMainActivity","搜索附近500米");
    
                    map.clear();//清空地图上的标记
    
                    String circumBackground = background.getText().toString();
    
                    if(null==circumBackground||"".equals(circumBackground)){
    
                        return;
    
                    }else {
    
                        String keyWordString = keyWord.getText().toString();
    
                        if(null==keyWordString||"".equals(keyWordString)){
    
                            return;
    
                        }else {
    
                            int circum = Integer.parseInt(circumBackground);
    
                            PoiNearbySearchOption poiNearbySearchOption = new PoiNearbySearchOption();
    
                            poiNearbySearchOption.location(lngFinal);
    
                            //以长按坐标点为中心，画指定半径的圆，并制定透明度为100，作为搜索范围
    
                            CircleOptions circleOptions = new CircleOptions();
    
                            circleOptions.center(lngFinal);
    
                            circleOptions.radius(circum);
    
                            circleOptions.fillColor(Color.argb(100,28,95,167));
    
                            map.addOverlay(circleOptions);
    
                            poiNearbySearchOption.keyword(keyWordString);
    
                            poiNearbySearchOption.radius(circum);
    
                            poiSearch.searchNearby(poiNearbySearchOption);
    
                            poiSearch.setOnGetPoiSearchResultListener(WorkMainActivity.this);
    
                        }
    
                    }
    
                }
    
            });
    
            //点击取消按钮
    
            btnCancel.setOnClickListener(new View.OnClickListener() {
    
                @Override
    
                public void onClick(View v) {
    
                    //Log.d("WorkMainActivity","取消搜索");
    
                    map.hideInfoWindow();
    
                }
    
            });
    
            InfoWindow infoWindow = new InfoWindow(view, latLng, -47);
    
            map.showInfoWindow(infoWindow);
    
        }

至于View的定义文件，即layout\_map\_item文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="wrap_content"
                  android:background="#2B9685"
                  android:layout_height="wrap_content">
        <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:text="搜索附近"
                android:textSize="20sp"
                android:layout_gravity="center_horizontal"
                android:gravity="center_horizontal"
                />
        <TextView
                android:id="@+id/text_item_latlng"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="#37B158"
                />
        <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <EditText
                    android:id="@+id/ed_item_background"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#58C7F9"
                    android:hint="范围(m)"
                    />
            <EditText
                    android:id="@+id/ed_item_keyword"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#BCEAA7"
                    android:hint="关键字"
    
                    />
        </LinearLayout>
        <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <Button
                    android:id="@+id/btn_search"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="#BABA66"
                    android:textSize="20sp"
                    android:text="检索"
                    android:layout_weight="1"
                    />
            <Button
                    android:id="@+id/btn_cancel"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="#BABAFF"
                    android:textSize="20sp"
                    android:layout_weight="1"
                    android:text="取消"
                    />
        </LinearLayout>
    
    
    </LinearLayout>

结果发现，确实可行，运行效果如下：（注：该程序编译版本API 19，需要手机，模拟器4.4.2以上的版本才能正常运行，如果版本过低，可以更改 AndroidManifest.xml中的<uses-sdk android:minSdkVersion="19"/>标签，改成相应版本即可）

![Center 1][]

![Center 2][]

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

[下载源代码][Link 2]

[Link 1]: http://developer.baidu.com/map/index.php?title=androidsdk/guide/basicmap
[Center]: /images/20220806/0f613ea776204d68a679134b30a7332c.png
[Center 1]: /images/20220806/dca4f6366e8b425590e2a85ea95d2ccf.png
[Center 2]: /images/20220806/7a61781e6a8e495e89aa73e1d25603fe.png
[Link 2]: http://pan.baidu.com/s/1c0cXMFm