高德地图 自定义marker

做地图社交类APP开发的都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式。本文是基于高德地图的

• 先看官网 自定义marker 链接: 高德绘制点标记.
• 效果图
  

自定义的 infowindow 只显示一个信息框

1.自定义适配器

public class InfoWindows implements AMap.InfoWindowAdapter {
    Context context;
    View infoWindow = null;
    private TextView tv_city;
    private TextView tv_temp;

    public InfoWindows(Context context) {
        this.context = context;
    }
    public void startTimes(String name1, String name2){
        startTime(name1,name2);
    }

    @Override
    public View getInfoWindow(Marker marker) {
         if(infoWindow==null){
            infoWindow = LayoutInflater.from(context).inflate(
                    R.layout.hintwarn, null);
        }
        tv_city=infoWindow.findViewById(R.id.tv_city);
        tv_temp=infoWindow.findViewById(R.id.tv_temp);
//        tv_city.setLayoutParams(new RelativeLayout.LayoutParams(100, 40));//固定宽高
//        tv_temp.setLayoutParams(new RelativeLayout.LayoutParams(100, 40));//固定宽高
        //预警设置
        tv_city.setText(marker.getTitle());
        tv_city.setTextSize(18);
        tv_city.setPadding(20,10,0,0);
        //内容设置
        tv_temp.setTextSize(18);
        tv_temp.setPadding(20,10,0,0);
        tv_temp.setText(marker.getSnippet());
        if (marker.getTitle().equals("正常")){
            tv_city.setTextColor(Color.parseColor("#4CAF50"));
        }else {
            tv_city.setTextColor(Color.parseColor("#F44336"));
        }
        render(marker, infoWindow);
        return infoWindow;
    }
    @Override
    public View getInfoContents(Marker marker) {
        if ("".equals(marker.getTitle()) || marker.getTitle() == null) {
            return null;
        }
        View infoContent = LayoutInflater.from(context).inflate(R.layout.hintwarn, null);
        render(marker, infoContent);
        return infoContent;
    }
    /**
     * 自定义infowinfow窗口
     */
    public void render(Marker marker, View view) {
       //如果想修改自定义Infow中内容，请通过view找到它并修改
    }
    public void startTime(String name1, String name2){
        CountDownTimer ct=new CountDownTimer(10000,1000) {
            @Override
            public void onTick(long l) {
                if(tv_temp!=null) {
                    int i= (int) (l/1000);
                    tv_city.setText(name1);
                    tv_temp.setText(name2);
                }
            }
            @Override
            public void onFinish(){
            }
        };
        ct.start();
    }
}

• hintwarn.xml 自定义的文字布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:orientation="vertical">
        <TextView
            android:text="adsda"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_city"
            android:textSize="20sp"
            android:textColor="@color/purple_500"
            />
        <TextView
            android:layout_below="@+id/tv_city"
            android:text="adsda"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_temp"
            android:textColor="@color/purple_200"
            android:textSize="26sp"/>
</RelativeLayout>

2.显示

position：设置当前marker显示在界面的什么位置，即经纬度的传入。
draggable：当前marker是否可以拖动，true 可以拖动。
title：设置marker的主题。如果不设置title也不设置snippet的情况，点击这个marker是不会出现infowindow

显示多个自定义标记点

//绘制默认 Marker -- Marker 常用属性、 position  在地图上标记位置的经纬度值。必填参数、title 点标记的标题e、snippet   点标记的内容
// draggable 点标记是否可拖拽、 visible 点标记是否可见、anch 点标记的锚点、alpha 点的透明度
//显示多个自定义标记点
        List<BeanEvent> marketList = BeanEvent.getEvent();
        for (int i = 0; i < marketList.size(); i++) {
            //.anchor(1.5f, 3.5f) 信息窗的偏移量
            MarkerOptions option = new MarkerOptions();
            option.position(new LatLng(marketList.get(i).getLatitude(), marketList.get(i).getLongitude()));//设置经度
            option.title(marketList.get(i).getWarn());//设置标题
            option.snippet(marketList.get(i).getContent());//设置内容
            if (marketList.get(i).getImage()==1){
                option.icon(fromResource(R.drawable.red));
            }else {
                option.icon(fromResource(R.drawable.green));
            }
            marker = aMap.addMarker(option);
            InfoWindows adapter = new InfoWindows(MainActivity.this);
            aMap.setInfoWindowAdapter(adapter);
            marker.showInfoWindow();
            //点击标记点，如果标记点显示，点击后隐藏，否则反之
            aMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
                @SuppressLint("LongLogTag")
                @Override
                public boolean onMarkerClick(Marker marker) {//在标记上单击
                    curShowWindowMarker = marker;
                    infoWindowShown = false;
                    if (marker.isInfoWindowShown()) {
                        marker.hideInfoWindow();
                    } else {
                        marker.showInfoWindow();
                    }
                    Log.e("setOnMarkerClickListener", "Marker被点击了");
                    return true;//return true 的意思是点击marker,marker不成为地图的中心坐标，反之，成为中心坐标。
                }
            });
            //地图的点击事件 ，点击取消信息框
            aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
               @Override
               public void onMapClick(LatLng latLng) {
                   curShowWindowMarker.hideInfoWindow();
               }
            });
        }

针对于点击地图，做的事情

///
aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                //点击
            }
        });
///
//针对于点击地图，下面的是点击任何地方取消信息弹框
aMap.setOnMapClickListener(new AMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                Log.e("tag","onMapClick");
                Log.e("tag","curShowWindowMarker="+curShowWindowMarker.isInfoWindowShown());
                //点击其它地方隐藏infoWindow
                if(curShowWindowMarker.isInfoWindowShown() && !infoWindowShown){
                    infoWindowShown = true;
                    return;
                }
 
                if(curShowWindowMarker.isInfoWindowShown() && infoWindowShown){
                    curShowWindowMarker.hideInfoWindow();
                }
            }
        });

实体类BeanEvent

public class BeanEvent {
    private String warn;
    private String content;
    private Double latitude;
    private Double longitude;
    private int image;

    public String getWarn() {
        return warn;
    }

    public void setWarn(String warn) {
        this.warn = warn;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Double getLatitude() {
        return latitude;
    }

    public void setLatitude(Double latitude) {
        this.latitude = latitude;
    }

    public Double getLongitude() {
        return longitude;
    }

    public void setLongitude(Double longitude) {
        this.longitude = longitude;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }
	//创造一些假数据
    public static List<BeanEvent> getEvent(){
        List<BeanEvent> list = new ArrayList<>();
        BeanEvent be1 = new BeanEvent();
        be1.setWarn("预警1");
        be1.setContent("内容1");
        be1.setLatitude(27.977247);//维度
        be1.setLongitude(119.784769);//精度
        be1.setImage(1);
        list.add(be1);
        BeanEvent be2 = new BeanEvent();
        be2.setWarn("预警2");
        be2.setContent("内容2");
        be2.setLatitude(27.999347);//维度
        be2.setLongitude(119.797769);//精度
        be2.setImage(2);
        list.add(be2);
        BeanEvent be3 = new BeanEvent();
        be3.setWarn("预警3");
        be3.setContent("内容3");
        be3.setLatitude(27.987247);//维度 
        be3.setLongitude(119.814769);//精度
        be3.setImage(2);
        list.add(be3);
        BeanEvent be4= new BeanEvent();
        be4.setWarn("预警4");
        be4.setContent("内容4");
        be4.setLatitude(27.947247);//维度 
        be4.setLongitude(119.804769);//精度
        be4.setImage(1);
        list.add(be4);
        return list;
    }

多个infowindow算是投机取巧 没有找到合适的方法
仅供参考

for (int i = 0; i < marketList.size(); i++) {

            final LocationMarketBean locationMarketBean = marketList.get(i);

             markerOption = new MarkerOptions().icon(BitmapDescriptorFactory

                                       .fromView(getBitmapView(LocationMarkerInfoWindowsActivity.this, locationMarketBean)));

            markerOption.position(new LatLng(locationMarketBean.getLatitude(), locationMarketBean.getLongitude()));

            markerOption.setFlat(true);

            markerOption.draggable(false);

            marker = aMap.addMarker(markerOption);

            markerOptionlst.add(markerOption);

        }

        markersOnListen = aMap.addMarkers(markerOptionlst, true);

        aMap.setOnMarkerClickListener(marker -> {

            for (int i = 0; i < markersOnListen.size(); i++) {

                if (marker.equals(markersOnListen.get(i))) {
                Toast.makeText(LocationMarkerInfoWindowsActivity.this,marketList.get(i).getTitle(),Toast.LENGTH_SHORT).show();
                }
            }
            return false;
        });

以上