In front of us on the blog Baidu Map SDK has written a lot, but in order to map this function to do more satisfactory, but also to improve their technology, we can add on top of the current has the function of some Features.
Today this blog, I will talk about how to add overlay on the map.
First, implement and display the same navigation icon, we need to instantiate a BitmapDescriptor instance and then call BitmapDescriptorFactory of fromSource () method, passing in the resource file, so we can be the first step in covering icon appears on the map.
Second, add a title bar surface Toolbar item option, and (MenuItem item) {in the onOptionsItemSelected Boolean public
} logical event which added after the click item. But before that, we have to be ready another class, which put us cover some of the parameters were needed.
// add a cover picture
for example, I created a new class info, then inside in this class to set some parameters covering.
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;
}
}Third, ready to info after class, we started to write logical events after the click 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);
}In this case, we'll click on the item, you can display a marker.
Fourth, ready layout files
<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>Then we put up a rendering
Fifth, click on the logic of events 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;
}
});However, we also have to click on the map to set a different location, let marker disappear.
baiduMap.setOnMapClickListener(new OnMapClickListener()
{
@Override
public boolean onMapPoiClick(MapPoi arg0)
{
return false;
}
@Override
public void onMapClick(LatLng arg0)
{
mMarkerLy.setVisibility(View.GONE);
}
});Sixth, we also want to click on the marker at the time, also want to add a line of text in the marker above.
This time we need to instantiate a infowindow object, and then add some parameters to infowindow instance.
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);, So, we're done from only one step away. We need baiduMap.setOnMapClickListener (new OnMapClickListener () {
add} a method which baiduMap.hideInfoWindow (); to hide infowindow.
