BB
Airbnb是短租行业的独角兽和领头羊，外号短租Uber，国内的途家、小猪、依依等都是他的模仿者。Airbnb android版的设计简洁大气，ceo不愧罗德岛设计学院毕业。Airbnb中的地图页很有意思，不过它是集成了Google map实现，国内吗~ 我使用了百度地图实现了仿Airbnb的地图页，先看一下效果：
思考
百度地图的配置什么的就不说了，官方demo写的很仔细。
我们看地图页主体上分为两个部分 上面的地图部分约占3/4,底下1/4是房屋信息的布局。地图上遍布着覆盖物，覆盖物上显示房屋的价格。点一下覆盖物咦~怎么变大了背景色也变白了，底下的房屋布局也变成我现在看的这个价格的房屋了....... 多玩几次你会发现其中的逻辑是这个样子的：
地图上的覆盖物有三种状态：
未看过（背景色大红，价格颜色白）
正在看（整体变大，背景色白，价格颜色红）
看过（背景颜色橘红，价格颜色白）
底部整体为ViewPager与正在看的覆盖物联动，展示正在看的房屋信息
点击覆盖物，覆盖物的状态会变为正在看，滑动viewpager，状态也会切换总体的状态变化为
**未看过->正在看，正在看->看过，看过->正在看
**
细节
无论覆盖物有多少，分布在地图的哪些角落，它们总能合适的显示在一个屏里
覆盖物的数量是有限制的，考虑到内存消耗与使用体验，覆盖物数量为20个
覆盖物会有重叠的情况，正在看的覆盖物会在叠层的最顶部显示
marker相对于地图是静止的不可拖动
开码
有了上述的思考分析，代码无非翻译一下，先捋一捋需要的东西：
- 1 覆盖物，Marker百度地图提供的实现类
- 2 价格，House实际为房屋的信息
- 3 当前状态 WatchStatus 枚举
- 4 不同状态对应的布局 BitmapDescriptor
- 5 位置经纬度 House里含有
code：
<pre>
public class MapStatusMarker {
public enum WatchStatus {
WATCHING,
WATCHED,
NOWATCH,
}
private Marker marker;
private WatchStatus status;
private House house;
BitmapDescriptor noWatchIc ;
BitmapDescriptor watchedIc ;
BitmapDescriptor watchingIc ;
public Marker getMarker() {
return marker;
}
public void setMarker(Marker marker) {
this.marker = marker;
}
public WatchStatus getStatus() {
return status;
}
/**
* 更改marker状态，改变背景
* @param status
*/
public void setStatus(WatchStatus status) {
this.status = status;
resetIcon();
}
public House getHouse() {
return house;
}
public void setHouse(House house) {
this.house = house;
}
/**
* @param map
*/
public MapStatusMarker(BaiduMap map,House house,Context context) {
this.house = house;
initMarkerView(context);
setDefaultMarker(map);
}
private void initMarkerView(Context context){
//已看过的marker对应的布局
TextView watchedView = (TextView)LayoutInflater.from(context).inflate(R.layout.watched_map_view,null);
watchedView.setText("￥"+house.getPrice()/100);
//正在看的marker对应的布局
TextView watchingView = (TextView)LayoutInflater.from(context).inflate(R.layout.watching_map_view,null);
watchingView.setText("￥"+house.getPrice()/100);
//未看过的marker对应的布局
TextView nowatchView = (TextView)LayoutInflater.from(context).inflate(R.layout.nowatch_map_view,null);
nowatchView.setText("￥"+house.getPrice()/100);
noWatchIc = BitmapDescriptorFactory.fromView(nowatchView);
watchingIc = BitmapDescriptorFactory.fromView(watchingView);
watchedIc = BitmapDescriptorFactory.fromView(watchedView);
}
/**
* 初始化时状态全为未看过
* @param map
*/
private void setDefaultMarker(BaiduMap map) {
this.status = WatchStatus.NOWATCH;
Location location = house.getLocation();
LatLng latLng = new LatLng(location.getLatitude()/1000000,location.getLongitude()/1000000);
//设置marker不可拖动
markerOptions = new MarkerOptions().position(latLng).draggable(false).icon(noWatchIc);
marker = (Marker) map.addOverlay(markerOptions);
}
private MarkerOptions markerOptions;
public MarkerOptions getMarkerOptions(){
return markerOptions;
}
/**
* 被点击的marker的操作
* 状态：未看过，已看过->正在看
* 移到叠层的最顶部
*/
public void clickSelfStatus() {
if (status == WatchStatus.NOWATCH) {
status = WatchStatus.WATCHING;
}else if (status==WatchStatus.WATCHED){
status = WatchStatus.WATCHING;
}
marker.setToTop();
resetIcon();
}
/**
* 未被点击的marker的操作
* 状态为正在看->已看过
*/
public void clickOtherStatus() {
if (status == WatchStatus.WATCHING) {
status = WatchStatus.WATCHED;
resetIcon();
}
}
/**
* 根据marker状态更改marker的背景
*/
public void resetIcon() {
if (status == WatchStatus.WATCHING) {
marker.setIcon(watchingIc);
return;
}
if (status == WatchStatus.WATCHED) {
marker.setIcon(watchedIc);
return;
}
}
/**
* 内存回收
*/
public void clear() {
noWatchIc.recycle();
watchedIc.recycle();
watchingIc.recycle();
}
}
</pre>
注释写的很明白，覆盖物的操作基本都在这一个类里
这样一进入地图页是这么个操作
<pre>
for (House item : houses) {
MapStatusMarker marker = new MapStatusMarker(map, item, getActivity());
markers.add(marker);
}
if(markers.size()==0)
return;
//baidu setTop bug 必须放在最后执行
markers.get(0).setStatus(MapStatusMarker.WatchStatus.WATCHING);
markers.get(0).clickSelfStatus();
</pre>
marker点击事件的回调是这个接口 BaiduMap.OnMarkerClickListener
<pre>
@Override
public boolean onMarkerClick(Marker marker) {
int currentPos = 0;
for (int i = 0; i < markers.size(); i++) {
MapStatusMarker item = markers.get(i);
if (item.getMarker() == marker) {
item.clickSelfStatus();
currentPos = i;
} else {
item.clickOtherStatus();
}
}
//底部的viewpager滚动到对应的房屋信息
pager.setCurrentItem(currentPos);
return false;
}
</pre>
viewpager房屋切换时marker随之而变
<pre>
@Override
public void onPageSelected(int position) {
//百度 setTop bug 必须这么写看到别逼逼
for (int i = 0; i < markers.size(); i++) {
markers.get(i).clickOtherStatus();
}
markers.get(position).clickSelfStatus();
}
</pre>
让所有的marker都在一个屏幕中显示：
<pre>
private void zoomToScreen(){
final List<OverlayOptions> overlayOptionses = new ArrayList<>();
for (int i=0;i<markers.size();i++){
overlayOptionses.add(markers.get(i).getMarkerOptions());
}
overlayManager = new OverlayManager(map) {
@Override
public List<OverlayOptions> getOverlayOptions() {
return overlayOptionses;
}
@Override
public boolean onMarkerClick(Marker marker) {
return false;
}
@Override
public boolean onPolylineClick(Polyline polyline) {
return false;
}
};
overlayManager.addToMap();
overlayManager.zoomToSpan();
overlayManager.removeFromMap();
float targetZoom = map.getMapStatus().zoom - 0.3f;
MapStatusUpdate msu = MapStatusUpdateFactory.zoomTo(targetZoom);
map.setMapStatus(msu);
}
</pre>
注意这里的targetZomm - 0.3f为什么要减这0.3呢，targetZomm不是正好的缩放比例吗？原因是这样的，zoomToSpan对应的经纬度的点宽高可以忽略，而我们的marker是有大小的，直接使用targetZomm会造成屏幕边缘的marker一部分在屏幕里，一部分在屏幕外，-0.3在1080p的手机上可以合适显示，实际这个值需要根据手机的分辨率动态设置。
然后onDestroy里回收一下内存，虽然可能没什么用- -
<pre>
@Override
public void onDestroy() {
super.onDestroy();
for (MapStatusMarker item : markers) {
item.clear();
item = null;
}
System.gc();
Runtime.getRuntime().gc();
}
</pre>
写到这里是不是觉得逻辑上两个字：完美！拍屁股去LoL了，想法倒是很清真。实际会有一些问题
坑
- 所有marker显示在一个屏幕上怎么时好时坏？
- 正在看的marker提到顶部怎么也时好时坏- -
经过查询与实验终于解决：
zoomToSpan要在地图全部加载完成后操作：
具体去实现这个接口 BaiduMap.OnMapLoadedCallback
<pre>
@Override
public void onMapLoaded() {
zoomToScreen();
}
</pre>
另外marker.setToTop()有个bug，必须等到其他的marker设置好之后，在调用才会有效，使用的地方在代码里已经注释
BB
看似复杂的逻辑，理清楚了也就那样吧，时间还是耗在了坑上，啧啧这很清真~
