百度地圖 ~ 覆蓋物

易冬發表於2017-03-11
地圖

前言

地圖上新增view和覆蓋物。

地圖Logo不允許遮擋，可通過mBaiduMap.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);方法可以設定地圖邊界區域，來避免UI遮擋。
其中引數paddingLeft、paddingTop、paddingRight、paddingBottom參數列示距離螢幕邊框的左、上、右、下邊距的距離，單位為螢幕座標的畫素密度。

----------------->利用這個來新增自定義的內容

  • 標註覆蓋物
  • 幾何圖形覆蓋物
  • 文字覆蓋物
  • 彈出窗覆蓋物

內容

地圖上新增View
由於地圖的Logo不允許被遮擋，百度自然會想辦法針對一些開發者場景作出自己的調整，比如上面所說的setPadding()或者setViewPadding()一樣好使，具體的使用分為兩步：
第一步，

mBaiduMap.setPadding(0, 0, 0, 200);複製程式碼

第二步，

    private void addView() {
        TextView textView = new TextView(this);
        textView.setText("這是使用者自定義的View,這個時候logo和底部的一些內容會向上移動，因為MapView設定了底部Padding");
        textView.setBackgroundResource(R.color.colorPrimary); //建立一個TextView然後往底部放置，官方Demo如是操作
        MapViewLayoutParams.Builder builder = new MapViewLayoutParams.Builder();
        builder.layoutMode(MapViewLayoutParams.ELayoutMode.absoluteMode);
        builder.width(bmapView.getWidth());
        builder.height(200);
        builder.point(new Point(0, bmapView.getHeight()));
        builder.align(MapViewLayoutParams.ALIGN_LEFT, MapViewLayoutParams.ALIGN_BOTTOM);
        bmapView.addView(textView, builder.build());
    }複製程式碼

這樣子就在底部新增了一個TextView，當然想新增其他的View自然也是可行的，具體效果圖往下看。

地理編碼，標註覆蓋物和彈出窗覆蓋物
利用標註覆蓋物在地圖上的特定位置新增標註，然後給標註覆蓋物設定點選監聽展示彈出覆蓋物

//這個是“打點”按鈕的點選事件，點選事件發生後，地理編碼物件執行Address->location的解析，解析結果返回之後，拿到對應的點的經緯度，也就是LatLng例項和對應的地址資訊，然後執行addMarker操作
private void addPointByEditText() {
    String placename = etPoint.getText().toString();
    final GeoCoder geo = GeoCoder.newInstance();
    geo.setOnGetGeoCodeResultListener(new OnGetGeoCoderResultListener() {
        @Override
        public void onGetGeoCodeResult(GeoCodeResult geoCodeResult) {
            if (geoCodeResult.getLocation() != null) {
                addMarker(geoCodeResult.getLocation() , geoCodeResult.getAddress());
                //addText(geoCodeResult.getLocation(), "看過來 :" + geoCodeResult.getAddress());//這個是後面新增文字覆蓋物的時候使用到的
            } else {
                Toast.makeText(MainActivity.this, " No Result of GeoCoder! Sorry", Toast.LENGTH_SHORT).show();
            }
        }

        @Override
        public void onGetReverseGeoCodeResult(ReverseGeoCodeResult reverseGeoCodeResult) {

        }
    });

    geo.geocode(new GeoCodeOption().address(placename).city(placename));
}
......


//新增標註物
private void addMarker(LatLng point, String address) {
    //定義Maker座標點
    //LatLng point = new LatLng(39.963175, 116.400244);
    //構建MarkerOption，用於在地圖上新增Marker
    Bundle bundle = new Bundle();
    bundle.putParcelable("LATLNG", point);//傳遞Bundle物件，方便後面讀取對應的info來建立pop window
    bundle.putString("ADDRESS", address);
    OverlayOptions option = new MarkerOptions()
            .position(point)
            .icon(bitmap).extraInfo(bundle);
    //在地圖上新增Marker，並顯示
    mBaiduMap.addOverlay(option);
}


//設定標註覆蓋物的點選事件監聽
mBaiduMap.setOnMarkerClickListener(new BaiduMap.OnMarkerClickListener() {
    @Override
    public boolean onMarkerClick(Marker marker) {
        //這裡是MarkerOption建立的時候傳入的點座標和對應的地址資訊
        if (marker.getExtraInfo() != null) {
            LatLng point = marker.getExtraInfo().getParcelable("LATLNG");
            String address = marker.getExtraInfo().getString("ADDRESS");
            addPop(point, address);
        }
        return false;
    }
});
......


//新增彈出窗覆蓋物
private void addPop(LatLng point, String message) {
    //建立InfoWindow展示的view
    Button button = new Button(getApplicationContext());
    button.setBackgroundResource(R.drawable.marker_info_bg);
    button.setTextColor(Color.WHITE);
    button.setText(message);

    //建立InfoWindow , 傳入 view， 地理座標， y 軸偏移量
    InfoWindow mInfoWindow = new InfoWindow(button, point, -47);
    //顯示InfoWindow
    mBaiduMap.showInfoWindow(mInfoWindow);
}複製程式碼

實際效果圖：

百度地圖 ~ 覆蓋物
彈出無和新增View

文字覆蓋物
文字覆蓋物主要就是在地圖上新增一些字串， 用上面的程式碼，將標註覆蓋物改成文字覆蓋物

    //設定文字覆蓋物
    private void addText(LatLng point, String message) {

        //構建文字Option物件，用於在地圖上新增文字
        OverlayOptions textOption = new TextOptions()
                .bgColor(0xAAFFFF00)
                .fontSize(35)
                .fontColor(0xFFFF00FF)
                .text(message)
                .rotate(-30)
                .position(point);
        //在地圖上新增該文字物件並顯示
        mBaiduMap.addOverlay(textOption);
    }複製程式碼

實際效果圖：

百度地圖 ~ 覆蓋物
文字覆蓋物

行政區邊界搜尋和多邊形覆蓋物
利用DistrictSearch和PolyOverlay，實現圈出行政區域的效果

mDistrictSearch = DistrictSearch.newInstance();//建立行政區域查詢的例項
......

//新增多邊形區域
private void addPoly(String cityname) {
    //建立搜尋條件
    DistrictSearchOption option = new DistrictSearchOption().cityName(cityname).districtName(cityname);

    //設定搜尋監聽事件
    mDistrictSearch.setOnDistrictSearchListener(new OnGetDistricSearchResultListener() {
        @Override
        public void onGetDistrictResult(DistrictResult districtResult) {
            if (districtResult.error == SearchResult.ERRORNO.NO_ERROR) {
                List<List<LatLng>> pointsList = districtResult.getPolylines();
                if (pointsList == null) return;
                //地理邊界物件
                LatLngBounds.Builder builder = new LatLngBounds.Builder();
                for (List<LatLng> polyline : pointsList) {
                    OverlayOptions ooPolyline11 = new PolylineOptions().width(10)
                            .points(polyline).dottedLine(true).color(Color.RED);
                    mBaiduMap.addOverlay(ooPolyline11);//新增OverLay

                    OverlayOptions ooPolygon = new PolygonOptions().points(polyline)
                            .stroke(new Stroke(5, 0xAA00FF88)).fillColor(0xAAFFFF00);
                    mBaiduMap.addOverlay(ooPolygon);//新增OverLay
                    for (LatLng latLng : polyline) {
                        builder.include(latLng);//包含這些點
                    }
                }
            }
        }
    });
    mDistrictSearch.searchDistrict(option);//執行行政區域的搜尋
}複製程式碼

實際效果圖：

百度地圖 ~ 覆蓋物
多邊形覆蓋物

備註

具體SDK整合請參考官網

相關文章