title: 百度地图之——自定义marker样式
优秀资源集锦
如果我比别人看得远些,那是因为我站在巨人们的肩上
在百度地图提供的API中，我们可以通过图片来设置marker的样式，但是当实现的效果复杂时就不能单单靠图片解决，我们已经见到了太多太多的marker样式。就让我们来实现自己想要的样式。
首先让我们来看看效果图，由这你可以任意发挥想象，做成你想要的样式。
基础的百度地图配置请参照 百度地图开发指南进行配置
一、在布局文件添加百度地图的MapView
<com.baidu.mapapi.map.MapView
android:id="@+id/bmapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true" />
然后新建marker.xml布局文件，实现一个marker的样式。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/cover_nameId"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:gravity="center"
android:text="名称：我擦我擦我擦路"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal">
<TextView
android:id="@+id/cover_temptureId"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="温度：20 C"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/cover_concentrationId"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="浓度：20 C"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:orientation="horizontal">
<TextView
android:id="@+id/cover_licquid_levelId"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="液位：200"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/cover_electricityId"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="电量：20％"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<ImageView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@mipmap/marker"/>
</LinearLayout>
二、使用到的变量声明
MapView mMapView = null;MapStatus
mMapStatus;MapStatusUpdate mMapStatusUpdate;
BaiduMap mBaiduMap;Marker coverMarker;
List<Map<String, String>> coverArray = newArrayList<Map<String, String>>();
三、地图初始化配置
//在使用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<Map<String, String>>) 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可以解决的。
