利用百度地图实现支付宝 “到位” 功能（地图模式）

时间 2019-11-15

标签利用百度地图实现支付宝到位功能模式繁體版

原文原文链接

Hello，你们好，郭老司机又来话痨啦((/- -)/。做为一个芝麻信用分762的穷苦青年，本想着，终于能够在支付宝上，光明正大的勾搭坦诚相见的妹子们，谁知道被和谐了，互联网套路啊(ノಠ益ಠ)ノ彡┻━┻。

　
　算了，仍是聊今天咱们要说的，支付宝的“到位”功能。新版支付宝上方第四个tab，传闻丈母娘足不出户，同城招女婿的神兵利器。反正上面那些一块钱看看花、逛逛街、喝喝酒的服务好单纯好不作做<(￣ˇ￣)/。javascript

我是DEMO： github.com/CarGuo/LbsM… 用力戳♂起来。java

　到位的主要特点是地图加LBS功能，搜索周边的服务和帮忙，既然是地图，咱们就站在百度的肩膀来开车吧：android

百度地图的基本功能：地图，Marker，聚合。
百度地图的LBS功能。
图片Icon的下载与Marker更新。

一、基础地图功能

　
　首先你得有个KEY，在百度地图API上注册为开发者后，你就能够建立一个应用，记得选Android类型，由于默认是服务器类型。git

　以后在AndroidManifest上加上下面这些（网络、定位权限的就不须要列出了吧），最后在APPlication中初始化SDKInitializer.initialize(this);，这样你的的MapView就能够跑起来啦！github

<service
    android:name="com.baidu.location.f"
    android:enabled="true"
    android:process=":remote" />

<meta-data
    android:name="api_key"
    android:value="CirU5l4MGVbE59tOduYDCO6TDX27CPzV" />

<meta-data
    android:name="com.baidu.lbsapi.API_KEY"
    android:value="CirU5l4MGVbE59tOduYDCO6TDX27CPzV" />复制代码

二、初始化地图

　
　虽然用的是MapView，可是实际上操做的，是MapView里面的BaiduMap。json

　下方长♂代码走起，流程是：比例尺；不要倾角；不要旋转；设置最大和最小的缩放层级；初始化聚合管理器（后面都是他的事情）；Marker（地图上对应的item）管理器；设置显示位置的图标；初始化咱们须要的搜索Model（经纬度，半径，表id）用与保存搜索状态。是否是很简单，哇塞，我有一个地图了。api

mBaiduMap = mBaiduMapView.getMap();
// 比例尺控件
mBaiduMapView.showScaleControl(true);
// 缩放控件
mBaiduMapView.showZoomControls(false);
// 百度地图LoGo -> 正式版切记不能这么作，本人只是以为logo丑了
mBaiduMapView.removeViewAt(1);
//不倾斜
mBaiduMap.getUiSettings().setOverlookingGesturesEnabled(false);
//不旋转
mBaiduMap.getUiSettings().setRotateGesturesEnabled(false);
//设置缩放层级
mBaiduMap.setMaxAndMinZoomLevel(19, 12);
//图标管理器
mMarkerManager = new MarkerManager(mBaiduMap);
//聚合与渲染管理器
mClusterManager = new ClusterManager<>(this, mBaiduMap, mMarkerManager);

mBaiduMap.setOnMapStatusChangeListener(mClusterManager);

mBaiduMap.setOnMapLoadedCallback(this);

mBaiduMap.setMyLocationEnabled(true);

Bitmap bitmap = CommonUtil.getImageFromAssetsFile(DemoApplication.getApplication(), "current_location.png");

//调整位置图片，相似百度地图的小蓝点
float scale = 0.80f;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale);
mCLBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);

bitmap.recycle();

BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(mCLBitmap);
MyLocationConfiguration myLocationConfiguration = new MyLocationConfiguration(MyLocationConfiguration.LocationMode.NORMAL, false, bitmapDescriptor);
mBaiduMap.setMyLocationConfigeration(myLocationConfiguration);

//显示位置图标的builder
MyLocationData locData = new MyLocationData.Builder()
        .accuracy(0)
        .direction(0).latitude(llat)
        .longitude(llng).build();

//显示位置图标-珠海
mBaiduMap.setMyLocationData(locData);

//显示等级-转换：初始化为mDefaultRadius半径的层级用于显示
float level = LocationLevelUtils.returnCurZoom(mDefaultRadius);

//当前地图状态
mCurrentMapStatus = new MapStatus.Builder().target(new LatLng(llat, llng)).zoom(level).build();

mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(mCurrentMapStatus));

//初始化数据搜索model
mSearchModel = new SearchModel();
mSearchModel.setGps(llng + "," + llat);
mSearchModel.setRadius(mDefaultRadius);
mSearchModel.setLevel(level);
mSearchModel.setTableId(DemoApplication.TABLE_ID());复制代码

二、修改百度地图demo源码

　
　初始化好地图，那么咱们须要的是，在地图上显示图标，而且将临近的点聚合起来。百度地图的DEMO已经实现了这一点，可是还不够咱们的需求，这是时候咱们要修改Demo下，clusterutil路径下的类，针对聚合与Marker的显示作自定义处理。缓存

1）、ClusterItem服务器

　这个接口表明着地图上一个item，可是的百度Demo还不够，因此在里面加入新接口，用于显示咱们的自定图标，而后实现ClusterBaiduItem继承ClusterItem，将须要显示的经纬度和图标信息，保存在Item里。网络

/** * 网络的单个marker的实例 */
BitmapDescriptor getUrlMarkerIconBitmapDescriptor(boolean select);

/** * 网络的单个marker的icon路径 */
String getUrlLocalMarkerIconPath();

/** * 网络的单个聚合的icon路径 */
String getUrlClusterIconPath();复制代码

2）、ClusterManager

　这是聚合marker的管理器，内部有渲染类，将ICON渲染到地图上，同时也包含了地图状态变化的接口，这里咱们把地图的状态变化接口回调出来，方便咱们监听地图的移动和缩放。

　同时对渲染类DefaultClusterRenderer也增长get接口，由于后面咱们须要，在外部动态改变Marker的图标。地图上渲染出来的Marker在Render渲染类中，会以ClusterItem为KEY，缓存在MAP中。

//add myself 修改了地图状态变化的回调
public BaiduMap.OnMapStatusChangeListener onMapStatusChangeListener;

/** * add myself */
public DefaultClusterRenderer<T> getDefaultClusterRenderer() {
    return (DefaultClusterRenderer) mRenderer;
}复制代码

3）、NonHierarchicalDistanceBasedAlgorithm

　这个类主要关注MAX_DISTANCE_AT_ZOOM，它表明着多远的距离能够聚合，这里我的修改成200，反正我就不喜欢堆在一块儿╮(╯_╰)╭。

4）、DefaultClusterRenderer

　这是大头，很大的头，默认渲染类，固然你能够本身实现，可是秉承着快速（懒）开发的原则，我是直接在上面修改的：

修改 makeClusterBackground方法，把其中的聚合背景效果，替换为咱们自定义的背景效果。
修改makeSquareTextView方法，让聚合ICON显示的咱们本身的数字文本。
修改getClusterText方法，显示咱们须要的数字逻辑。
onBeforeClusterRendered 聚合图标的渲染在这里开始，咱们能够修改为咱们的逻辑。
perform 这是展现地图上Marker的方法，在这里修改加载逻辑，让Marker支持显示咱们的动态图标。

　显示Marker的修改，是将本来只显示drawable的功能，扩展到支持加载本地图标的支持，后面咱们只须要，把对应的Marker的图标下载下来，就能够显示不一样的网络ICON啦。下方继续长长长代码(。・・)ノ。

//聚合背景修改成咱们要的效果
private LayerDrawable makeClusterBackground() {
    //读取聚合图标
    InputStream inputStream;
    inputStream = context.getResources().openRawResource(R.raw.cluster);
    BitmapDrawable drawable = new BitmapDrawable(inputStream);
    mColoredCircleBackground = drawable;
    //将外部的圈圈去掉
    ShapeDrawable outline = new ShapeDrawable(new RoundRectShape(mOuterCircle, mInsertCircle, null));
    outline.getPaint().setColor(0x00000000);
    LayerDrawable background = new LayerDrawable(new Drawable[]{outline, mColoredCircleBackground});
    //修改padding
    int strokeWidth = (int) (mDensity * 3);
    background.setLayerInset(1, strokeWidth, strokeWidth, strokeWidth, strokeWidth);
    return background;
}

/** * 设置文本的样式,修改成使用了TextView，不用百度的SquareTextView */
private TextView makeSquareTextView(Context context) {
    TextView squareTextView =
            new TextView(context);
    ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams((int) (54 * mDensity), (int) (54 * mDensity));
    squareTextView.setLayoutParams(layoutParams);
    squareTextView.setId(R.id.text);
    squareTextView.setGravity(Gravity.CENTER);
    return squareTextView;
}

/** * 设置文本的数字显示 */
protected String getClusterText(int bucket) {
    if (bucket < BUCKETS[0]) {
        return String.valueOf(bucket);
    }
    if (bucket > 999) {
        bucket = 999;
        return String.valueOf(bucket) + "+";
    }
    return String.valueOf(bucket);
}

//显示渲染图标，修改注释部分代码
private void perform(MarkerModifier markerModifier) {
    if (!shouldRenderAsCluster(cluster)) {
        /**若是此处没有须要聚合的**/
        for (T item : cluster.getItems()) {
            Marker marker = mMarkerCache.get(item);
            MarkerWithPosition markerWithPosition;
            if (marker == null) {
                MarkerOptions markerOptions = new MarkerOptions();
                //markerOptions.animateType(MarkerOptions.MarkerAnimateType.grow);
                /** * 下面就是marker的显示 */
                BitmapDescriptor bitmapDescriptor;
                //若是有须要显示的url icon的话，就显示已下载的url Icon
                if (!TextUtils.isEmpty(item.getUrlLocalMarkerIconPath()) && new File(item.getUrlLocalMarkerIconPath()).exists()) {
                    bitmapDescriptor = item.getUrlMarkerIconBitmapDescriptor(false);
                    if (bitmapDescriptor == null) {
                        bitmapDescriptor = item.getBitmapDescriptor();
                    }
                } else {
                    bitmapDescriptor = item.getBitmapDescriptor();
                }

                ···
                onBeforeClusterItemRendered(item, markerOptions);
                marker = mClusterManager.getMarkerCollection().addMarker(markerOptions);
                markerWithPosition = new MarkerWithPosition(marker);
                //根据 item 缓存marker
                mMarkerCache.put(item, marker);

                ···
               /**显示聚合以前完善图片信息**/
               onBeforeClusterRendered(cluster, markerOptions);
         ····
}复制代码

　
5）、IconGenerator

　这个类主要是对应聚合Marker的，这里修改了聚合图标的大小，背景，文本样式等等。其中setTextAppearance配置文本的样式，如颜色，大小等，目前百度自带Bubble.TextAppearance.Light和Bubble.TextAppearance.Dark，你也能够本身配置你须要的。

三、LBS数据请求

　
　首先，你仍是得有个女朋·····我呸，得是有个KEY，一样是在百度地图API，此次选择的是服务端，建立应用后，最底部能够选择sn加密或者的ip白名单。

　既然叫服务端，通常这种工做都是服务器去作的，客户端只须要从服务端拿数据就好。可是有时候服务端没空理你（没错，就是不被理会的我），你就须要直接从百度服务器扣了。

　这里采用的是sn加密，就是根据url，经过申请到的ak和sk，还有各类请求参数，进行utf8转化和md5加密，具体有兴趣能够看看DEMO，虽然在客户端这样加密是没有意义的。

那么那咱们就开始请求数据啦：

api.map.baidu.com/geosearch/v…

上方式一次请求中完整的url，其中：

geosearch/v3/nearby 表明中附近检索模式，其余的还有支持区域（城市，全国，区）和矩形检索模式。
ak 表明的就是你的服务端申请的对应数据ak
geotable_id 对应的是lbs数据的表名，你能够经过数据管理后台直接加数据。
page_index 页数，从0开始。
page_size 每页返回数据，每页最多50。
location 检索的中心点。
radiud 检索的半径。
sn 加密后的sn。

其余的还有有关键字q，标签tag，排序sort，过滤等：

q 的检索和热词分词，具体能检索到：设置的检索字段，地址，title等。
tag 对应百度的tag字段，全匹配，能够设置逗号，空格分开。
（以上两个结合的话就是and关系哟，不是or关系）
sort排序只能排序int或者double的字段
filter能够将检索到的数据再过滤一遍，支持离线和区间。

还有其余的就在百度官网了，再说下去真的就废话了。

　请求到数据后，lbs对应返回咱们须要的json，咱们映射成须要的model，组装ClusterBaiduItem并设置图标，用于ClusterManager渲染。

　可是！！！百度地图Ｍarker不支持url！这就尴尬了，因此咱们仍是乖乖本身下载吧┑(￣Д ￣)┍。

四、下载图标

　
下载逻辑具体可看demo中的 ICONJob（真的好懒），主要的逻辑是：

根据URL生成对应md5的文件名字，若是文件存在，就通知marker更新。
文件不存在，下载（MD5+tmp）名字的文件。
下载完以后判断文件是否为图片，是图片的话就转为须要大小的bitmp，而后保存大图（文件名为MD5 + BIG）和小图（文件名为MD5），大图用来作点击高亮，小图用于正常显示。
按照上面逻辑一张一张顺序的下载ICON到本地。

这里主要是动态更新Marker的图标逻辑：

　根据下载成功的ICON对应的id，找到对应的ClusterBaiduItem，经过ClusterBaiduItem，在ClusterManager的DefaultClusterRenderer中拿到marker，修改marker的图标，为咱们下载成功的图片，对应的一一更新，哇塞，好简单。

for (ClusterBaiduItem clusterBaiduItem : mClusterBaiduItems) {
    LBSModel lbsModel = clusterBaiduItem.getLBAModel();
    //此处根据id设置对应的图片
    if (lbsModel.getUid() == e.geteId()) {
        BitmapDescriptor bitmapDescriptor;
        if (!TextUtils.isEmpty(clusterBaiduItem.getUrlLocalMarkerIconPath()) &&
                new File(clusterBaiduItem.getUrlLocalMarkerIconPath()).exists()) {
            bitmapDescriptor = clusterBaiduItem.getUrlMarkerIconBitmapDescriptor(false);
            if (bitmapDescriptor == null) {
                bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
            }
        } else {
            bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
        }
        //从聚合管理器里面拿到marker，动态改变它
        Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(clusterBaiduItem);
        if (marker != null) {
            marker.setIcon(bitmapDescriptor);
        }
        //刷新
        mClusterManager.cluster();
        return;
    }

}复制代码

五、根据地图状态更新数据

　
　在地图移动和缩放的时候，由于地理信息改变了，须要更新数据，这时候能够经过setOnMapStatusChangeListener来监听地图的变化。

首先若是没有移动过，在移动开始的时候，就保存当前最初状态MapStatus，用来和后面的新的Status做对比。
在状态改变中止的时候，判断是移动仍是缩放。
若是是缩放，或者移动操做设定好的距离参数，就进入等待请求数据，将保存的Status清空。
移动和缩放多是连续性的，进入等待请求网络会设定一个1秒多的延时。
若是一秒多没有动做，就真正开始请求。
若是又发生了变化，那么就取消执行请求，从新发起请求的等待。
每一个请求会设置一个UUID做为请求的TAG，在数据返回的时候，判断这一波数据对应的TAG，是否是当前页面最后发起的，若是是的话，就接受，若是不是，我要你何用╮(╯_╰)╭。

mClusterManager.setOnMapStatusChangeListener(new BaiduMap.OnMapStatusChangeListener() {

    //记住变化前的上一个状态
    private MapStatus mFrontMapStatus;

    @Override
    public void onMapStatusChangeStart(MapStatus mapStatus) {
        if (mFrontMapStatus == null) {
            mFrontMapStatus = mapStatus;
        }
    }
    @Override
    public void onMapStatusChangeFinish(MapStatus mapStatus) {
        //此处须要注意，若是是进入的时候从新定位了地址，或者进入后在改变地图状态，可能也会进入这里
        if (mHadRequest) {
            if (StatusChangeLogic(mFrontMapStatus, mapStatus)) {//处理移动与放大
                mFrontMapStatus = null;
            }
        }
        mCurrentMapStatus = mapStatus;
    }
});

/** * 地图由于操做而发生了状态改变 */
private boolean StatusChangeLogic(MapStatus frontMapStatus, MapStatus mapStatus) {
    //从新肯定搜索半径的中心图标
    mSearchModel.setGps(mapStatus.bound.getCenter().longitude + "," + mapStatus.bound.getCenter().latitude);
    //从新肯定层级
    mSearchModel.setLevel(mapStatus.zoom);

    if (frontMapStatus == null)
        return false;

    //获得屏幕的距离大小
    double areaLength1 = DistanceUtil.getDistance(mapStatus.bound.northeast, mapStatus.bound.southwest);

    //计算屏幕的大小半径
    int radius = (int) areaLength1 / 2;

    //从新肯定搜索的半径
    mSearchModel.setRadius(radius);

    if (frontMapStatus.zoom == mapStatus.zoom) {
        if (frontMapStatus.bound == null)
            return false;
        //若是是移动了，获得距离
        double moveLenght = DistanceUtil.getDistance(frontMapStatus.bound.getCenter(), mapStatus.bound.getCenter());
        //若是移动距离大于屏幕的检索半径，请求数据
        if (moveLenght >= radius) {
            RequestNewDataLogic(true, true);
            return true;
        }

        //若是经纬度发生变化了，通常都是切换的城市之类的
        if (mChangeStatus != null && (mapStatus.target.latitude) != (int) (mChangeStatus.target.latitude)
                && (int) (mapStatus.target.longitude) != (int) (mChangeStatus.target.longitude) && mIsChangeCity) {
            RequestNewDataLogic(true, true);
            mIsChangeCity = false;
            return true;
        }

        return false;
    } else {
        //若是是缩放的话，地图层级发生改变，从新请求数据
        RequestNewDataLogic(true, true);
        return true;
    }
}复制代码

五、点击放大Marker

　
效果：

　点击放大，其实也是动态改变marker的图标，根据ClusterBiaduItem拿到对应的marker，设置为大图选中的Bitmap，废话不说，下方撸码。

//恢复上一个点击为正常状态
if (mPreClickItem != null) {
    mPreClickItem.setBitmapId(R.drawable.default_map_icon);
    BitmapDescriptor bitmapDescriptor;
    //是否已经下载了ICON
    if (!TextUtils.isEmpty(mPreClickItem.getUrlLocalMarkerIconPath()) &&
            new File(mPreClickItem.getUrlLocalMarkerIconPath()).exists()) {
        bitmapDescriptor = mPreClickItem.getUrlMarkerIconBitmapDescriptor(false);
        if (bitmapDescriptor == null) {
            bitmapDescriptor = mPreClickItem.getBitmapDescriptor();
        }
    } else {
        bitmapDescriptor = mPreClickItem.getBitmapDescriptor();
    }
    //从聚合管理器里面拿到marker，动态改变它
    Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(mPreClickItem);
    if (marker != null) {
        marker.setIcon(bitmapDescriptor);
    }
}
//设置新的点击为大图状态
if (clusterBaiduItem != null) {
    clusterBaiduItem.setBitmapId(R.drawable.default_map_icon_big);
    BitmapDescriptor bitmapDescriptor;
    //是否已经下载了ICON
    if (!TextUtils.isEmpty(clusterBaiduItem.getUrlLocalMarkerIconPath()) &&
            new File(clusterBaiduItem.getUrlLocalMarkerIconPath()).exists()) {
        bitmapDescriptor = clusterBaiduItem.getUrlMarkerIconBitmapDescriptor(true);
        if (bitmapDescriptor == null) {
            bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
        }
    } else {
        bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
    }
    //从聚合管理器里面拿到marker，动态改变它
    Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(clusterBaiduItem);
    if (marker != null) {
        marker.setIcon(bitmapDescriptor);
    }
    //刷新
    mClusterManager.cluster();

}
mPreClickItem = clusterBaiduItem;复制代码

六、点击聚合Marker，展开聚合到屏幕大小图层

　
效果：

　点击聚合展开，其实很简单！<(￣︶￣)>，将聚合的ClusterBaiduItem，用LatLngBounds.Builder ,将经纬度收集起来，以后经过MapStatusUpdateFactory生成新的mapstatus，BiaduMap使用animateMapStatus便可展开咯。

if (mBaiduMap == null) {
    return;
}
if (clusterBaiduItems.getItems().size() > 0) {
    LatLngBounds.Builder builder = new LatLngBounds.Builder();
    for (ClusterBaiduItem clusterBaiduItem : clusterBaiduItems.getItems()) {
        builder.include(clusterBaiduItem.getPosition());
    }
    mBaiduMap.animateMapStatus(MapStatusUpdateFactory
            .newLatLngBounds(builder.build()));
}复制代码

这里大体上就是实现到位图标的粗糙逻辑，最后仍是经过DEMO撸起来，会更有感受<(￣ˇ￣)/。

我是DEMO： github.com/CarGuo/LbsM… 用户戳♂起来。

最后

须要注意的，sn校验的时候，须要注意请求参数的tag，q，filter中的逗号，‘&’，‘|’，‘/’d，空格等分割特殊符号的处理，否则很容易检验失败。
数据的返回，不必定是你要50就返回50，由于有增量更新的同步问题，因此有时候数据被删除后，可能会致使某一页只返回49等50如下的数量。
最好不要开启效果显示Marker，由于Marker多了，会很卡，你能够针对某一个Marker去执行动画，具体有drop,grow。
切换城市等经纬度变化，也会使得地图的MapStatus的回调发生改变，这时候注意，不要由于触发了缩放移动地图的请求，你又主动发起了请求，从而同时产生两个请求哟。
若是使用百度定位，注意定位可能同时进入回调几回，注意不要所以发起好几回请求哟。

我的Github：github.com/CarGuo