前面我们关于百度地图的SDK的博客已经写了不少了,不过为了把地图这个功能做的更完善一些,同时也为了提高自己的技术,我们还是可以在目前所具有的功能之上再添加一些功能。
今天这篇博客,我就讲讲如何在地图上添加覆盖物。
一,和实现显示导航的图标一样,我们需要实例化一个BitmapDescriptor实例,然后调用BitmapDescriptorFactory的fromSource()方法,传入资源文件,这样的话,我们就可以在地图上出现覆盖物图标的第一步。
二,在Toolbar标题栏上面添加一个item选项,然后在 public boolean onOptionsItemSelected(MenuItem item){
}里面添加点击item之后的逻辑事件。不过在这之前,我们要准备好另外一个类,这个类里面放上我们覆盖物需要的一些参数。
//添加覆盖物图片
比如我新建了一个info类,然后在这个类里面来设置一些覆盖物的参数。
public class info implements Serializable{
//private static final long serialVersionUID = -1010711775392052966L;
private double latitude;
private double longitude;
private int zan;
private String name;
private int imgId;
private String distance;
public static List<info> infos = new ArrayList<info>();
static
{
infos.add(new info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",
"距离209米", 1456));
infos.add(new info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",
"距离897米", 456));
infos.add(new info(34.242852, 108.973171, R.drawable.a03, "五环服装城",
"距离249米", 1456));
infos.add(new info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",
"距离679米", 1456));
}
public info(double latitude, double longitude, int imgId, String name,
String distance, int zan)
{
this.latitude = latitude;
this.longitude = longitude;
this.imgId = imgId;
this.name = name;
this.distance = distance;
this.zan = zan;
}
public double getLatitude()
{
return latitude;
}
public void setLatitude(double latitude)
{
this.latitude = latitude;
}
public double getLongitude()
{
return longitude;
}
public void setLongitude(double longitude)
{
this.longitude = longitude;
}
public int getImgId()
{
return imgId;
}
public void setImgId(int imgId)
{
this.imgId = imgId;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getDistance()
{
return distance;
}
public void setDistance(String distance)
{
this.distance = distance;
}
public int getZan()
{
return zan;
}
public void setZan(int zan)
{
this.zan = zan;
}
}
三,准备好info类以后,我们就开始写点击item后的逻辑事件。
case R.id.id_add:
addOverlays(info.infos);
break;
private void addOverlays(List<info> infos)
{
baiduMap.clear();
LatLng latLng = null;
Marker marker = null;
OverlayOptions options;
for (info info : infos)
{
latLng = new LatLng(info.getLatitude(), info.getLongitude());// 经纬度
options = new MarkerOptions()
.position(latLng)
.icon(mMarker)// 图标
.zIndex(5);
marker = (Marker) baiduMap.addOverlay(options);
Bundle arg0 = new Bundle();
arg0.putSerializable("info", info);
marker.setExtraInfo(arg0);
}
MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
baiduMap.setMapStatus(msu);
}
这样的话,我们就把点击item,就可以显示出marker。
四,准备布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#cc4e5a6b" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="10dp"
android:background="@drawable/img_border"
android:scaleType="fitXY"
android:src="@drawable/a01" >
</ImageView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@drawable/bg_map_bottom" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="老米家泡馍"
android:textColor="#fff5eb" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="距离200米"
android:textColor="#fff5eb" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/map_zan"
android:clickable="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="789"
android:layout_gravity="center"
android:textColor="#fff5eb" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
然后我们贴一张效果图
五,点击marker的逻辑事件
//设置marker的点击事件
baiduMap.setOnMarkerClickListener(new OnMarkerClickListener()
{
@Override
public boolean onMarkerClick(Marker marker)
{
Bundle extraInfo = marker.getExtraInfo();
info info = (info) extraInfo.getSerializable("info");
ImageView iv = (ImageView) mMarkerLy
.findViewById(R.id.id_info_img);
TextView distance = (TextView) mMarkerLy
.findViewById(R.id.id_info_distance);
TextView name = (TextView) mMarkerLy
.findViewById(R.id.id_info_name);
TextView zan = (TextView) mMarkerLy
.findViewById(R.id.id_info_zan);
iv.setImageResource(info.getImgId());
distance.setText(info.getDistance());
name.setText(info.getName());
zan.setText(info.getZan() + "");//把赞的类型由int 变成String
mMarkerLy.setVisibility(View.VISIBLE);
return true;
}
});
不过,我们同样也要设置点击地图其他位置时候,让marker消失。
baiduMap.setOnMapClickListener(new OnMapClickListener()
{
@Override
public boolean onMapPoiClick(MapPoi arg0)
{
return false;
}
@Override
public void onMapClick(LatLng arg0)
{
mMarkerLy.setVisibility(View.GONE);
}
});
六,我们还希望在点击marker的时候,还希望在marker上面添加一行文字说明。
这时候我们需要实例化一个infowindow对象,然后给infowindow实例添加一些参数。
InfoWindow infoWindow;
TextView tv = new TextView(context);
tv.setBackgroundResource(R.drawable.location_tips);
tv.setPadding(30, 20, 30, 50);
tv.setText(info.getName());
tv.setTextColor(Color.parseColor("#ffffff"));
BitmapDescriptor tips = BitmapDescriptorFactory.fromView(tv);
final LatLng latLng = marker.getPosition();
Point p = baiduMap.getProjection().toScreenLocation(latLng);
p.y -= 47;
LatLng ll = baiduMap.getProjection().fromScreenLocation(p);
infoWindow = new InfoWindow(tips, ll,p.y,
new OnInfoWindowClickListener()
{
@Override
public void onInfoWindowClick()
{
baiduMap.hideInfoWindow();
}
});
baiduMap.showInfoWindow(infoWindow);
,这样的话,我们离大功告成就只有一步之遥了。我们需要在 baiduMap.setOnMapClickListener(new OnMapClickListener(){
}方法里面添加一句baiduMap.hideInfoWindow();用来隐藏infowindow.