百度地图之——自定义marker样式


title: 百度地图之——自定义marker样式

优秀资源集锦

如果我比别人看得远些,那是因为我站在巨人们的肩上

在百度地图提供的API中,我们可以通过图片来设置marker的样式,但是当实现的效果复杂时就不能单单靠图片解决,我们已经见到了太多太多的marker样式。就让我们来实现自己想要的样式。

首先让我们来看看效果图,由这你可以任意发挥想象,做成你想要的样式。

百度地图之——自定义marker样式_第1张图片

基础的百度地图配置请参照 百度地图开发指南进行配置

一、在布局文件添加百度地图的MapView

    

然后新建marker.xml布局文件,实现一个marker的样式。




    

    

        

        
    

    

        

        
    
    



二、使用到的变量声明

MapView mMapView = null;MapStatus 
mMapStatus;MapStatusUpdate mMapStatusUpdate;
BaiduMap mBaiduMap;Marker coverMarker;
List> coverArray = newArrayList>();

三、地图初始化配置

        //在使用SDK各组件之前初始化context信息,传入ApplicationContext
        //注意该方法要再setContentView方法之前实现
        SDKInitializer.initialize(getApplicationContext());
        setContentView(R.layout.activity_covermap);
        //获取地图控件引用
        mMapView = (MapView) findViewById(R.id.bmapView);
        mBaiduMap = mMapView.getMap();
        Intent intent = getIntent();
        coverArray = (List>) intent.getSerializableExtra("coverArray");
        System.out.println("coverArray:" + coverArray.size());
        if (coverArray.size() != 0) {
            //经纬度   Latitude and longitude
            String latitude = coverArray.get(0).get("latitude");
            String longitude = coverArray.get(0).get("longitude");
            System.out.println("latitude:" + latitude + "   longitude:" + longitude);
            LatLng cenpt = new LatLng(Double.valueOf(latitude), Double.valueOf(longitude));
            mMapStatus = new MapStatus.Builder().target(cenpt).zoom(16).build();
            mMapStatusUpdate = MapStatusUpdateFactory.newMapStatus(mMapStatus);
            mBaiduMap.setMapStatus(mMapStatusUpdate);
            addMarkers();   //添加标注。
        }

四、addMarker()函数

private void addMarkers() {
    double[][] coordinates = new double[coverArray.size()][2];
    for (int i = 0; i < coverArray.size(); i++) {
        coordinates[i][0] = Double.parseDouble(coverArray.get(i).get("longitude"));
        coordinates[i][1] = Double.parseDouble(coverArray.get(i).get("latitude"));
    }
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.marker, null);
    TextView coverNameTv = (TextView) view.findViewById(R.id.cover_nameId);
    TextView covertemptureTv = (TextView) view.findViewById(R.id.cover_temptureId);
    TextView coverconcentrationTv = (TextView) view.findViewById(R.id.cover_concentrationId);
    TextView coverlicquidlevelTv = (TextView) view.findViewById(R.id.cover_licquid_levelId);
    TextView coverelectricityTv = (TextView) view.findViewById(R.id.cover_electricityId);
    for (int j = 0; j < coverArray.size(); j++) {
        LatLng lla = new LatLng(coordinates[j][1], coordinates[j][0]);
        coverNameTv.setText(coverArray.get(j).get("covername"));
        covertemptureTv.setText("温度:" + coverArray.get(j).get("temperature") + "℃");
        coverconcentrationTv.setText("浓度:" + coverArray.get(j).get("concentration"));
        coverlicquidlevelTv.setText("液位:" + coverArray.get(j).get("liquidlevel"));
        coverelectricityTv.setText("电量:" + coverArray.get(j).get("electricity") + "%");
        if (coverArray.get(j).get("lostflag").equals("1")) {
            coverNameTv.setBackgroundColor(Color.RED);
            covertemptureTv.setBackgroundColor(Color.RED);
            coverconcentrationTv.setBackgroundColor(Color.RED);
            coverlicquidlevelTv.setBackgroundColor(Color.RED);
            coverelectricityTv.setBackgroundColor(Color.RED);
        }
        else{
            coverNameTv.setBackgroundColor(Color.GRAY);
            covertemptureTv.setBackgroundColor(Color.WHITE);
            coverconcentrationTv.setBackgroundColor(Color.WHITE);
            coverlicquidlevelTv.setBackgroundColor(Color.GRAY);
            coverelectricityTv.setBackgroundColor(Color.GRAY);
        }
        BitmapDescriptor bd1 = BitmapDescriptorFactory.fromBitmap(getBitmapFromView(view));
        MarkerOptions ooA = new MarkerOptions().position(lla).icon(bd1).zIndex(9).draggable(true).title(coverArray.get(j).get("coverid"));

        coverMarker = (Marker) mBaiduMap.addOverlay(ooA);
    }
}

其中最重要的是

 BitmapDescriptorFactory.fromBitmap(getBitmapFromView(view))

而在百度地图的API中,

BitmapDescriptorFactory.fromBitmap(Bitmap bitmap)

传入的是一个Bitmap的对象,这样我们就知道要怎么做了。我们就应该把我们的刚才新建的marker.xml 页面转换成一个Bitmap对象。

新建getBitmapFromView()函数,

将一个view的对象转换成一个bitmap形的对象。


    private Bitmap getBitmapFromView(View view) {
        view.destroyDrawingCache();
        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.UNSPECIFIED);
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
        view.setDrawingCacheEnabled(true);
        Bitmap bitmap = view.getDrawingCache();
        return bitmap;
    }

这样我们就实现了自定义的marker.其中关键的代码就是
getBitmapFromView() 这个方法,其他的都是百度API可以解决的。

你可能感兴趣的:(百度地图之——自定义marker样式)