Android Baidu map SDK v3.0.0 (3) used to add the cover Marker and InfoWindow, v3.0.0infowindow

Android Baidu map SDK v3.0.0 (3) used to add the cover Marker and InfoWindow, v3.0.0infowindow

Reprinted please indicate the source: http://blog.csdn.net/lmj623565791/article/details/37737213

The previous blog has implemented map positioning and combined with the orientation sensor user's path Chi positioning. If you are still not clear, please refer to: Android Baidu map SDK v3.0.0 (2) positioning and integration of orientation sensors. This chapter will teach you how to add a cover, perform peripheral search, and introduce the Click Appearance of the cover.

:

Our requirement is that when a user clicks clothing, food, shelter, or searches nearby, the user will return data (longitude and latitude, seller information, Introduction, etc.) from the server, and then dynamically generate a coverage to achieve the above effect. For images, due to the limited memory on the mobile phone, all images downloaded should be saved to the preset cache, for example, LruCache, and then retrieved from the cache when needed. The cache does not exist, download is completed and put into the cache; that is, the memory occupied by all images will never exceed the preset memory value in the cache. Of course, this article does not focus on this, I directly took a few images and added them to our project for simulation.

1. Entities carrying data

The data part returned from the server may eventually be a Json array. We need to convert it to an object set, that is, the following Info. java:

Package com. zhy. zhy_baidu_ditu_demo03; import java. io. serializable; import java. util. arrayList; import java. util. list; public class Info implements Serializable {private static final long serialVersionUID =-758459502806858414L;/***** precision */private double latitude;/***** latitude */private double longpolling; /*** image ID. The actual project may be the image path */private int imgId;/*** merchant name */private String name; /*** distance */private String distance;/*** Number of likes */private int zan; public static List <Info> infos = new ArrayList <Info> (); static {infos. add (new Info (34.242652, 108.971171, R. drawable. a01, "British aristocratic Hotel", "209 metres away", 1456); infos. add (new Info (34.242952, 108.972171, R. drawable. a02, "Shajing International bath club", "897 metres away", 456); infos. add (new Info (34.242852, 108.973171, R. drawable. a03, "Wuhuan Clothing City", "249 metres away", 1456); infos. add (new Info (34.242152, 108.971971, R. drawable. a04, "Old Mi's house", "679 metres away", 1456);} public Info () {} public Info (double latitude, double longpolling, int imgId, string name, String distance, int zan) {super (); this. latitude = latitude; this. longpolling = longpolling; 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 getlongpolling () {return longpolling;} public void setlongpolling (double longpolling) {this. longpolling = longpolling;} public String getName () {return name;} public int getImgId () {return imgId;} public void setImgId (int imgId) {this. imgId = imgId;} 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 ;}}

I directly declare a static list set in the object class to simulate the data returned from the server Info. infos.

2. dynamically add Overlay to a map

For convenience, I put all the buttons in the menu:

@Overridepublic boolean onOptionsItemSelected(MenuItem item){switch (item.getItemId()){ case R.id.id_menu_map_addMaker:addInfosOverlay(Info.infos);break;...｝｝

/*** Initialize the layer */public void addInfosOverlay (List <Info> infos) {mBaiduMap. clear (); LatLng latLng = null; OverlayOptions overlayOptions = null; Marker marker = null; for (Info info: infos) {// location latLng = new LatLng (info. getLatitude (), info. getlongpolling (); // icon overlayOptions = new MarkerOptions (). position (latLng ). icon (mIconMaker ). zIndex (5); marker = (Marker) (mBaiduMap. addOverlay (overlayOptions); Bundle bundle = new Bundle (); bundle. putSerializable ("info", info); marker. setExtraInfo (bundle);} // move the map to the last latitude and longitude position MapStatusUpdate u = MapStatusUpdateFactory. newLatLng (latLng); mBaiduMap. setMapStatus (u );}

We can see that Overlay is added iteratively, and then the merchant information is set in the returned Marker. When a user clicks on the Marker, the merchant data is obtained to generate a detailed information layout.

3. Add a click event for the Marker on the map:

// Click mBaiduMap on the Marker. setOnMarkerClickListener (new OnMarkerClickListener () {@ Overridepublic boolean onMarkerClick (final Marker marker) {// get the data Info = (info) marker in marker. getExtraInfo (). get ("info"); InfoWindow mInfoWindow; // generate a TextView. The user displays InfoWindowTextView location = new TextView (getApplicationContext () in the map. location. setBackgroundResource (R. drawable. location_tips); location. setPadding (30, 20, 30, 50); location. setText (info. getName (); // converts the latitude and longitude information of the marker into the final LatLng ll = marker. getPosition (); Point p = mBaiduMap. getProjection (). toScreenLocation (ll); Log. e (TAG ,"--! "+ P. x + "," + p. y); p. y-= 47; LatLng llInfo = mBaiduMap. getProjection (). fromScreenLocation (p); // Add the Click Event mInfoWindow = new InfoWindow (location, llInfo, new OnInfoWindowClickListener () {@ Overridepublic void onInfoWindowClick () {// hide InfoWindowmBaiduMap for the pop-up InfoWindow. hideInfoWindow () ;}}); // display InfoWindowmBaiduMap. showInfoWindow (mInfoWindow); // set the detailed information layout to visible mMarkerInfoLy. setVisibility (View. VISIBLE); // set the information popupInfo (mMarkerInfoLy, info) for the detailed information Layout Based on the merchant information; return true ;}});

Add data to the control in the layout of detailed information based on the merchant's information Info. java (remember to set the background and padding when generating TextView, otherwise it may become invalid ~~~)

/*** Set control information based on info ** @ param mMarkerInfo2 * @ param info */protected void popupInfo (RelativeLayout mMarkerLy, Info info) {ViewHolder viewHolder = null; if (mMarkerLy. getTag () = null) {viewHolder = new ViewHolder (); viewHolder. infoImg = (ImageView) mMarkerLy. findViewById (R.id.info _ img); viewHolder. infoName = (TextView) mMarkerLy. findViewById (R.id.info _ name); viewHolder. infoDistance = (TextView) mMarkerLy. findViewById (R.id.info _ distance); viewHolder. infoZan = (TextView) mMarkerLy. findViewById (R.id.info _ zan); mMarkerLy. setTag (viewHolder);} viewHolder = (ViewHolder) mMarkerLy. getTag (); viewHolder. infoImg. setImageResource (info. getImgId (); viewHolder. infoDistance. setText (info. getDistance (); viewHolder. infoName. setText (info. getName (); viewHolder. infoZan. setText (info. getZan () + "");}

Here we use a ViewHoler to reuse controls so that the findViewById can be executed only once.

/*** Reuse the mMarkerLy control ** @ author zhy **/private class ViewHolder {ImageView infoImg; TextView infoName; TextView infoDistance; TextView infoZan ;}

Finally, add the Click Event of the map to hide the detailed information layout and InfoWindow.

mBaiduMap.setOnMapClickListener(new OnMapClickListener(){@Overridepublic boolean onMapPoiClick(MapPoi arg0){return false;}@Overridepublic void onMapClick(LatLng arg0){mMarkerInfoLy.setVisibility(View.GONE);mBaiduMap.hideInfoWindow();}});

Finally, let's take a look at our layout file:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent"> <com. baidu. mapapi. map. mapView android: id = "@ + id/id_bmapView" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: clickable = "true"/> <RelativeLayout android: id = "@ + id/id_marker_info" android: visibility = "gone" android: layout_width = "fill_parent" android: layout_height = "220dp" android: layout_alignParentBottom = "true" android: background = "# CC4e5a6b" android: clickable = "true"> <ImageView android: id = "@ + id/info_img" 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: alpha = "1.0" android: background = "@ drawable/map_image_border_white" android: clickable = "true" android: scaleType = "fitXY" android: src = "@ drawable/a04"/> <RelativeLayout android: layout_width = "fill_parent" android: layout_height = "50dp" android: layout_alignParentBottom = "true" android: background = "@ drawable/bg_map_bottom"> <LinearLayout android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: layout_marginLeft = "20dp" android: orientation = "vertical"> <TextView android: id = "@ + id/info_name" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Old Mi family" android: textColor = "# FFF5EB"/> <TextView android: id = "@ + id/info_distance" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "200 metres away" 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: onClick = "zan" android: src = "@ drawable/map_zan"/> <TextView android: id = "@ + id/info_zan" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: text = "652" android: textColor = "# FFF5EB"/> </LinearLayout> </RelativeLayout>

Apart from MapView, the layout of other details is hidden by default. When you click Marker to display and set the initial value, you can hide the map when you click it.

Now, the introduction is complete ~~

Download source code

Note: The developer key must be replaced with the one applied by the developer. If you are not clear about the application, please refer to the first blog.

How can I add a cover to a Baidu map and click "add to each cover"? The information box will pop up.

Use closures to add events. You do not know how to query them, or ask

When a cover event is added to a Baidu map, the last one is displayed?

Hello, I used closures to solve this problem ..
Below are some of my code. You can take a look. I don't know if it will help you.
Var x = $ ("# HiddenField1"). val (). split ('-');
Var y = $ ("# HiddenField2"). val (). split ('-');
Var name = $ ("# HiddenField3"). val (). split ('-');
Var dizhi = $ ("# HiddenField4"). val (). split ('-');
Var dianhua = $ ("# HiddenField5"). val (). split ('-');
Var fuzeren = $ ("# HiddenField6"). val (). split ('-');
Var dangqiancheliangshu = $ ("# HiddenField7"). val (). split ('-');
For (var I = 0; I <x. length-1; I ++ ){
Var pt = new BMap. Point (x [I]. toString (), y [I]. toString ());
Var myIcon = new BMap. Icon ("img/zixingche_tubiao.png", new BMap. Size (25, 25 ));
Var marker2 = new BMap. Marker (pt, {icon: myIcon}); // create Annotation
Map. addOverlay (marker2 );
Var html = "<p style = 'font-size: 14px; '> site name:" + name [I]. toString () + "; site address:" + dizhi [I]. toString () + "</p> <p style = 'font-size: 14px; '> Tel:" + dianhua [I]. toString () + "; Owner:" + fuzeren [I]. toString () + "</p> <p style = 'font-size: 14px; '> current number of vehicles:" + dangqiancheliangshu [I]. toString () + "</p> ";
// Create site information window
// Var infoWindow2 = new BMap. I ...... remaining full text>