android高德地图网络路径实现自定义marker并点击弹出自定义窗口

android中使用地图的地方随处可见，今天记录一下网络路径生成自定义marker，点击标记弹出自定义的窗口(在这里使用的是高德地图)

在这里我们使用Grilde去加载网络图片，因为这个简直太方便了！

在android studio下，在app/build.gradle文件当中添加如下依赖：

 

compile 'com.github.bumptech.glide:glide:3.7.0'

接下来就是代码的实现部分

　　

代码注释的比较详细

/**
 * Created by Yyyyq on 2018/4/20 0009.
 *    根据网络路径生成自定义marker,点击弹出自定义窗体
 */

public class CustomMapActivity extends AppCompatActivity implements AMap.OnMarkerClickListener,
        AMap.InfoWindowAdapter,AMap.OnMapClickListener{


    //标题头
    private TextView textView;
    //返回按钮
    private ImageView back;

    private MapView mMapView;
    private AMap aMap;
    Marker marker;
    //指向当前的marker（用于控制infowindow显示与消失）
    Marker nowMarker;
      
    SimpleVO tempSimpleVO;
   



    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custommap);
        mMapView = (MapView) findViewById(R.id.map);
        mMapView.onCreate(savedInstanceState);
        
        init();
        
        back=(ImageView)findViewById(R.id.back);
        textView = (TextView) findViewById(R.id.toolbar_title);
        Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
        textView.setText("生成网络图片Marker");
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        setTranslucentBar();

        //返回按钮
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
    
    private void init() {
        if (aMap == null) {
            aMap = mMapView.getMap();
            setUpMap();
            //获取后台数据源
            getDataSource();
           
        }
    }
    
    /**
     * 设置aMap属性
     */
    private void setUpMap() {
        aMap.setOnMarkerClickListener(this);// 设置点击marker事件监听器
        aMap.setInfoWindowAdapter(this);//自定义弹出窗体
        aMap.setOnMapClickListener(this);//地图点击事件
    }
    
    /**
     * @Description:沉浸式标题
     */
    protected void setTranslucentBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
  
  
    
    
    /**
     *在这里模拟方法请求到数据源，可根据实际
     *    我们用自定义实体类SimpleVO接收数据源
     */
     private void getDataSource(){
            //网络请求 得到List
            List<SimpleVO> list="后台传递的数据源";
            
            if(list.size()>0){
                //根据第一条数据经纬度经地图移动到所视区域
                LatLng curLatlng = new LatLng(Double.parseDouble(list.get(0).getLatitude()),Double.parseDouble(list.get(0).getLongitude()));
                aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(curLatlng, 14f));
                for(int i=0;i<list.size();i++){
                    final int j = i;
                    //利用强大的Glide加载图片,可放占位符等，可百度Glide属性
                    Glide.with(CustomMapActivity.this)
                        .load(list.get(i).getUrl())
                        .into(new SimpleTarget<GlideDrawable>(){
                            @Override
                            public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                //展示图片
                                View view = LayoutInflater.from(CustomMapActivity.this).inflate(
                                        R.layout.map_userimg, null);
                                RoundImageView imageView = (RoundImageView) view.findViewById(R.id.user_img);
                                tempSimpleVO=list.get(j);
                                imageView.setImageDrawable(resource);
                                Bitmap bitmap = convertViewToBitmap(view);
                                MarkerOptions markerOptions = new MarkerOptions();
                                markerOptions.anchor(1.5f, 3.5f);
                                markerOptions.position(new LatLng(Double.parseDouble(tempSimpleVO.getLatitude()),Double.parseDouble(tempSimpleVO.getLongitude())));
                                markerOptions.draggable(false);
                                markerOptions.title(tempSimpleVO.getName());
                                markerOptions.icon(BitmapDescriptorFactory.fromBitmap(bitmap));
                                marker = aMap.addMarker(markerOptions);
                                //把相应的对象赋给marker，adapter中通过这个对象给控件赋值
                                marker.setObject(tempSimpleVO);
                            }
                        });



                }
            }

     }


    /**
     *  点击marker弹出窗口
     *  返回true 地图不移动中心点
     */
    @Override
    public boolean onMarkerClick(Marker marker) {
        nowMarker=marker;
        nowMarker.showInfoWindow();
        return true;
    }
    /**
     * 自定义窗口布局
     */
    @Override
    public View getInfoWindow(Marker marker) {
        View infoContent = LayoutInflater.from(CustomMapActivity.this).inflate(
                R.layout.item_map_window, null);
        render(marker, infoContent,2);
        return infoContent; 
    }
    
    /**
     * 对窗口信息赋值
     */
    public void render(Marker marker, View view,int mark) {
        LinearLayout layout = (LinearLayout) view.findViewById(R.id.window_linearlayout);
        //设置透明度
        layout.getBackground().setAlpha(240);
        TextView name = (TextView) view.findViewById(R.id.window_name);
        TextView info = (TextView) view.findViewById(R.id.window_info);
        SimpleVO simpleVO = (SimpleVO) marker.getObject();
        name.setText(simpleVO.getName());
        info.setText(simpleVO.getInfo());
    }
    
    /**
     * 因自定义窗口 返回null
     */
    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }

    /**
     *  重写地图点击事件，点击地图任意点隐藏infowindow窗口
     */
    @Override
    public void onMapClick(LatLng latLng) {
        //隐藏infowindow窗口
        nowMarker.hideInfoWindow();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mMapView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mMapView.onPause();
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mMapView.onSaveInstanceState(outState);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mMapView.onDestroy();
    }


    /**
     * view转bitmap
     */
    private static Bitmap convertViewToBitmap(View view){
        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.buildDrawingCache();
        Bitmap bitmap = view.getDrawingCache();
        return bitmap;
    }



}

 接下来就是主页面的布局　　activity_custommap

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--标题栏-->

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:paddingTop="16dp"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/bluestyle_button">
            <ImageView
                android:id="@+id/back"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginLeft="10dp"
                android:layout_gravity="center|left"
                android:src="@drawable/jiantouzuo"/>

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </android.support.v7.widget.Toolbar>


    <com.amap.api.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

代码中应用的实力类　　SimpleVO

public class SimpleVO {
    
    private String id;
    
    private String name;
    
    private String latitude;
    
    private String longitude;
    
    private String url;
    
    private String info;
    
    //省略get，set，toString方法，需自己导入


}

之后需要展示我们的自定义头像 　　map_userimg　　因为展示的是头像，我们用到了圆形工具类，若没有该工具类可查看复制上一篇随笔，可直接粘贴复制

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


    <!--自定义圆形工具类-->
    <!--若没有该工具类可赋值上一篇代码，Ctrl+c Ctrl+v可用-->
    <com.bc.yyyyq.util.RoundImageView
        android:id="@+id/user_img"
        android:scaleType="fitCenter"
        android:layout_width="30dp"
        android:layout_height="30dp"/>



</LinearLayout>

最后我们需要展示我们自定义的marker的弹出窗体 　　item_map_window

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/window_linearlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/brokermap_layout"
    android:padding="10dp"
    android:orientation="vertical">

    <!--姓名-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="姓名："
            android:textColor="#515151"
            android:textSize="14sp"/>
        <TextView
            android:id="@+id/window_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:gravity="center|left"
            android:text=""
            android:textColor="#515151"
            android:textSize="14sp"/>
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f2f2f2" />
    <!--个人信息-->
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="个人信息："
            android:gravity="center"
            android:textColor="#515151"
            android:textSize="14sp"/>
        <TextView
            android:id="@+id/window_info"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center|left"
            android:layout_marginLeft="5dp"
            android:text=""
            android:textColor="#515151"
            android:textSize="14sp"/>
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f2f2f2" />
    

</LinearLayout>

就这样就完成了自定义网络图片的marker和点击标识弹出我们自定义的窗口，想要的效果就展示出来了