InfoWindow新しいGoogleMapsAPI v2でマーカーをクリックした後、カスタムを作成しようとしています。Googleのオリジナルの地図アプリケーションのように見せたいです。このような：
私がImageButton中にいるとき、それは機能していません-全体InfoWindowだけでなく、全体が選択されていImageButtonます。それ自体はないのViewですが、スナップショットなので、個々のアイテムを区別できないからだと読みました。
情報ウィンドウに関する前のセクションで説明したように、情報ウィンドウはライブビューではなく、ビューが画像としてマップ上にレンダリングされます。その結果、ビューに設定したリスナーは無視され、ビューのさまざまな部分のクリックイベントを区別できなくなります。カスタム情報ウィンドウ内に、ボタン、チェックボックス、テキスト入力などのインタラクティブなコンポーネントを配置しないことをお勧めします。
しかし、グーグルがそれを使用する場合、それを作るための何らかの方法がなければなりません。誰かが何か考えを持っていますか？
私は運が悪かったので、この問題の解決策を自分で探していたので、ここであなたと共有したい自分自身を転がさなければなりませんでした。（私の悪い英語を許してください）（英語で別のチェコ人の男に答えるのは少しクレイジーです:-)）
私が最初に試したのは、古き良きものを使用することでしたPopupWindow。非常に簡単です。を聞いて、マーカーの上にOnMarkerClickListenerカスタムを表示するだけです。PopupWindowStackOverflowの他の何人かはこの解決策を提案しましたが、実際には一見するとかなり見栄えがします。しかし、このソリューションの問題は、マップを移動し始めるときに現れます。PopupWindow（いくつかのonTouchイベントを聞くことによって）可能な方法で自分で移動する必要がありますが、特に一部の低速デバイスでは、見栄えを十分に良くすることはできません。簡単な方法で、ある場所から別の場所に「ジャンプ」します。いくつかのアニメーションを使用してこれらのジャンプを磨くこともできますが、この方法ではPopupWindow、マップ上で私が気に入らない場所に常に「一歩遅れ」ます。
この時点で、私は他の解決策を考えていました。カスタムビューに付随するすべての可能性（アニメーションのプログレスバーなど）を表示するために、実際にはそれほど自由は必要ないことに気づきました。グーグルエンジニアでさえグーグルマップアプリでこのようにしないのには十分な理由があると思います。必要なのは、情報ウィンドウの1つまたは2つのボタンだけです。このボタンは、押された状態を表示し、クリックするといくつかのアクションをトリガーします。そこで、2つの部分に分かれる別のソリューションを思いつきました。
最初の部分：
最初の部分は、ボタンのクリックをキャッチしてアクションをトリガーできるようにすることです。私の考えは次のとおりです。
MapFragmentカスタムViewGroup内で（または）をラップしMapViewます（私のものはMapWrapperLayoutと呼ばれます）MapWrapperLayout、（InfoWindowが現在表示されている場合）最初にMotionEventsを以前に作成されたInfoWindowにルーティングします。MotionEventsを消費しない場合（InfoWindow内のクリック可能な領域などをクリックしなかったためなど）、イベントをMapWrapperLayoutのスーパークラスに移動させて、最終的にマップに配信されるようにします。MapWrapperLayoutのソースコードは次のとおりです。
package com.circlegate.tt.cg.an.lib.map;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.model.Marker;
import android.content.Context;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
public class MapWrapperLayout extends RelativeLayout {
/**
* Reference to a GoogleMap object
*/
private GoogleMap map;
/**
* Vertical offset in pixels between the bottom edge of our InfoWindow
* and the marker position (by default it's bottom edge too).
* It's a good idea to use custom markers and also the InfoWindow frame,
* because we probably can't rely on the sizes of the default marker and frame.
*/
private int bottomOffsetPixels;
/**
* A currently selected marker
*/
private Marker marker;
/**
* Our custom view which is returned from either the InfoWindowAdapter.getInfoContents
* or InfoWindowAdapter.getInfoWindow
*/
private View infoWindow;
public MapWrapperLayout(Context context) {
super(context);
}
public MapWrapperLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MapWrapperLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* Must be called before we can route the touch events
*/
public void init(GoogleMap map, int bottomOffsetPixels) {
this.map = map;
this.bottomOffsetPixels = bottomOffsetPixels;
}
/**
* Best to be called from either the InfoWindowAdapter.getInfoContents
* or InfoWindowAdapter.getInfoWindow.
*/
public void setMarkerWithInfoWindow(Marker marker, View infoWindow) {
this.marker = marker;
this.infoWindow = infoWindow;
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
boolean ret = false;
// Make sure that the infoWindow is shown and we have all the needed references
if (marker != null && marker.isInfoWindowShown() && map != null && infoWindow != null) {
// Get a marker position on the screen
Point point = map.getProjection().toScreenLocation(marker.getPosition());
// Make a copy of the MotionEvent and adjust it's location
// so it is relative to the infoWindow left top corner
MotionEvent copyEv = MotionEvent.obtain(ev);
copyEv.offsetLocation(
-point.x + (infoWindow.getWidth() / 2),
-point.y + infoWindow.getHeight() + bottomOffsetPixels);
// Dispatch the adjusted MotionEvent to the infoWindow
ret = infoWindow.dispatchTouchEvent(copyEv);
}
// If the infoWindow consumed the touch event, then just return true.
// Otherwise pass this event to the super class and return it's result
return ret || super.dispatchTouchEvent(ev);
}
}
これにより、InfoView内のビューが再び「ライブ」になります。OnClickListenersがトリガーを開始します。
2番目の部分： 残りの問題は、明らかに、画面にインフォウィンドウのUIの変更が表示されないことです。これを行うには、Marker.showInfoWindowを手動で呼び出す必要があります。これで、インフォウィンドウで永続的な変更（ボタンのラベルを別のラベルに変更するなど）を実行する場合は、これで十分です。
しかし、ボタンが押された状態またはその性質の何かを表示することはより複雑です。最初の問題は、（少なくとも）インフォウィンドウに通常のボタンが押された状態を表示させることができなかったことです。長時間ボタンを押しても、画面上で押されないままでした。これは、マップフレームワーク自体によって処理されるものであり、情報ウィンドウに一時的な状態が表示されないようにするものだと思います。しかし、私は間違っている可能性があります、私はこれを見つけようとしませんでした。
私がやったのは、もう1つの厄介なハックですOnTouchListener。ボタンを押したり離したりしたときに、ボタンをボタンに取り付けて、手動で背景を2つのカスタムドローアブルに切り替えました。1つは通常の状態のボタンで、もう1つは押された状態です。これはあまり良くありませんが、機能します:)。これで、画面上でボタンが通常状態から押された状態に切り替わるのを見ることができました。
最後のグリッチがまだ1つあります。ボタンのクリックが速すぎると、押された状態は表示されません。通常の状態のままです（ただし、クリック自体が発生するため、ボタンは「機能」します）。少なくともこれは私のギャラクシーネクサスに表示される方法です。それで、私が最後にしたことは、ボタンが押された状態でボタンを少し遅らせたことです。これも非常に醜く、古い低速のデバイスでどのように機能するかはわかりませんが、マップフレームワーク自体でさえこのようなことをしているのではないかと思います。あなたはそれを自分で試すことができます-インフォウィンドウ全体をクリックすると、それは少し長く押された状態のままになり、通常のボタンがそうします（これも-少なくとも私の電話では）。そして、これは実際には元のGoogleマップアプリでもどのように機能するかです。
とにかく、私はボタンの状態の変化と私が言及した他のすべてのものを処理するカスタムクラスを自分で書いたので、ここにコードがあります：
package com.circlegate.tt.cg.an.lib.map;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import com.google.android.gms.maps.model.Marker;
public abstract class OnInfoWindowElemTouchListener implements OnTouchListener {
private final View view;
private final Drawable bgDrawableNormal;
private final Drawable bgDrawablePressed;
private final Handler handler = new Handler();
private Marker marker;
private boolean pressed = false;
public OnInfoWindowElemTouchListener(View view, Drawable bgDrawableNormal, Drawable bgDrawablePressed) {
this.view = view;
this.bgDrawableNormal = bgDrawableNormal;
this.bgDrawablePressed = bgDrawablePressed;
}
public void setMarker(Marker marker) {
this.marker = marker;
}
@Override
public boolean onTouch(View vv, MotionEvent event) {
if (0 <= event.getX() && event.getX() <= view.getWidth() &&
0 <= event.getY() && event.getY() <= view.getHeight())
{
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN: startPress(); break;
// We need to delay releasing of the view a little so it shows the pressed state on the screen
case MotionEvent.ACTION_UP: handler.postDelayed(confirmClickRunnable, 150); break;
case MotionEvent.ACTION_CANCEL: endPress(); break;
default: break;
}
}
else {
// If the touch goes outside of the view's area
// (like when moving finger out of the pressed button)
// just release the press
endPress();
}
return false;
}
private void startPress() {
if (!pressed) {
pressed = true;
handler.removeCallbacks(confirmClickRunnable);
view.setBackground(bgDrawablePressed);
if (marker != null)
marker.showInfoWindow();
}
}
private boolean endPress() {
if (pressed) {
this.pressed = false;
handler.removeCallbacks(confirmClickRunnable);
view.setBackground(bgDrawableNormal);
if (marker != null)
marker.showInfoWindow();
return true;
}
else
return false;
}
private final Runnable confirmClickRunnable = new Runnable() {
public void run() {
if (endPress()) {
onClickConfirmed(view, marker);
}
}
};
/**
* This is called after a successful click
*/
protected abstract void onClickConfirmed(View v, Marker marker);
}
これが私が使用したカスタムInfoWindowレイアウトファイルです：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="10dp" >
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Title" />
<TextView
android:id="@+id/snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="snippet" />
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
テストアクティビティレイアウトファイル（MapFragmentの中にありますMapWrapperLayout）：
<com.circlegate.tt.cg.an.lib.map.MapWrapperLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/map_relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment" />
</com.circlegate.tt.cg.an.lib.map.MapWrapperLayout>
そして最後に、これらすべてを結び付けるテストアクティビティのソースコード：
package com.circlegate.testapp;
import com.circlegate.tt.cg.an.lib.map.MapWrapperLayout;
import com.circlegate.tt.cg.an.lib.map.OnInfoWindowElemTouchListener;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ViewGroup infoWindow;
private TextView infoTitle;
private TextView infoSnippet;
private Button infoButton;
private OnInfoWindowElemTouchListener infoButtonListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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 initialization
// 39 - default marker height
// 20 - offset between the default InfoWindow bottom edge and it's content bottom edge
mapWrapperLayout.init(map, getPixelsFromDp(this, 39 + 20));
// We want to reuse the info window for all the markers,
// so let's create only one class member instance
this.infoWindow = (ViewGroup)getLayoutInflater().inflate(R.layout.info_window, null);
this.infoTitle = (TextView)infoWindow.findViewById(R.id.title);
this.infoSnippet = (TextView)infoWindow.findViewById(R.id.snippet);
this.infoButton = (Button)infoWindow.findViewById(R.id.button);
// Setting custom OnTouchListener which deals with the pressed state
// so it shows up
this.infoButtonListener = new OnInfoWindowElemTouchListener(infoButton,
getResources().getDrawable(R.drawable.btn_default_normal_holo_light),
getResources().getDrawable(R.drawable.btn_default_pressed_holo_light))
{
@Override
protected void onClickConfirmed(View v, Marker marker) {
// Here we can perform some action triggered after clicking the button
Toast.makeText(MainActivity.this, marker.getTitle() + "'s button clicked!", Toast.LENGTH_SHORT).show();
}
};
this.infoButton.setOnTouchListener(infoButtonListener);
map.setInfoWindowAdapter(new InfoWindowAdapter() {
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
// Setting up the infoWindow with current's marker info
infoTitle.setText(marker.getTitle());
infoSnippet.setText(marker.getSnippet());
infoButtonListener.setMarker(marker);
// We must call this to set the current marker and infoWindow references
// to the MapWrapperLayout
mapWrapperLayout.setMarkerWithInfoWindow(marker, infoWindow);
return infoWindow;
}
});
// Let's add a couple of markers
map.addMarker(new MarkerOptions()
.title("Prague")
.snippet("Czech Republic")
.position(new LatLng(50.08, 14.43)));
map.addMarker(new MarkerOptions()
.title("Paris")
.snippet("France")
.position(new LatLng(48.86,2.33)));
map.addMarker(new MarkerOptions()
.title("London")
.snippet("United Kingdom")
.position(new LatLng(51.51,-0.1)));
}
public static int getPixelsFromDp(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int)(dp * scale + 0.5f);
}
}
それでおしまい。これまでのところ、これはGalaxy Nexus（4.2.1）とNexus 7（4.2.1）でのみテストしましたが、機会があれば、一部のGingerbread電話で試してみます。これまでに見つけた制限は、画面上のボタンがある場所からマップをドラッグして、マップを移動できないことです。どういうわけか克服できるかもしれませんが、今のところ、私はそれで生きることができます。
これは醜いハックだと知っていますが、これ以上良いものは見つかりませんでした。このデザインパターンが非常に必要なので、これがmap v1フレームワークに戻る理由になります（これは本当に避けたいです。フラグメントなどを含む新しいアプリの場合）。Googleが開発者にInfoWindowsにボタンを表示する公式の方法を提供していない理由がわかりません。これは非常に一般的なデザインパターンであり、さらにこのパターンは公式のGoogleマップアプリでも使用されています:)。インフォウィンドウでビューを「ライブ」にすることができない理由を理解しています。これにより、マップを移動したりスクロールしたりするときにパフォーマンスが低下する可能性があります。しかし、ビューを使用せずにこの効果を実現する方法がいくつかあるはずです。
この質問はすでに古いのですが、それでも...
私たちは、望ましいことを達成するために、当社でsipmleライブラリを作成しました-ビューとすべてを備えたインタラクティブな情報ウィンドウ。githubで確認できます。
お役に立てば幸いです:)
これが私の問題に対する見方です。AbsoluteLayout情報ウィンドウ（インタラクティブ機能と描画機能のすべてのビットを備えた通常のビュー）を含むオーバーレイを作成します。次にHandler、16ミリ秒ごとに情報ウィンドウの位置を地図上のポイントの位置と同期させることを開始します。クレイジーに聞こえますが、実際には機能します。
デモビデオ：https ：//www.youtube.com/watch？v = bT9RpH4p9mU （エミュレーターとビデオ録画が同時に実行されるため、パフォーマンスが低下することを考慮してください）。
デモのコード：https ：//github.com/deville/info-window-demo
詳細を提供する記事（ロシア語）： http： //habrahabr.ru/post/213415/
choose007's答えを得ることができなかった人のために
ソリューションclickListenerで常に正しく機能しない場合は、の代わりに実装してみてください。アクション またはのいずれかを使用してタッチイベントを処理します。何らかの理由で、マップはにディスパッチするときに奇妙な動作を引き起こします。chose007'sView.onTouchListenerclickListenerACTION_UPACTION_DOWNinfoWindowclickListeners
infoWindow.findViewById(R.id.my_view).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int action = MotionEventCompat.getActionMasked(event);
switch (action){
case MotionEvent.ACTION_UP:
Log.d(TAG,"a view in info window clicked" );
break;
}
return true;
}
編集：これは私がそれを段階的に行った方法です
まず、アクティビティ/フラグメントのどこかで独自の情報ウィンドウ（グローバル変数）を膨らませます。鉱山は断片の中にあります。また、インフォウィンドウレイアウトのルートビューがlinearlayoutであることを確認してください（何らかの理由で、relativelayoutがインフォウィンドウの画面の全幅を占めていました）
infoWindow = (ViewGroup) getActivity().getLayoutInflater().inflate(R.layout.info_window, null);
/* Other global variables used in below code*/
private HashMap<Marker,YourData> mMarkerYourDataHashMap = new HashMap<>();
private GoogleMap mMap;
private MapWrapperLayout mapWrapperLayout;
次に、Google Maps android apiのonMapReadyコールバックで（onMapReadyがマップ>ドキュメント-はじめに）とは何かわからない場合は、これに従ってください）
@Override
public void onMapReady(GoogleMap googleMap) {
/*mMap is global GoogleMap variable in activity/fragment*/
mMap = googleMap;
/*Some function to set map UI settings*/
setYourMapSettings();
MapWrapperLayout初期化
http://stackoverflow.com/questions/14123243/google-maps-android-api-v2-interactive-infowindow-like-in-original-android-go/15040761#1504076139-
デフォルトのマーカーの高さ20-間のオフセットデフォルトのインフォウィンドウの下端とそのコンテンツの下端*/
mapWrapperLayout.init(mMap, Utils.getPixelsFromDp(mContext, 39 + 20));
/*handle marker clicks separately - not necessary*/
mMap.setOnMarkerClickListener(this);
mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
YourData data = mMarkerYourDataHashMap.get(marker);
setInfoWindow(marker,data);
mapWrapperLayout.setMarkerWithInfoWindow(marker, infoWindow);
return infoWindow;
}
});
}
SetInfoWindowメソッド
private void setInfoWindow (final Marker marker, YourData data)
throws NullPointerException{
if (data.getVehicleNumber()!=null) {
((TextView) infoWindow.findViewById(R.id.VehicelNo))
.setText(data.getDeviceId().toString());
}
if (data.getSpeed()!=null) {
((TextView) infoWindow.findViewById(R.id.txtSpeed))
.setText(data.getSpeed());
}
//handle dispatched touch event for view click
infoWindow.findViewById(R.id.any_view).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int action = MotionEventCompat.getActionMasked(event);
switch (action) {
case MotionEvent.ACTION_UP:
Log.d(TAG,"any_view clicked" );
break;
}
return true;
}
});
マーカークリックを個別に処理する
@Override
public boolean onMarkerClick(Marker marker) {
Log.d(TAG,"on Marker Click called");
marker.showInfoWindow();
CameraPosition cameraPosition = new CameraPosition.Builder()
.target(marker.getPosition()) // Sets the center of the map to Mountain View
.zoom(10)
.build();
mMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition),1000,null);
return true;
}
ただの憶測ですが、試してみるのに十分な経験がありません...）-：
GoogleMapはフラグメントであるため、マーカーonClickイベントをキャッチして、カスタムフラグメントビューを表示できるはずです。マップフラグメントは引き続き背景に表示されます。誰かがそれを試しましたか？それが機能しなかった理由は何ですか？
欠点は、カスタム情報フラグメントがコントロールを返すまで、マップフラグメントがバックグラウンドでフリーズすることです。
この質問のためにサンプルのAndroidStudioプロジェクトをビルドしました。
スクリーンショットを出力する：-
プロジェクトの完全なソースコードをダウンロードするには、ここをクリックし てください
注意： Androidmanifest.xmlにAPIキーを追加する必要があります
とても簡単です。
googleMap.setInfoWindowAdapter(new InfoWindowAdapter() {
// Use default InfoWindow frame
@Override
public View getInfoWindow(Marker marker) {
return null;
}
// Defines the contents of the InfoWindow
@Override
public View getInfoContents(Marker marker) {
// Getting view from the layout file info_window_layout
View v = getLayoutInflater().inflate(R.layout.info_window_layout, null);
// Getting reference to the TextView to set title
TextView note = (TextView) v.findViewById(R.id.note);
note.setText(marker.getTitle() );
// Returning the view containing InfoWindow contents
return v;
}
});
GoogleMapを使用しているクラスに上記のコードを追加するだけです。R.layout.info_window_layoutは、infowindowの代わりに表示されるビューを表示するカスタムレイアウトです。ここにテキストビューを追加しました。ここに追加のビューを追加して、サンプルスナップのようにすることができます。私のinfo_window_layoutは
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="@+id/note"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
お役に立てば幸いです。カスタム情報ウィンドウの実用的な例は、 http： //wptrafficanalyzer.in/blog/customizing-infowindow-contents-in-google-map-android-api-v2-using-infowindowadapter/#comment-39731にあり ます。
編集済み：このコードは、infoWindowにカスタムビューを追加する方法を示しています。このコードは、カスタムビューアイテムのクリックを処理しませんでした。ですから、答えに近いのですが、正確には答えではないので、答えとして受け入れられません。