android - Google map v2 Custom Infowindow with two clickable buttons or ImageView

Question

enter image description here

I need custom info window with two clickable button as above.In it when more then marker and click any one of them then window should be open and when click on another marker another window should open and close previous window as well in single click. is there any specific reason why google map v2 not support live component like button ,check box?

score 9 · Accepted Answer

你想要达到的目标是可能的。

您可以在此答案中看到配方：https ://stackoverflow.com/a/15040761/2183804

以及在Google Play上的工作实现。

score 4 · Accepted Answer

MainActivity.java

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class MainActivity extends Activity {

  private ViewGroup infoWindow;
  private TextView infoTitle;
  private TextView infoSnippet;
  private Button infoButton1, infoButton2;
  private OnInfoWindowElemTouchListener infoButtonListener;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.mapwrapperlauot);

    final MapFragment mapFragment =
        (MapFragment) getFragmentManager().findFragmentById(R.id.map);
    final MapWrapperLayout mapWrapperLayout =
        (MapWrapperLayout) findViewById(R.id.map_relative_layout);
    final GoogleMap map = mapFragment.getMap();


    mapWrapperLayout.init(map, getPixelsFromDp(this, 39 + 20));

    final Marker ki = map.addMarker(new MarkerOptions()
        .position(new LatLng(50.08, 14.43))
        .icon(BitmapDescriptorFactory
            .fromResource(R.drawable.circles)));

    infoWindow = (ViewGroup) getLayoutInflater()
        .inflate(R.layout.activity_main, null);
    infoButton1 = (Button) infoWindow.findViewById(R.id.b1);
    infoButton2 = (Button) infoWindow.findViewById(R.id.b2);

    infoButtonListener = new OnInfoWindowElemTouchListener(infoButton1,
        getResources().getDrawable(R.drawable.ic_launcher),
        getResources().getDrawable(R.drawable.ic_launcher)) {
      @Override
      protected void onClickConfirmed(View v, Marker marker) {
        Toast.makeText(getApplicationContext(),
            "click on button 1", Toast.LENGTH_LONG).show();
      }
    };
    infoButton1.setOnTouchListener(infoButtonListener);


    infoButtonListener = new OnInfoWindowElemTouchListener(infoButton2,
        getResources().getDrawable(R.drawable.ic_launcher),
        getResources().getDrawable(R.drawable.ic_launcher)) {
      @Override
      protected void onClickConfirmed(View v, Marker marker) {
        Toast.makeText(getApplicationContext(),
            "click on button 2", Toast.LENGTH_LONG).show();
      }
    };
    infoButton2.setOnTouchListener(infoButtonListener);

    infoWindow.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
      }
    });

    map.setInfoWindowAdapter(new InfoWindowAdapter() {
      @Override
      public View getInfoWindow(Marker marker) {
        infoButtonListener.setMarker(marker);
        mapWrapperLayout.setMarkerWithInfoWindow(marker, infoWindow);
        return infoWindow;
      }

      @Override
      public View getInfoContents(Marker marker) {
        // Setting up the infoWindow with current's marker info
        return null;
      }
    });
    ki.showInfoWindow();

    map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(50.08, 14.43), 15));
    map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
  }

  public static int getPixelsFromDp(Context context, float dp) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dp * scale + 0.5f);
  }
}

活动主

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/marker" >

        <Button 
            android:id="@+id/b1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Button1" 
            android:layout_marginBottom="10dp"   />

        <Button 
            android:id="@+id/b2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Button2"
            android:layout_marginBottom="10dp"    />

    </LinearLayout>
</RelativeLayout>

现在从链接https://stackoverflow.com/a/15040761/2183804复制以下文件

mapwrapperlauot（在标签中包含你的包名）
MapWrapperLayout.java
OnInfoWindowElemTouchListener.java

它会起作用的。

score 3 · Accepted Answer

你想要达到的目标是不可能的。即使您为信息窗口创建了 XML 布局，信息窗口的内容也会被渲染并呈现为地图上的图像。所以它只能接受整个窗口的一个点击监听器。您不能为一个窗口指定多个单击侦听器。

更新：来自文档：

注意：绘制的信息窗口不是实时视图。视图在返回时呈现为图像（使用 View.draw(Canvas)）。这意味着对视图的任何后续更改都不会反映在地图上的信息窗口中。要稍后更新信息窗口（例如，加载图像后），请调用 showInfoWindow()。此外，信息窗口不会尊重任何普通视图的典型交互性，例如触摸或手势事件。但是，您可以在整个信息窗口上收听通用单击事件，如下节所述。

score 3 · Accepted Answer

我已经为这个问题构建了一个示例 android studio 项目。

输出屏幕截图： -

下载完整的项目源代码点击 这里

请注意：您必须在 Androidmanifest.xml 中添加您的 API 密钥

score 2 · Accepted Answer

实际上有一个库可以解决您的问题并添加一个实时视图的信息窗口，您可以与之交互。

https://github.com/Appolica/InteractiveInfoWindowAndroid

android - Google map v2 Custom Infowindow with two clickable buttons or ImageView

5 回答 5

Related

Reference