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和点击标识弹出我们自定义的窗口，想要的效果就展示出来了
版权声明：本文为revolve原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。