Android集成百度地图点聚合

在项目中集成了百度地图,刚开始Mark点少的时候滑动很流畅,后来将数据导入有三千多个Mark点,这时候滑动地图已经卡死了,只能换成点聚合了,先把需要用到的类从百度的示例项目复制到当前项目中,


下载需要用到的类

需要用到如上标注的类,上代码:

public class BdMapFragment extends Fragment {

    @BindView(R.id.iv_addhouse)
    ImageView ivAddhouse;
    @BindView(R.id.ll_addhouse)
    LinearLayout llAddhouse;
    @BindView(R.id.iv_position)
    ImageView ivPosition;
    @BindView(R.id.et_search)
    EditText etSearch;
    @BindView(R.id.ll_search)
    LinearLayout llSearch;
    @BindView(R.id.start)
    Button start;
    @BindView(R.id.end)
    Button end;
    @BindView(R.id.route)
    Button route;
    @BindView(R.id.reset)
    Button reset;
    @BindView(R.id.ll_guidelayout)
    LinearLayout llGuidelayout;
    private boolean addHouse = false;
    private LocationClient mLocationClient;
    public BDLocationListener myListener;
    private ArrayList<PolyOverlyInfo> polyInfoList = new ArrayList<>();
    private View view;
    public static MapView mMapView = null;
    //private OverItemT mItemOverlay = null, serarchItemOverlay;
    private List<HousemarkBean> houseMarkList;
    private List<HousemarkBean> searchMarkList = new ArrayList<>();
    private static final String TAG = "BdMapFragment";
    private boolean isFrist = true;
    private BaiduMap mBaiduMap;
    private Polyline mPolyline;
    private Marker marker,housemarker;
    private BitmapDescriptor bitmapred, bitmapblue;
    private static final int BAIDU_READ_PHONE_STATE =100;
    private ClusterManager<MyItem> mClusterManager;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //在使用SDK各组件之前初始化context信息,传入ApplicationContext
        //注意该方法要再setContentView方法之前实现
        view = LayoutInflater.from(getActivity()).inflate(R.layout.bdfragment_map, null);
        ButterKnife.bind(this, view);
        mMapView = (MapView) view.findViewById(R.id.mapview);
        bitmapred = BitmapDescriptorFactory.fromResource(R.drawable.position);
        mMapView.setLogoPosition(LogoPosition.logoPostionleftTop);
        mMapView.showZoomControls(false);
        mBaiduMap = mMapView.getMap();
        //普通地图
        mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
        // 定义点聚合管理类ClusterManager
        mClusterManager = new ClusterManager<MyItem>(getActivity(), mBaiduMap);
        
        mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() {//地图加载完成后
            @Override
            public void onMapLoaded() {
                getAddressPoints();
            }
        });
        mBaiduMap.setOnMapStatusChangeListener(mClusterManager);
        // 设置maker点击时的响应
        mBaiduMap.setOnMarkerClickListener(mClusterManager);

        mClusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyItem>() {
            @Override
            public boolean onClusterClick(Cluster<MyItem> cluster) {
                Toast.makeText(getActivity(),
                        "有" + cluster.getSize() + "个点", Toast.LENGTH_SHORT).show();

                return false;
            }
        });

        return view;
    }

   
    /**
     * 请求危房信息数据
     */
    private void getAddressPoints() {

        houseMarkList = new ArrayList<>();
        Map<String, Object> params=new HashMap();
        params.put("regionCode", SPUtils.getregionCode());
        RetrofitManager.getInstance().createReq(MarkApi.class).getHouseInfo(params)
                .enqueue(new Callback<BaseBean<List<HousemarkBean>>>() {
                    @Override
                    public void onResponse(Call<BaseBean<List<HousemarkBean>>> call, Response<BaseBean<List<HousemarkBean>>> response) {
                        if (response.body() != null && response.body().getCode() == 1) {
                            houseMarkList = response.body().getRows();
                            addMark(houseMarkList);//添加Mark
                        }
                    }
                    @Override
                    public void onFailure(Call<BaseBean<List<HousemarkBean>>> call, Throwable t) {
                            t.printStackTrace();
                    }
                });
    }
    /**
     * 添加mark
     *
     * @param list 危房信息集合
     */
    private void addMark(List<HousemarkBean> list) {

        List<MyItem> items = new ArrayList<MyItem>();
        for (HousemarkBean houseInfo : list) {
            LatLng latlng = PositionUtil.gpstoBd(new LatLng(houseInfo.getY(), houseInfo.getX()));
            items.add(new MyItem(latlng,houseInfo));
        }
        mClusterManager.addItems(items);
    }

    @Override
    public void onDestroyView() {
        // 关闭定位图层
        mBaiduMap.setMyLocationEnabled(false);
        mMapView.onDestroy();
        mMapView = null;
        super.onDestroyView();
    }

    @Override
    public void onResume() {
        // MapView的生命周期与Activity同步,当activity恢复时需调用MapView.onResume()
        mMapView.onResume();
        super.onResume();
    }
    @Override
    public void onPause() {
        mMapView.onPause();
        super.onPause();
    }
    /**
     * @paramgeoPoint当前点击的点
     * @return当前点击位置所在街道信息
     */
    private PolyOverlyInfo getPolyInfo(LatLng point) {
        for (PolyOverlyInfo polygonInfo : polyInfoList) {
            if (PointUtils.IsPointInPolygon(polygonInfo.getPolyline().getPoints(), point)) {
                return polygonInfo;
            }
        }
        return null;
    }

    /**
     * 每个Marker点,包含Marker点坐标以及图标
     */
    public class MyItem implements ClusterItem {
        private  LatLng mPosition;
        private HousemarkBean mhousemarkBean;

        public MyItem(LatLng latLng,HousemarkBean housemarkBean) {
            mPosition = latLng;
            mhousemarkBean=housemarkBean;
        }

        @Override
        public LatLng getPosition() {
            return mPosition;
        }

        @Override
        public BitmapDescriptor getBitmapDescriptor() {
            return BitmapDescriptorFactory
                    .fromResource(R.drawable.position);
        }

    }
    
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EventBus.getDefault().register(this);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        EventBus.getDefault().unregister(this);
    }


}
效果图如下:





要在Vue中实现百度地图聚合,可以按照以下步骤进行操作: 1. 首先,在Vue项目中安装百度地图的JavaScript API。可以通过在`index.html`文件中添加以下代码来引入百度地图的API: ```html <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script> ``` 确保替换`YOUR_API_KEY`为你自己的百度地图API密钥。 2. 在Vue组件中创建地图容器,并初始化地图。可以在`mounted`钩子函数中添加以下代码: ```javascript mounted() { const map = new BMap.Map("map-container"); // 创建地图实例 const point = new BMap.Point(经度, 纬度); // 设置地图中心坐标 map.centerAndZoom(point, 15); // 初始化地图,设置地图缩放级别 this.map = map; // 将地图实例保存到组件数据中 } ``` 确保替换`经度`和`纬度`为你希望地图显示的中心坐标。 3. 获取需要聚合的标记数据,并使用百度地图的`MarkerClusterer`类进行聚合。可以在`mounted`钩子函数中添加以下代码: ```javascript mounted() { // ... const markers = []; // 存储标记的数组 // 添加标记地图markers数组中 yourData.forEach((item) => { const point = new BMap.Point(item.lng, item.lat); const marker = new BMap.Marker(point); map.addOverlay(marker); markers.push(marker); }); // 创建聚合器并设置参数 const markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers, }); // ... } ``` 确保替换`yourData`为你的标记数据数组,每个标记的经度和纬度分别存储在`item.lng`和`item.lat`中。 4. 在Vue组件中添加地图容器的HTML代码。可以在组件模板中添加以下代码: ```html <template> <div id="map-container" style="width: 100%; height: 400px;"></div> </template> ``` 确保根据需要设置地图容器的宽度和高度。 通过以上步骤,你就可以在Vue项目中实现百度地图聚合效果了。记得在百度地图开放平台申请并获取到API密钥,并替换代码中的`YOUR_API_KEY`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值