web-dev-qa-db-ja.com

2つのクリック可能なボタンまたはImageViewを備えたGoogleマップv2カスタム情報ウィンドウ

enter image description here

上記のように2つのクリック可能なボタンを備えたカスタム情報ウィンドウが必要です。その中にマーカーがあり、それらのいずれかをクリックすると、ウィンドウが開き、別のマーカーをクリックすると、別のウィンドウがシングルクリックで前のウィンドウを開閉します。 Googleマップv2がボタン、チェックボックスなどのライブコンポーネントをサポートしない特定の理由はありますか？

androidgoogle-mapscustom-controlsgoogle-play-services
21
shivang Trivedi

あなたが達成しようとしていることは可能です。

この回答でレシピを見ることができます： https://stackoverflow.com/a/15040761/2183804

そして、 Google Play の実用的な実装。

9
MaciejGórski

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);
  }
}

activity_main

<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

  1. mapwrapperlauot（タグにパッケージ名を含める）
  2. MapWrapperLayout.Java
  3. OnInfoWindowElemTouchListener.Java

それが動作します。

4
swati srivastav

あなたが達成しようとしていることは不可能です。情報ウィンドウのXMLレイアウトを作成した場合でも、情報ウィンドウのコンテンツはレンダリングされ、マップ上に画像として表示されます。そのため、ウィンドウ全体に対してクリックリスナを1つだけ受け入れることができます。 1つのウィンドウに複数のクリックリスナーを指定することはできません。

更新： Docs ：から

注：描画される情報ウィンドウはライブビューではありません。ビューは、返される時点で（View.draw（Canvas）を使用して）イメージとしてレンダリングされます。これは、ビューに対する以降の変更がマップ上の情報ウィンドウに反映されないことを意味します。情報ウィンドウを後で更新するには（たとえば、画像が読み込まれた後）、showInfoWindow（）を呼び出します。さらに、情報ウィンドウは、タッチイベントやジェスチャイベントなどの通常のビューに典型的な対話性を尊重しません。ただし、以下のセクションで説明するように、情報ウィンドウ全体で一般的なクリックイベントをリッスンできます。

3
Emil Adz

この質問のサンプルAndroid studioプロジェクトを作成しました。

スクリーンショットを出力：-

enter image description here

enter image description here

enter image description here

完全なプロジェクトソースコードをダウンロードクリックここ

注意してください：Androidmanifest.xmlにAPIキーを追加する必要があります

3
Premkumar Manipillai

実際には、問題を解決し、ライブビューである情報ウィンドウを追加できるライブラリがあり、それと対話できます。

https://github.com/Appolica/InteractiveInfoWindowAndroid

2
Deyan Genovski