Baidu map development - draw point line prompt box 07

Posted by NoobPHP on Wed, 13 Oct 2021 02:01:04 +0200

The last tweet briefly introduced the interaction with maps, such as moving, zooming, clicking, screenshots and other functions, which are very common businesses. Next, let's learn how to dot, mark information, draw lines and surfaces on the map.

Mark points, draw lines, faces, and add prompt information

In fact, the function of drawing points on Baidu map plays a great role. For example, we can query hotels in the map. What meets the requirements can be displayed in the form of marked points, and users can see the specific location at a glance. At the same time, if you can add the pop-up information of the corresponding Hotel on the marked point, the user can see it more clearly.

Point marker

Point markers are used to mark any location on the map, such as user location, vehicle location, store location and other things with location attributes.

Add point marker

    //Gets the current location
    LatLng point=new LatLng(currentLocation.getLatitude(),currentLocation.getLongitude());
    //Build Marker Icon
    BitmapDescriptor bitmap= BitmapDescriptorFactory.fromResource(R.drawable.flag);
    //Add a Marker on the map and display it
    mBaiduMap.addOverlay(new MarkerOptions().position(point).icon(bitmap));

Click Add tag to add tag information at the current location.

For Marker, baidu official still gives high customization permission. You can set its icon, animation type, transparency, whether it can be dragged, title, etc. you can adjust it and customize it according to your needs. At the same time, the tutorial says you can also add click and drag events to the marked points.

Draw line

According to the corresponding tutorial writing method, you can draw broken lines, dotted lines, segmented color lines and segmented texture lines. Through the whole function, you can draw a variety of planned routes or object tracks.

    //Construction polyline point coordinates
    LatLng p1 = new LatLng(39.077218, 117.072102);
    LatLng p2 = new LatLng(39.007423, 117.110989);
    LatLng p3 = new LatLng(39.077218, 117.172345);
    List<LatLng> points = new ArrayList<LatLng>();
    points.add(p1);
    points.add(p2);
    points.add(p3);

    //Set properties for polylines
    OverlayOptions mOverlayOptions = new PolylineOptions()
              .width(10)
              .color(0xAAFF0000)
              .points(points);
    //Draw a polyline on the map
    Overlay mPolyline = mBaiduMap.addOverlay(mOverlayOptions);

There are many kinds of line attributes that can be set. Common attributes are as follows: color, width, Points coordinate list, colorsvalues segment color value list, extrainfo additional information, etc.

You can also add a line click event. It can be used when you need to click the drawn route on some occasions.

For drawing, you can also draw arcs, polygons and circles. You can refer to Baidu map tutorial and realize it as needed.

Next, add text and information window, which is actually pop-up information.

Text cover

In fact, it is expressed in words at a certain point on the map

 LatLng ll=new LatLng(39.077218,117.072102);
 OverlayOptions mTextOptions=new TextOptions().text("Ah Hui is the best")
    .bgColor(0xAAFFFF00) //Background color
    .fontSize(24) //Font size
    .fontColor(0xFFFF00FF) //Text color
    .rotate(-30) //Rotation angle
    .position(ll);
  Overlay mText=mBaiduMap.addOverlay(mTextOptions);

Add information box

This tutorial describes two ways to display the information box. One is to use View to construct InfoWindow, and the other is to use BitmpDescriptor to construct InfoWindow. We can simply implement the first one here.

    //Add information box
    Button button=new Button(getApplicationContext());
    button.setBackgroundResource(R.drawable.flag);
    button.setText("Hello, ah Hui");
    LatLng p1 = new LatLng(39.007423, 117.110989);
    mBaiduMap.showInfoWindow(new InfoWindow(button,p1,-100));

Here I just temporarily found a picture to pop up the bottom map of the box. Let's realize the function first. In the process of using, we should make some beautiful pictures, so that the overall beauty of the sub software will be improved.

Basically, that's all for the interaction with the map. At present, it's just simple to say that it's more commonly used. As for some detailed functions, I still need to see Baidu's official documents, although I'm not very cold about that document.

By the way, let me remind you that DEMO is much better than the official document tutorial.

Small message

Life is short. I don't want to pursue what I can't see. I just want to catch what I can see.

It's not easy to be original. Pay attention to it.

I'm a Hui. Thank you for reading. If it's helpful to you, please praise and forward it. Thank you.

Topics: Java Android Programmer