Where maps are used in android is everywhere. Take a note of your network path today to generate a custom marker, click on the marker to pop up the custom window (Golden Map is used here)
Here we use Grilde to load web pictures, because it's so convenient!
Under android studio, add the following dependencies to the app/build.gradle file:
compile 'com.github.bumptech.glide:glide:3.7.0'
Next comes the implementation of the code
More detailed code comments
/** * Created by Yyyyq on 2018/4/20 0009. * Generate a custom marker based on the network path, Click to pop up the custom form */ public class CustomMapActivity extends AppCompatActivity implements AMap.OnMarkerClickListener, AMap.InfoWindowAdapter,AMap.OnMapClickListener{ //Header of title private TextView textView; //Return button private ImageView back; private MapView mMapView; private AMap aMap; Marker marker; //Point to Current marker(For control infowindow Display and disappear) 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("Generate Network Pictures Marker"); toolbar.setTitle(""); setSupportActionBar(toolbar); setTranslucentBar(); //Return button back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); } private void init() { if (aMap == null) { aMap = mMapView.getMap(); setUpMap(); //Get Background Data Source getDataSource(); } } /** * Setting aMap properties */ private void setUpMap() { aMap.setOnMarkerClickListener(this);// Set Click marker Event listener aMap.setInfoWindowAdapter(this);//Custom pop-up forms aMap.setOnMapClickListener(this);//Map Click Events } /** * @Description:Immersive Title */ 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); } /** *Here the simulation method requests to the data source, depending on the actual situation * We receive data sources with a custom entity class SimpleVO */ private void getDataSource(){ //Network request received List List<SimpleVO> list="Background Passed Data Source"; if(list.size()>0){ //Move the longitude-latitude longitude map to the viewing area based on the first data 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; //Take advantage of powerful Glide Load Pictures,Placeholder, Baidu Glide attribute Glide.with(CustomMapActivity.this) .load(list.get(i).getUrl()) .into(new SimpleTarget<GlideDrawable>(){ @Override public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) { //Show pictures 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); //Assign the corresponding object to marker，adapter Assign values to controls through this object in marker.setObject(tempSimpleVO); } }); } } } /** * Click on the marker pop-up window * Return true map without moving center point */ @Override public boolean onMarkerClick(Marker marker) { nowMarker=marker; nowMarker.showInfoWindow(); return true; } /** * Custom Window Layout */ @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; } /** * Assigning values to window information */ public void render(Marker marker, View view,int mark) { LinearLayout layout = (LinearLayout) view.findViewById(R.id.window_linearlayout); //Set Transparency 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()); } /** * Return null for custom window */ @Override public View getInfoContents(Marker marker) { return null; } /** * Rewrite the map click event and hide the infowindow window by clicking anywhere on the map */ @Override public void onMapClick(LatLng latLng) { //hide infowindow window 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 To 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; } }
Next is the layout of the main page
<?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"> <!--title bar--> <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 Power Class Applied in Code
public class SimpleVO { private String id; private String name; private String latitude; private String longitude; private String url; private String info; //ellipsis get，set，toString Method, import it yourself }
Then we need to show our custom avatar, map_userimg. Because it shows the avatar, we use the circular tool class. If there is no tool class to view the last copy, paste the copy directly
<?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"> <!--Custom Round Tool Class--> <!--Without this tool class to assign the last code, Ctrl+c Ctrl+v available--> <com.bc.yyyyq.util.RoundImageView android:id="@+id/user_img" android:scaleType="fitCenter" android:layout_width="30dp" android:layout_height="30dp"/> </LinearLayout>
Finally, we need to show the pop-up form of our custom marker
<?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"> <!--Full name--> <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="Full name:" 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" /> <!--Personal information--> <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="Personal information:" 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>
This completes the marker and click on the logo to pop up our custom window and show the effect you want.