如何在Android上自定义Google地图中的标记信息窗口

Question

在我的应用程序中，我想要制作自定义标记的信息窗口，并为其设置透明背景。
我编写了以下代码，但它仍然显示错误的背景。我想要透明背景，而不是白色背景。
我的代码:

       this.infoWindow = (ViewGroup) getLayoutInflater().inflate(R.layout.custominfowindow_one_button, null);

    this.infoButton = (Button) infoWindow.findViewById(R.id.button);
    this.infoButton_cancel=(Button) infoWindow.findViewById(R.id.btn_close_infowindow) ;
    mapWrapperLayout = (MapWrapperLayout) findViewById(R.id.map_relative_layout);
    mapWrapperLayout.init(mMap, getPixelsFromDp(this, 39 + 20));
    infoButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            infoWindowReady = !infoWindowReady;
        }
    });

    this.infoButtonListener = new OnInfoWindowElemTouchListener(infoButton, getResources().getDrawable(R.color.trans),
            getResources().getDrawable(R.color.trans),context) {
        @Override
        protected void onClickConfirmed(View v, Marker marker) {

        }
    };

    this.infoButton.setOnTouchListener(infoButtonListener);
    this.infoButton_cancelListener = new OnInfoWindowElemTouchListener(infoButton_cancel, getResources().getDrawable(R.drawable.ic_cancel3),
            getResources().getDrawable(R.drawable.ic_cancel3),context) {
        @Override
        protected void onClickConfirmed(View v, Marker marker) {
            addmarker_map.hideInfoWindow();

        }
    };

    this.infoButton_cancel.setOnTouchListener(infoButton_cancelListener );

    mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
        @Override
        public View getInfoWindow(Marker marker) {
            return null;
        }

        @Override
        public View getInfoContents(Marker marker) {

            if (serviceName == "geocode" && !hasGeoInfo) {
                if (__counter == 1) {
                    infoButton.setText("نشانگر");
                    togglePopup();
                } else if (__counter + "" == null) {
                    __counter = 0;
                    __counter++;
                } else {
                    __counter++;
                }
            }
            infoButtonListener.setMarker(marker);
            mapWrapperLayout.setMarkerWithInfoWindow(marker, infoWindow);
            return infoWindow;
        }
    });

我的XML代码：

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/dfhdfthd">

    <Button
        android:id="@+id/btn_close_infowindow"
        android:layout_width="@dimen/size25dp"
        android:layout_height="@dimen/size25dp"
        android:layout_marginLeft="@dimen/size70dp"
        android:background="@drawable/ic_cancel3"
        android:backgroundTint="#868585" />


    <Button
        android:id="@+id/button"
        android:layout_width="@dimen/size100dp"
        android:layout_height="@dimen/size30dp"
        android:layout_below="@+id/btn_close_infowindow"
        android:layout_marginTop="-5dp"
        android:background="@color/trans" />


</RelativeLayout>

请查看这张图片以了解我的意思：https://image.ibb.co/bsx7W5/photo_2017_09_21_12_44_22.jpg 如何为信息窗口设置透明背景？请帮助我。

- Miss. Hani

---

你需要创建九宫格图片。 - akhilesh0707

@akhilesh0707，对我没用，我的兄弟 :( - Miss. Hani

@akhilesh0707，请查看我的更新帖子。我分享了我的XML文件。 - Miss. Hani

@akhilesh0707，请帮帮我，兄弟。 - Miss. Hani

请查看我更新后的答案。 - akhilesh0707

Answer 1

将下面的图片下载并在drawable文件夹中命名为custom_info_bubble.9.png

在custominfowindow_one_button的根布局上添加背景。

android:background="@drawable/custom_info_bubble"

Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_info_bubble">

    <Button
        android:id="@+id/btn_close_infowindow"
        android:layout_width="@dimen/size25dp"
        android:layout_height="@dimen/size25dp"
        android:layout_marginLeft="@dimen/size70dp"
        android:background="@drawable/ic_cancel3"
         />

    <Button
        android:id="@+id/button"
        android:layout_width="@dimen/size100dp"
        android:layout_height="@dimen/size30dp"
        android:layout_below="@+id/btn_close_infowindow"
        android:layout_marginTop="-5dp"
         />
</RelativeLayout>

- akhilesh0707

---

我尝试了你的方法，但是仍然显示白色背景 :( - Miss. Hani

你试过我上面的答案了吗？ - akhilesh0707

你下载了这张图片吗？ - akhilesh0707

将上述图像重命名为 custom_info_bubble.9.png。 - akhilesh0707

Answer 2

@Override

public View getInfoWindow(Marker args) {  
   View v = getActivity().getLayoutInflater().inflate(R.layout.marker_tab_layout, null);

   return v;

}

如果您的方法返回null，则会在背景中显示白色信息窗口，改为返回您的custom_info_contents.xml而不是null。

- Renu

Answer 3

创建/res/layout/custom_info_contents.xml文件来定义我们自定义信息内容的布局。

<?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="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:adjustViewBounds="true"
            android:src="@drawable/ic_launcher"/>
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10dp"/>
    </LinearLayout>

</LinearLayout>

为了实现我们的自定义信息内容，我们需要创建自定义InfoWindowAdapter类。重写getInfoContents（Marker marker）以返回我们的自定义视图。并调用myMap.setInfoWindowAdapter（new MyInfoWindowAdapter（））来设置我们的InfoWindowAdapter。在这个练习中，我们没有处理getInfoWindow（Marker marker），只需简单地返回null。

import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.GoogleMap.OnMapLongClickListener;
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.app.AlertDialog;
import android.app.FragmentManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity 
 implements OnMapLongClickListener{

 class MyInfoWindowAdapter implements InfoWindowAdapter{

        private final View myContentsView;

  MyInfoWindowAdapter(){
   myContentsView = getLayoutInflater().inflate(R.layout.custom_info_contents, null);
  }
  @Override
  public View getInfoContents(Marker marker) {
   TextView tvTitle = ((TextView)myContentsView.findViewById(R.id.title));
            tvTitle.setText(marker.getTitle());
            TextView tvSnippet = ((TextView)myContentsView.findViewById(R.id.snippet));
            tvSnippet.setText(marker.getSnippet());

            return myContentsView;
  }

  @Override
  public View getInfoWindow(Marker marker) {
   // TODO Auto-generated method stub
   return null;
  }

 }

 final int RQS_GooglePlayServices = 1;
 GoogleMap myMap;
 TextView tvLocInfo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvLocInfo = (TextView)findViewById(R.id.locinfo);

        FragmentManager myFragmentManager = getFragmentManager();
        MapFragment myMapFragment 
         = (MapFragment)myFragmentManager.findFragmentById(R.id.map);
        myMap = myMapFragment.getMap();

        myMap.setMyLocationEnabled(true);

        //myMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
        //myMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        //myMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
        myMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);

        myMap.getUiSettings().setZoomControlsEnabled(true);
        myMap.getUiSettings().setCompassEnabled(true);
        myMap.getUiSettings().setMyLocationButtonEnabled(true);

        myMap.getUiSettings().setRotateGesturesEnabled(true);
        myMap.getUiSettings().setScrollGesturesEnabled(true);
        myMap.getUiSettings().setTiltGesturesEnabled(true);
        myMap.getUiSettings().setZoomGesturesEnabled(true);
        //or myMap.getUiSettings().setAllGesturesEnabled(true);

        myMap.setTrafficEnabled(true);

        myMap.setOnMapLongClickListener(this);

        myMap.setInfoWindowAdapter(new MyInfoWindowAdapter());

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
  case R.id.menu_legalnotices:
   String LicenseInfo = GooglePlayServicesUtil.getOpenSourceSoftwareLicenseInfo(
     getApplicationContext());
   AlertDialog.Builder LicenseDialog = new AlertDialog.Builder(MainActivity.this);
   LicenseDialog.setTitle("Legal Notices");
   LicenseDialog.setMessage(LicenseInfo);
   LicenseDialog.show();
   return true; 
  }
  return super.onOptionsItemSelected(item);
 }

 @Override
 protected void onResume() {

  super.onResume();

  int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getApplicationContext());

  if (resultCode == ConnectionResult.SUCCESS){
   Toast.makeText(getApplicationContext(), 
     "isGooglePlayServicesAvailable SUCCESS", 
     Toast.LENGTH_LONG).show(); 
  }else{
   GooglePlayServicesUtil.getErrorDialog(resultCode, this, RQS_GooglePlayServices); 
  }
 }
 @Override
 public void onMapLongClick(LatLng point) {
  tvLocInfo.setText("New marker added@" + point.toString());
  Marker newMarker = myMap.addMarker(new MarkerOptions()
        .position(point)
        .snippet(point.toString()));
  newMarker.setTitle(newMarker.getId());
 }
}

并将背景颜色更改为透明

- Saneesh

Answer 4

您可以使用@android:color/transparent颜色来设置您的custominfowindow_one_button布局的背景颜色。

- Aytek Sökmen

Answer 5

在这里发布我的解决方案：

class InfoWindowAdapter(val context: Context) : GoogleMap.InfoWindowAdapter {
    private val iconFactory: IconGenerator by lazy {
        IconGenerator(context)
    }

    override fun getInfoContents(marker: Marker?): View? {
        return null
    }

    override fun getInfoWindow(marker: Marker?): View? {
        iconFactory.setTextAppearance(context, R.style.MarkerText)
        iconFactory.setColor(ContextCompat.getColor(context, R.color.vz_green))
        return ImageView(context).apply {
            setImageBitmap(iconFactory.makeIcon(marker?.title ?: ""))
        }
    }
}

IconFactory 类来自于 Google Maps Android Utils。 你可以在 这里 找到一个演示。

- nglauber