欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-24 16:52:40
android中使用地图的地方随处可见,今天记录一下网络路径生成自定义marker,点击标记弹出自定义的窗口(在这里使用的是高德地图) 在这里我们使用Grilde去加载网络图片,因为这个简直太方便了! 在android studio下,在app/build.gradle文件当中添加如下依赖: com ......

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和点击标识弹出我们自定义的窗口,想要的效果就展示出来了