前言
文本介紹Marker的常用屬性、交互和碰撞示例召嘶。
示例功能如下:
- 可設(shè)置Marker點(diǎn)擊苍蔬、拖拽、透明茎匠、旋轉(zhuǎn)、可見汽馋、平貼、碰撞和POI碰撞屬性狀態(tài)悄雅;
- 在地圖上創(chuàng)建多個(gè)滿足上述屬性狀態(tài)的Marker宽闲;
- Marker點(diǎn)擊事件和拖拽事件處理容诬。
界面布局
1布局.png
- 布局文件
<?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=".MapMarkerActivity">
<com.baidu.mapapi.map.MapView
android:id="@+id/bmapView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clickable="true"
app:layout_constraintBottom_toTopOf="@id/bottomView"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/bmapView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/background_dark"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingHorizontal="10dp">
<CheckBox
android:id="@+id/clickable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:onClick="setMarkerFlag"
android:text="點(diǎn)擊"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/draggable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="拖拽"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/alpha"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="透明"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/rotate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="旋轉(zhuǎn)"
android:textColor="@color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:background="@android:color/background_dark"
android:orientation="horizontal"
android:paddingHorizontal="10dp">
<CheckBox
android:id="@+id/visible"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:onClick="setMarkerFlag"
android:text="可見"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/flat"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="平貼"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/joinCollision"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="碰撞"
android:textColor="@color/white"
android:textStyle="bold" />
<CheckBox
android:id="@+id/poiCollided"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="setMarkerFlag"
android:text="POI碰撞"
android:textColor="@color/white"
android:textStyle="bold" />
</LinearLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>
MapMarker類
以下是MapMarker
部分代碼友雳。
常量
static final String CLICKABLE = "Clickable";
static final String DRAGGABLE = "Draggable";
static final String ALPHA = "Alpha";
static final String ROTATE = "Rotate";
static final String VISIBLE = "Visible";
static final String FLAT = "Flat";
static final String JOIN_COLLISION = "JoinCollision";
static final String POI_COLLIDED = "PoiCollided";
成員變量
// 覆蓋物列表
List<Overlay> overlays = new ArrayList<>();
// 選中的狀態(tài)
List<String> selectedFlags = new ArrayList<>();
// 坐標(biāo)點(diǎn)集
List<LatLng> points = new ArrayList<>();
初始值
selectedFlags.add(CLICKABLE);
selectedFlags.add(VISIBLE);
points.add(new LatLng(39.97923, 116.357428));
points.add(new LatLng(39.94923, 116.397428));
points.add(new LatLng(39.97923, 116.437428));
points.add(new LatLng(39.92353, 116.490705));
Marker點(diǎn)擊事件
// 設(shè)置地圖 Marker 覆蓋物點(diǎn)擊事件監(jiān)聽者,
// 自3.4.0版本起可設(shè)置多個(gè)監(jiān)聽對(duì)象,
// 停止監(jiān)聽時(shí)調(diào)用removeMarkerClickListener移除監(jiān)聽對(duì)象
map.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() {
//marker被點(diǎn)擊時(shí)回調(diào)的方法
//若響應(yīng)點(diǎn)擊事件流礁,返回true神帅,否則返回false
//默認(rèn)返回false
@Override
public boolean onMarkerClick(Marker marker) {
showToast("clickable marker");
return true;
}
});
Marker拖拽事件
// 設(shè)置 Marker 拖拽事件監(jiān)聽者
map.setOnMarkerDragListener(new BaiduMap.OnMarkerDragListener() {
// 在Marker開始被拖拽時(shí)回調(diào)此方法绍填,
// 這個(gè)Marker的位置可以通過getPosition()方法獲取 marker 被拖拽的Marker對(duì)象
@Override
public void onMarkerDragStart(Marker marker) {
}
// 在Marker拖拽過程中回調(diào)此方法,
// 這個(gè)Marker的位置可以通過getPosition()方法獲取 marker 被拖動(dòng)的Marker對(duì)象
@Override
public void onMarkerDrag(Marker marker) {
// 對(duì)marker處理拖拽邏輯
}
// 在Marker拖動(dòng)完成后回調(diào)此方法,
// 這個(gè)Marker的位置可以通過getPosition()方法獲取 marker 被拖拽的Marker對(duì)象
@Override
public void onMarkerDragEnd(Marker marker) {
// 拖拽完成后更新位置
int index = overlays.indexOf(marker);
if (index != -1) {
LatLng latLng = marker.getPosition();
points.set(index, new LatLng(latLng.latitude, latLng.longitude));
}
}
});
創(chuàng)建覆蓋物
public void addMarkers() {
int[] icons = BubbleIcons.Alphabet;
for (int i = 0; i < points.size(); ++i) {
// 構(gòu)建Marker圖標(biāo)
BitmapDescriptor bitmap = BitmapDescriptorFactory.fromResource(icons[i]);
// 構(gòu)建MarkerOption揭糕,用于在地圖上添加Marker
MarkerOptions option = new MarkerOptions()
.position(points.get(i)) //必傳參數(shù)
.icon(bitmap); // 必傳參數(shù)
setOption(option, i, selectedFlags);
// 在地圖上添加Marker著角,并顯示
Marker marker = (Marker) map.addOverlay(option);
overlays.add(marker);
}
}
private void setOption(MarkerOptions option, int i, List<String> flags) {
if (flags.contains(CLICKABLE))
option.clickable(true);
else
option.clickable(false);
if (flags.contains(DRAGGABLE))
option.draggable(true); // 設(shè)置Marker覆蓋物是否可拖拽雇寇。
if (flags.contains(ALPHA))
option.alpha(0.5f + 0.1f * i); // 設(shè)置Marker覆蓋物的透明度锨侯。
if (flags.contains(ROTATE))
option.rotate(30 * i); // 設(shè)置Marker覆蓋物的圖片旋轉(zhuǎn)角度叁怪,從正北開始奕谭,逆時(shí)針計(jì)算。
if (flags.contains(VISIBLE))
option.visible(true); // 設(shè)置Marker覆蓋物是否可見难捌。
else
option.visible(false);
if (flags.contains(FLAT))
option.flat(true); // 設(shè)置平貼地圖根吁,在地圖中雙指下拉查看效果合蔽。
if (flags.contains(JOIN_COLLISION)) {
option.isJoinCollision(true) // 設(shè)置marker參與碰撞
.isForceDisPlay(i % 2 == 0) // 設(shè)置壓蓋時(shí) marker強(qiáng)制展示
.priority(9); // 設(shè)置碰撞優(yōu)先級(jí)為9
}
if (flags.contains(POI_COLLIDED)) {
option.poiCollided(true); // 設(shè)置是否碰撞底圖POI
}
}
移除覆蓋物
public void removeOverlay() {
//map.removeOverLays(overlays);
for (Overlay overlay : overlays)
overlay.remove();
overlays.clear();
}
設(shè)置屬性
public void addFlag(String flag) {
if (!selectedFlags.contains(flag))
selectedFlags.add(flag);
removeOverlay();
addMarkers();
}
public void removeFlag(String flag) {
selectedFlags.remove(flag);
removeOverlay();
addMarkers();
}
MapMarkerActivity類
以下是MapMarkerActivity
部分代碼沃斤。
控件響應(yīng)事件
public void setMarkerFlag(View view) {
boolean checked = ((CheckBox) view).isChecked();
int id = view.getId();
String flag;
if (id == R.id.clickable)
flag = MapMarker.CLICKABLE;
else if (id == R.id.draggable)
flag = MapMarker.DRAGGABLE;
else if (id == R.id.alpha)
flag = MapMarker.ALPHA;
else if (id == R.id.rotate)
flag = MapMarker.ROTATE;
else if (id == R.id.visible)
flag = MapMarker.VISIBLE;
else if (id == R.id.flat)
flag = MapMarker.FLAT;
else if (id == R.id.joinCollision)
flag = MapMarker.JOIN_COLLISION;
else if (id == R.id.poiCollided)
flag = MapMarker.POI_COLLIDED;
else
return;
if (checked)
mapMarker.addFlag(flag);
else
mapMarker.removeFlag(flag);
}
運(yùn)行效果圖
2效果圖.png