前言

前文介紹百度地圖添加Marker的使用方法，Marker結(jié)合InfoWindow可展示更詳盡的信息。本文將介紹以下內(nèi)容：

1. 構(gòu)造InfoWindow對象的兩種方式；
2. 地圖類顯示和隱藏InfoWindow的方法；
3. 自定義InfoWindowAdapter類吗浩，通過Marker顯示InfoWindow。

InfoWindow 相關(guān)類和接口

BaiduMap類

InfoWindow 類

構(gòu)造方法

在地圖中顯示一個(gè)信息窗口右蒲，可以設(shè)置一個(gè)View作為該窗口的內(nèi)容阀湿，也可以設(shè)置一個(gè) BitmapDescriptor 作為該窗口的內(nèi)容。

方式一：通過添加View在地圖上展示瑰妄，交互操作通過View實(shí)現(xiàn)陷嘴。

方式二：將View轉(zhuǎn)化為Bitmap渲染在地圖上，交互操作通過InfoWindow實(shí)現(xiàn)间坐。這種方法性能比第一種方法要高灾挨。

getter

setter

OnInfoWindowClickListener 接口

// 信息窗口點(diǎn)擊事件監(jiān)聽接口
public interface OnInfoWindowClickListener {
    // 信息窗口點(diǎn)擊事件處理函數(shù)
    void onInfoWindowClick();
}

InfoWindowAdapter 相關(guān)類和方法

自定義適配器InfoWindowAdapter并設(shè)置map.setInfoWindowAdapter(adapter)梯轻，調(diào)用marker.showInfoWindow()即可實(shí)現(xiàn)顯示InfoWindow。

BaiduMap類

InfoWindowAdapter 接口

public interface InfoWindowAdapter {
    View getInfoWindowView(Marker marker);

    int getInfoWindowViewYOffset();

    InfoWindow getInfoWindow(Marker marker);
}

Marker 類

Marker中的InfoWindow方法

示例

在地圖上顯示多個(gè)Marker覆蓋物回官，點(diǎn)擊Marker顯示InfoWindow曹宴。其中InfoWindow顯示的信息通過MarkerOptions的extraInfo傳遞。

界面布局

1-布局.png

• 布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.baidudemo.MapInfoWindowActivity">

    <com.baidu.mapapi.map.MapView
        android:id="@+id/bmapView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@id/bottomView"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/bmapView">

        <RadioGroup
            android:id="@+id/RadioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_dark"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:paddingHorizontal="10dp">

            <RadioButton
                android:id="@+id/viewMode"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="true"
                android:onClick="setMarkerFlag"
                android:text="View Mode"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/bitmapMode"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="Bitmap Mode"
                android:textColor="@color/white"
                android:textStyle="bold" />

            <RadioButton
                android:id="@+id/adapter_mode"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="setMarkerFlag"
                android:text="Adapter Mode"
                android:textColor="@color/white"
                android:textStyle="bold" />

        </RadioGroup>

    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>

MapInfoWindow類

• 以下是MapInfoWindow部分代碼

常量

public static final String VIEW_MODE = "ViewMode";
public static final String BITMAP_MODE = "BitmapMode";
public static final String ADAPTER_MODE = "AdapterMode";

成員變量

// 覆蓋物列表
List<Overlay> overlays = new ArrayList<>();
// 選中的狀態(tài)
String selectedFlag = VIEW_MODE;
// 氣泡圖標(biāo)
ArrayList<BitmapDescriptor> bitmaps = new ArrayList<>();
int yOffset = 0; // InfoWindow相對于point在y軸的偏移量

初始化

int[] drawableIds = BubbleIcons.Number;
for (int drawableId : drawableIds) {
    BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(drawableId);
    if (yOffset == 0)
        yOffset = -bitmap.getBitmap().getHeight();

    bitmaps.add(bitmap);
}
initEvent();
map.setInfoWindowAdapter(new MyInfoWindowAdapter());

• 點(diǎn)擊Marker顯示InfoWindow歉提。

private void initEvent() {
    map.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() {
        @Override
        public boolean onMarkerClick(Marker marker) {
            switch (selectedFlag) {
            case VIEW_MODE:
                showViewMode(marker);
                break;
            case BITMAP_MODE:
                showBitmapMode(marker);
                break;
            case ADAPTER_MODE:
                showAdapterMode(marker);
                break;
            }
            return true;
        }
    });
}

創(chuàng)建與移除覆蓋物

• 批量添加覆蓋物笛坦，通過MarkerOptions的extraInfo区转，向InfoWindow傳遞數(shù)據(jù)。

public void addMarkers() {
    // 構(gòu)造大量坐標(biāo)數(shù)據(jù)
    List<LatLng> points = new ArrayList<>();
    points.add(new LatLng(39.97923, 116.357428));
    points.add(new LatLng(39.94923, 116.397428));
    points.add(new LatLng(39.97923, 116.437428));
    points.add(new LatLng(39.92353, 116.490705));
    points.add(new LatLng(40.023537, 116.289429));
    points.add(new LatLng(40.022211, 116.406137));

    // 創(chuàng)建OverlayOptions的集合
    List<OverlayOptions> optionsList = new ArrayList<>();
    for (int i = 0; i < points.size(); ++i) {
        // 創(chuàng)建OverlayOptions屬性
        MarkerOptions option = new MarkerOptions()
                .position(points.get(i))
                .icon(bitmaps.get(i));

        Bundle bundle = new Bundle();
        bundle.putInt("id", i + 1);
        option.extraInfo(bundle);
        // 將OverlayOptions添加到list
        optionsList.add(option);
    }

    // 在地圖上批量添加
    List<Overlay> newOverlays = map.addOverlays(optionsList);
    overlays.addAll(newOverlays);
}

public void removeOverlay() {
    // 批量刪除添加的多個(gè) Overlay
    //map.removeOverLays(overlays);

    // 清空地圖所有的 Overlay 覆蓋物以及 InfoWindow
    // map.clear();

    // 刪除覆蓋物
    for (Overlay overlay : overlays) {
        overlay.remove();
    }
    overlays.clear();
}

顯示與隱藏InfowWindow

• 視圖模式

// 使用View構(gòu)造InfoWindow
private void showViewMode(Marker marker) {
    LatLng latLng = marker.getPosition();
    int id = marker.getExtraInfo().getInt("id");

    // 用來構(gòu)造InfoWindow的Button
    Button button = new Button(context);
    button.setBackgroundResource(R.drawable.popup);
    button.setText("View示例-" + id);
    button.setTextColor(Color.BLACK);
    // 監(jiān)聽點(diǎn)擊事件
    button.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            map.hideInfoWindow();
        }
    });

    // 創(chuàng)建InfoWindow
    InfoWindow infoWindow = new InfoWindow(button, latLng, yOffset);
    // 顯示InfoWindow
    map.showInfoWindow(infoWindow);
}

• 位圖模式

private void showBitmapMode(Marker marker) {
    LatLng latLng = marker.getPosition();
    int id = marker.getExtraInfo().getInt("id");

    Button button = new Button(context);
    button.setBackgroundResource(R.drawable.popup);
    button.setText("Bitmap示例-" + id);
    button.setTextColor(Color.BLACK);
    button.setWidth(400);
    BitmapDescriptor bitmap = BitmapDescriptorFactory.fromView(button);

    // InfoWindow點(diǎn)擊事件監(jiān)聽接口
    InfoWindow.OnInfoWindowClickListener listener;
    // 監(jiān)聽點(diǎn)擊事件
    listener = new InfoWindow.OnInfoWindowClickListener() {
        public void onInfoWindowClick() {
            // 隱藏地圖上的所有InfoWindow
            map.hideInfoWindow();
        }
    };

    // 創(chuàng)建InfoWindow
    InfoWindow infoWindow = new InfoWindow(bitmap, latLng, yOffset, listener);
    // 顯示InfoWindow
    map.showInfoWindow(infoWindow);
}

• 適配器模式

private void showAdapterMode(Marker marker) {
    // 避免同時(shí)顯示多個(gè)InfoWindow
    map.hideInfoWindow();

    marker.showInfoWindow();
}

• 自定義適配器

private class MyInfoWindowAdapter implements InfoWindowAdapter {

    @Override
    public View getInfoWindowView(Marker marker) {
        return null;
    }

    @Override
    public int getInfoWindowViewYOffset() {
        return yOffset;
    }

    @Override
    public InfoWindow getInfoWindow(Marker marker) {
        LatLng latLng = marker.getPosition();
        int id = marker.getExtraInfo().getInt("id");

        Button button = new Button(context);
        button.setBackgroundResource(R.drawable.popup);
        button.setText("Adapter示例-" + id);
        button.setTextColor(Color.BLACK);
        button.setWidth(400);
        BitmapDescriptor bitmap = BitmapDescriptorFactory.fromView(button);

        // InfoWindow點(diǎn)擊事件監(jiān)聽接口
        InfoWindow.OnInfoWindowClickListener listener;
        listener = new InfoWindow.OnInfoWindowClickListener() {
            public void onInfoWindowClick() {
                map.hideInfoWindow();
            }
        };

        // 創(chuàng)建InfoWindow
        return new InfoWindow(bitmap, latLng, yOffset, listener);
    }
}

設(shè)置屬性

public void setFlag(String flag) {
    selectedFlag = flag;

    // 隱藏地圖上的所有InfoWindow
    map.hideInfoWindow();
}

加載與移除地圖

public void onMapLoaded() {
    addMarkers();
    setFlag(VIEW_MODE);
}

public void onMapDestroy() {
    removeOverlay();

    for (BitmapDescriptor bitmap : bitmaps) {
        bitmap.recycle();
    }
    bitmaps = null;
}

MapInfoWindowActivity 類

• 以下是MapInfoWindowActivity類部分代碼

控件響應(yīng)事件

public void setMarkerFlag(View view) {
    boolean checked = ((RadioButton) view).isChecked();
    if (!checked)
        return;

    int id = view.getId();
    String flag;
    if (id == R.id.viewMode)
        flag = MapInfoWindow.VIEW_MODE;
    else if (id == R.id.bitmapMode)
        flag = MapInfoWindow.BITMAP_MODE;
    else if (id == R.id.adapter_mode)
        flag = MapInfoWindow.ADAPTER_MODE;
    else
        return;
    mapInfoWindow.setFlag(flag);
}

運(yùn)行效果圖

2-效果圖.png