Android腾讯地图之marker标记与切换大图marker
2020-06-15 本文已影响0人
冰封de四季
最近项目用到腾讯地图，才发现网上关于腾讯地图的文章极少，难道是太简单了？因为项目需求，要实现一些效果，打开腾讯地图位置服务开发文档，发现写得不是特别详细，对于地图新手的我，把代码搬过来，run，啊！没啥作用！后来经过摸索，终于实现了产品需要的效果。最终实现效果如下：
device-2020-07-09-164249 (1).gif
第一步：标记marker并默认显示InfoWindow
marker1.png
根据景点内某个经纬度在地图上标记一个marker和一个InfoWindow，这里需要用到自定义marker，腾讯文档上的代码：
//创建Marker对象之前，设置属性
LatLng position = new LatLng(40.011313,116.391907);
BitmapDescriptor custom = BitmapDescriptorFactory.fromResource(R.drawable.marker);
mCustomMarker = mTencentMap.addMarker(new MarkerOptions(position)
.icon(custom)
.alpha(0.7f)
.flat(true)
.clockwise(false)
.rotation(30));
怎么自定义marker布局？BitmapDescriptorFactory提供有六种方式设置marker：fromResource、fromAsset、fromFile、fromPath、fromBitmap、fromView，一看，很明显用fromView简单粗暴，哈哈。
- 先写一个marker的布局：item_guide_marker_card.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardUseCompatPadding="false"
app:cardCornerRadius="20dp"
app:cardElevation="3dp"
app:contentPadding="1dp"
app:cardBackgroundColor="@color/white">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="marker"
android:textColor="#FF292C33"
android:gravity="center"
android:textSize="13sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_gravity="center"/>
</android.support.v7.widget.CardView>
- 标记marker，并定义InfoWindow
for (int i = 0; i < guideMarkerBeans.size(); i++) {
GuideMarkerBean guideMarkerBean = guideMarkerBeans.get(i);
View rootView = View.inflate(mContext, R.layout.item_guide_marker_card, null);
TextView nameTextView = rootView.findViewById(R.id.tv_name);
nameTextView.setText(guideMarkerBean.getName());
BitmapDescriptor custom = BitmapDescriptorFactory.fromView(rootView);
LatLng latLng = new LatLng(guideMarkerBean.getLatitude(), guideMarkerBean.getLongitude());
MarkerOptions mMarkerOptions = new MarkerOptions(latLng)
.icon(custom)
.flat(false)
.tag(i)
.anchor(0.5f, 0.0f);
Marker mCustomMarker = tencentMap.addMarker(mMarkerOptions);
mCustomMarker.showInfoWindow();//关键，默认显示InfoWindow
//设置Marker不支持点击
mCustomMarker.setClickable(false);//关键
overlays.add(mCustomMarker);
}
因为我们不是用地图默认的InfoWindow的样式，就要自己定义，同样也是使用自己的view，布局文件我就不贴了，关键代码如下：
public class InfoWinAdapter implements TencentMap.InfoWindowAdapter{
private Context mContext;
private LatLng latLng;
private String agentName;
private String snippet;
public InfoWinAdapter(Context context){
super();
this.mContext = context;
}
@Override
public View getInfoWindow(Marker marker) {
initData(marker);
return initView();
}
@Override
public View getInfoContents(Marker marker) {
return null;
}
private void initData(Marker marker) {
latLng = marker.getPosition();
snippet = marker.getSnippet();
agentName = marker.getTitle();
}
@NonNull
private View initView() {
return LayoutInflater.from(mContext).inflate(R.layout.view_infowindow, null);
}
}
项目里要求要标记多个建筑物marker，同时要显示多个InfoWindow，得打开多窗口模式 tencentMap.enableMultipleInfowindow(true);
InfoWinAdapter adapter = new InfoWinAdapter(this);
tencentMap.setInfoWindowAdapter(adapter);
//开启多窗口模式
tencentMap.enableMultipleInfowindow(true);
到此为止，第一步已经完成了，接下来要实现，点击InfoWindow，实现切换大图marker模式，一开始我的思路是想通过改变InfoWindow的view,经过多次尝试，毫无效果，所以我放弃了。改变策略，通过点击InfoWindow，再标记一个大图marker，覆盖到InfoWindow上面，视觉上也是能达到切换到大图模式的效果的。如果哪位大神有更好的思路，可以留言，万分感谢。
温馨提示：标记多个marker，并需要移动镜头把所有marker显示出来，就要在地图加载完成之后。我们可以使用addOnMapLoadedCallback回调函数，监听加载事件
tencentMap.addOnMapLoadedCallback(new TencentMap.OnMapLoadedCallback(){
@Override
public void onMapLoaded() {
//标记marker代码放这里
...
//移动地图镜头
tencentMap.moveCamera(CameraUpdateFactory.newCameraPosition(
tencentMap.calculateZoomToSpanLevel(
overlays, null,
ScreenUtil.dip2px(mContext, 90),
ScreenUtil.dip2px(mContext, 90),
ScreenUtil.dip2px(mContext, 105),
ScreenUtil.dip2px(mContext, 220))));
}
});
第二步：切换到大图marker模式
通过InfoWindow点击事件，在当前的位置上再标记marker，onInfoWindowClick(Marker marker)中的marker是当前点击的onInfoWindow的marker，可以通过marker.getPosition()获取到LatLng，核心代码：
tencentMap.setOnInfoWindowClickListener(new TencentMap.OnInfoWindowClickListener() {
@Override
public void onInfoWindowClick(Marker marker) {
//如果已经显示有大图marker,先移除
if(mCustomBigMarker != null){
mCustomBigMarker.remove();
}
//新标记大图marker
showBigMarker(marker);
LatLngBounds latLngBounds = MyLocationsUtils.getInstance().getLatLngBounds(guideMarkerBeans);
//将大图marker移动中心位置
tencentMap.moveCamera(CameraUpdateFactory.newLatLngBoundsWithMapCenter(latLngBounds, marker.getPosition(), 0));
}
@Override
public void onInfoWindowClickLocation(int width, int height, int x, int y) {
}
});
marker的位置通过MarkerOptions.anchor(0.5f, 1.0f)，调整其位置，0.5f是rootView的中心，1.0f是rootView的底部，0.0f是rootView的顶部
/**
* 显示大图marker
*/
private Marker mCustomBigMarker = null;
private void showBigMarker(Marker marker){
View rootView = View.inflate(mContext, R.layout.view_big_marker, null);
BitmapDescriptor custom = BitmapDescriptorFactory.fromView(rootView);
MarkerOptions mMarkerOptions = new MarkerOptions(marker.getPosition())
.icon(custom)
.flat(false)
.anchor(0.5f, 1.0f);//关键
mCustomBigMarker = tencentMap.addMarker(mMarkerOptions);
mCustomBigMarker.setInfoWindowEnable(false);//关闭infowindow
mCustomBigMarker.setClickable(true);//可以点击，跳转到景点详情页面
}
好了! 完成了！
1592203155(1).png
