自定义Google地图的InfoWindow样式

原来以为google地图的InfoWindow样式是不能改的,原来是API藏得太深,找了半天终于找出来了.

自定义InfoWindow样式,必须创建InfoWindowAdapter接口的具体实现,然后通过GoogleMap.setInfoWindowAdapter()加载自定义设计.
InfoWindowAdapter包含两个需要您实现的方法:getInfowWindow(Marker)和getInfoContent(Marker).API首先调用getInfoWindow(Marker),如果返回Null,接着调用getInfoContent(Marker).如果仍返回null,系统会使用默认信息窗口.

google地图默认的InfoWindow样式

image.png

默认实现方法

static final LatLng MELBOURNE = new LatLng(-37.81319, 144.96298);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .title("Melbourne")
                          .snippet("Population: 4,137,400"));

UI设计的实际样式

marker.jpg

关键代码

mGoogleMap.setInfoWindowAdapter(DeviceLocationInfoWindowAdapter(LayoutInflater.from(this)))

DeviceLocationInfoWindowAdapter.java

public class DeviceLocationInfoWindowAdapter implements GoogleMap.InfoWindowAdapter {

    private  final LayoutInflater mInflater;

    public DeviceLocationInfoWindowAdapter(LayoutInflater mInflater) {
        this.mInflater = mInflater;
    }
    @Override
    public View getInfoWindow(Marker marker) {
        return initialData(marker);
    }
    @Override
    public View getInfoContents(Marker marker) {
     return initialData(marker);
    }

    @NotNull
    private View initialData(Marker marker) {
        final View popup=mInflater.inflate(R.layout.info_window_device_location,null);
        LinearLayout ll_device=popup.findViewById(R.id.ll_device);
        ...
        return popup;
    }
}

info_window_device_location.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@mipmap/ic_pop"
        android:layout_margin="24dp"
        android:orientation="vertical"
        android:paddingTop="12dp"
        android:paddingStart="12dp"
        android:visibility="visible"
        android:paddingEnd="12dp"
        android:paddingBottom="20dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:gravity="center_vertical"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tv_server_site_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="..."
                android:textColor="#333333"
                android:textSize="16sp"
                android:textStyle="bold" />
            <TextView
                android:gravity="end"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/dla_nav"
                android:textColor="#FF2800"
                android:textSize="16sp" />
        </LinearLayout>


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:text="网点地址网点地址网点地址网点网点地址网点地址网点地址网点"
            android:textColor="#333333"
            android:textSize="14sp" />


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@mipmap/ic_phone"
                android:drawablePadding="3dp"
                android:text="@string/ssa_service_department"
                android:textColor="#888888"
                android:textSize="13sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="4dp"
                android:text="08031313131"
                android:textColor="@color/important_red"
                android:textSize="13sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@mipmap/ic_phone"
                android:drawablePadding="3dp"
                android:text="@string/ssa_market_department"
                android:textColor="#888888"
                android:textSize="13sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="4dp"
                android:text="08031313131"
                android:textColor="@color/important_red"
                android:textSize="13sp" />
        </LinearLayout>



    </LinearLayout>

    </LinearLayout>
</FrameLayout>

那么相关的信息(实体bean)是如何传递给InfoWindow的呢?
很简单,marker有个tag方法

在marker中传入

marker.tag = deviceListBean

在Adapter的initialData中接收

    @NotNull
    private View initialData(Marker marker) {
        final View popup=mInflater.inflate(R.layout.info_window_device_location,null);
            DeviceListBean bean= (DeviceListBean) marker.getTag();
            tv_digger_serial_number.setText(bean.getSerialno());
        return popup;
    }

注意：绘制的信息窗口不是实时视图。系统会在视图返回时将其渲染为图像（使用 View.draw(Canvas)）。这意味着，地图上的信息窗口不会反映对视图所做的任何后续更改。如需稍后（例如，在加载图像后）更新信息窗口，请调用 showInfoWindow()。此外，信息窗口不会遵循任何常规视图的典型互动（例如触摸或手势事件）。不过，您可以监听整个信息窗口上的一般点击事件。
信息窗口并非实时视图，而是以图像形式渲染在地图上的视图。因此，您在该视图上设置的任何监听器都会被忽略，并且您也无法区分该视图不同部分上的点击事件。建议您不要在自定义信息窗口内放置按钮、复选框或文本输入等互动组件。
参考
https://developers.google.com/maps/documentation/android-sdk/infowindows

如有问题,请联系我的微信---> vvvpp0