如何在android上的googleMap中自定义标记InfoWindow答案

【问题标题】：How to custom marker InfoWindow in googleMap on android如何在android上的googleMap中自定义标记InfoWindow
【发布时间】：2017-09-21 08:25:37
【问题描述】：

在我的应用程序中，我想为此制作自定义标记 InfoWindow 和透明背景。
我写了下面的代码，但它再次向我显示了错误的背景。我想要透明背景，而不是白色。

我的代码：

       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

如何为 infoWindows 制作透明背景？请帮帮我。

【问题讨论】：

你需要创建九个补丁图像
@akhilesh0707，这个九补丁图片在哪里设置？
在custominfowindow_one_button 上添加背景
@akhilesh0707，我的兄弟，我不工作:(
发布您的custominfowindow_one_button.xml

标签： android google-maps google-maps-markers

【解决方案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>

【讨论】：

我尝试你的方式，但再次向我展示 wite 背景:(
你试过我上面的答案了吗？
图片下载了吗？
用custom_info_bubble.9.png重命名上面的图片

【解决方案2】：

您可以使用@android:color/transparent 颜色作为custominfowindow_one_button 布局的背景颜色

【讨论】：

【解决方案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 类。 Override getInfoContents(Marker marker) to return our custom view. And call 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());
 }
}

并将背景颜色更改为透明

【讨论】：

【解决方案4】：

@Override

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

   return v;

}

如果您的方法返回 null 而不是在后台显示白色 infoWindow，则返回您的 custom_info_contents.xml 而不是 null。

【讨论】：

【解决方案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。你可以找到一个演示here。

【讨论】：