Android Gaode map marker custom pop-up window

Time：2021-10-26

This example shares the specific code of the user-defined pop-up window of Android Gaode map marker for your reference. The specific contents are as follows

Final effect:

1. Add Gaode map dependency in gradle

Implementation 'com. Amap. API: map2d: latest. Integration' // 2D map function 
Implementation 'com. Amap. API: Location: latest. Integration' // location function

2. If you want to use positioning, first add the information of this application to the Gaode console to obtain the key, then set the key in the application, and apply mainapp in androidmanifest.xml

public class MainApp extends android.app.Application {
 
    @Override
    public void onCreate() {
        super.onCreate();
        //Gaode map registration
        AMapLocationClient.setApiKey("0f1d26a891783cc4d632965a7cc08443");
    }
 
}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hk.testapplication">
    <uses-permission android:name="android.permission.INTERNET" /> <!--  Access network permission -- >
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!--  Used to access GPS positioning -- >
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <application
        android:name=".MainApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.TestApplication">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

3. Create an activity_ Main.xml map layout file


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <com.amap.api.maps2d.MapView
        android:id="@+id/mapview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.amap.api.maps2d.MapView>
 
</androidx.constraintlayout.widget.ConstraintLayout>

4. Load map in mainactivity and add marker

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mMapView = findViewById(R.id.mapview);
        mMapView.onCreate(savedInstanceState);//  This method must be overridden
        mMap = mMapView.getMap();
        initPoint(30.665534,104.070929);   // Map center point
        initMarker();// Test point
    }
    /**
     *Draw marker
     */
    private void initMarker() {
        mMarkers = new ArrayList<>();
 
        //When you draw a marker, you will cycle to create the marker and fill in the data
        Marker marker = mMap.addMarker(new MarkerOptions()
                .anchor(0.5f, 0.5f)
                .position(new LatLng(30.665534,104.070929))
                . title ("title data")
                . snippet ("message data")
                .icon(BitmapDescriptorFactory.fromBitmap(BitmapFactory
                        .decodeResource(getResources(), R.mipmap.ic_launcher_round))));// Point icon
        mMarkers.add(marker);
    }
    /**
     *Load map center point
     */
    private void initPoint(double latitude, double Longitude) {
        LatLng marker1 = new LatLng(latitude, Longitude);
        mMap.moveCamera(CameraUpdateFactory.changeLatLng(marker1));
        mMap.moveCamera(CameraUpdateFactory.zoomTo(12));
    }
   
   
    @Override
    public void onResume() {
        super.onResume();
        if (mMapView != null)
            mMapView.onResume(); // Manage the lifecycle of maps
    }
 
    @Override
    public void onPause() {
        super.onPause();
        if (mMapView != null)
            mMapView.onPause(); // Manage the lifecycle of maps
    }
 
    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mMapView != null)
            mMapView.onDestroy(); // Manage the lifecycle of maps
    }
 
 
}

5. Add a pop-up box to customize the layout view_ map_ infowindow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:minHeight="50dp"
    android:minWidth="100dp"
    android:background="#ffff"
    android:gravity="center"
    >
<ImageView
    android:id="@+id/iv_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>
    <TextView
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:id="@+id/tv_msg"
        Android: text = "custom layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/iv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

Remember to set the minimum height and width of the layout, otherwise the window will default width and height, which will make the layout display incomplete

6. Add a custom pop-up window adapter

/**
 *Custom map pop-up adapter
 * @author hk
 */
public class MapInfoWinAdapter implements AMap.InfoWindowAdapter, View.OnClickListener {
    private Context mContext;
    private LatLng latLng;
    private TextView mTvMsg;
    private ImageView mIvLeft,mIvRight;
    private String mSnippet,mTitle;
    @Override
    public View getInfoWindow(Marker marker) {
        initData(marker);
        View view = initView();
        return view;
    }
    @Override
    public View getInfoContents(Marker marker) {
        return null; // Null returned because it is a custom layout
    }
    public MapInfoWinAdapter(Context context) {
        mContext = context;
    }
    private void initData(Marker marker) {
        //Latitude and longitude of current point
        latLng = marker.getPosition();
        //The message information of the current point can also be transferred to JSON through this transmission data
        mSnippet = marker.getSnippet();
        //Title Information of the current point band
        mTitle = marker.getTitle();
    }
    @NonNull
    private View initView() {
        //Get custom layout
        View view = LayoutInflater.from(mContext).inflate(R.layout.view_map_infowindow, null);
        mTvMsg = (TextView) view.findViewById(R.id.tv_msg);
        mIvLeft= (ImageView) view.findViewById(R.id.iv_left);
        mIvRight= (ImageView) view.findViewById(R.id.iv_right);
        Mtvmsg.settext ("I am a custom layout pop-up");
        mIvLeft.setOnClickListener(this);
        mIvRight.setOnClickListener(this);
        return view;
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.iv_left:
                Toast. Maketext (mcontext, "I am the left button click event", toast. Length_short). Show();
                break;
            case R.id.iv_right:
                Toast. Maketext (mcontext, "I am the right button click event", toast. Length_short). Show();
                break;
        }
 
    }
}

7. Map binding adapter

//Important create a custom adapter
MapInfoWinAdapter adapter = new MapInfoWinAdapter(this);
mMap.setInfoWindowAdapter(adapter);// Set custom window adapter

Now click the marker and our customized layout will pop up

8. Click the map or pop-up to close the pop-up window

mMap.setOnInfoWindowClickListener(this);// Pop up window click event
   mMap.setOnMapClickListener(this);// Map click event
 
    @Override
    public void onMapClick(LatLng latLng) {
        //Click the map area to close all windows
        for (Marker marker : mMarkers) {
            marker.hideInfoWindow();
        }
    }
    @Override
    public void onInfoWindowClick(Marker marker) {
        if (marker.isInfoWindowShown()) {
            marker.hideInfoWindow();// Click the window again to hide the window
        }
    }

This custom pop-up window is completed. The following is the complete mainactivity code

public class MainActivity extends AppCompatActivity implements AMap.OnInfoWindowClickListener, AMap.OnMapClickListener {
    private AMap mMap;
    private List<Marker> mMarkers;
    private MapView mMapView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mMapView = findViewById(R.id.mapview);
        mMapView.onCreate(savedInstanceState);//  This method must be overridden
        mMap = mMapView.getMap();
        mMap.setOnMapClickListener(this);// Map click event
        initPoint(30.665534,104.070929);   // Map center point
        initMarker();// Test point
    }
    /**
     *Draw marker
     */
    private void initMarker() {
        mMarkers = new ArrayList<>();
        //Important create a custom adapter
        MapInfoWinAdapter adapter = new MapInfoWinAdapter(this);
        mMap.setInfoWindowAdapter(adapter);// Set custom window adapter
        mMap.setOnInfoWindowClickListener(this);
 
        //When you draw a marker, you will cycle to create the marker and fill in the data
        Marker marker = mMap.addMarker(new MarkerOptions()
                .anchor(0.5f, 0.5f)
                .position(new LatLng(30.665534,104.070929))
                . title ("title data")
                . snippet ("message data")
                .icon(BitmapDescriptorFactory.fromBitmap(BitmapFactory
                        .decodeResource(getResources(), R.mipmap.ic_launcher_round))));// Point icon
        mMarkers.add(marker);
    }
    /**
     *Load map center point
     */
    private void initPoint(double latitude, double Longitude) {
        LatLng marker1 = new LatLng(latitude, Longitude);
        mMap.moveCamera(CameraUpdateFactory.changeLatLng(marker1));
        mMap.moveCamera(CameraUpdateFactory.zoomTo(12));
    }
    @Override
    public void onMapClick(LatLng latLng) {
        //Click the map area to close all windows
        for (Marker marker : mMarkers) {
            marker.hideInfoWindow();
        }
    }
    @Override
    public void onInfoWindowClick(Marker marker) {
        if (marker.isInfoWindowShown()) {
            marker.hideInfoWindow();// Click the window again to hide the window
        }
    }
 
    @Override
    public void onResume() {
        super.onResume();
        if (mMapView != null)
            mMapView.onResume(); // Manage the lifecycle of maps
    }
 
    @Override
    public void onPause() {
        super.onPause();
        if (mMapView != null)
            mMapView.onPause(); // Manage the lifecycle of maps
    }
 
    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mMapView != null)
            mMapView.onDestroy(); // Manage the lifecycle of maps
    }
 
 
}

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

Tags: , ,

Recommended Today

IOS overall framework and class inheritance framework diagram

I. overall framework In the process of IOS development, understanding and learning the overall framework of IOS is an essential link. Today, let’s have a good understanding of the overall framework of IOS. First, post a framework introduction about IOS:Overview of IOS system framework。 We usually call the IOS framework cocoa touch framework. Cocoa touch […]