Baidu map tutorial 7 (reproduced from Baidu)

Tools

1. 1. Overview of map tools
2. 2. Add a tool to the map
3. 3. Enable and disable the button control tool
4. 4. drop-down box amplification Tool

Overview of map tools

Tip: The tool has been made into an open-source Library (LIB) for free and can be directly accessed by the Javascript open-source library. To run the following sample code, first confirm that the Lib file has been introduced into the development project. For more information, see Javascript
Sample source files provided by the Open Source library.

Baidu map provides a more complex "tool" for interaction, including:

• Markertool: Annotation Tool. With this tool, you can add tags in any area of the map.
• Markerclusterer: Multi-label aggregator. This tool solves the problem of loading a large number of points to the map, resulting in slowness and coverage.
• Markermanager: Tagging management tool. This tool displays, hides, and clears all labels.
• Richmarker: Rich annotation tool. This tool allows you to customize the marker style and add click, double-click, drag and drop events.
• Distancetool: ranging tool. This tool allows you to measure the distance between any locations on a map.
• Rectanglezoom: Regional Zoom tool. This tool scales up or down a map based on the size of the rectangle area you drag and drop.
• Mapwrapper: A map migration tool. This tool provides the ability to add Google or GPS marker to Baidu map.
• Infobox: Custom Information Window tool. Similar to infowindow, it is more flexible than infowindow, such as customizing border and closing button styles.
• Lushu: Lu Shu, trajectory movement tool. This tool is used to achieve the marker along the route and has the function of pausing.
• Citylist: City list tool. This tool directly generates a city list for users and provides the select city operation.
• Arearestriction: Region restriction tool. This tool provides users with Baidu Map Browsing area restrictions.
• Geoutils: a geometric computing tool. This tool allows you to determine the relationship between a vertex and a rectangle, a circle, a polygon line, and a polygon surface. It also allows you to calculate the length of a line and the area of a polygon.
• Trafficcontrol: real-time traffic control. This tool provides real-time display and hiding of traffic flow layers on a map.
• Searchcontrol: Retrieves controls. This tool provides a selection of city lists, a local search box, and a bus driving query box for mobile terminals. And provides relevant functions.

The tool class must provide map instance parameters during initialization to make the tool take effect on the map. You can add multiple tools on the map, but only one tool is enabled at a time. The tagging tool and ranging tool will automatically exit the enabling status after an operation is completed, and the regional scaling tool can configure whether to automatically disable it.

Add a tool to a map

After the map is correctly initialized, you can create a tool instance. The following example shows how to add a tagging tool to a map.

VaR map = new bmap. map ("Container"); map. centerandzoom (New bmap. point (116.404, 39.915), 15); var mypushpin = new bmap. pushpintool (MAP); // create the Annotation Tool instance mypushpin. addeventlistener ("markend", function (e) {// listens for events, prompting to mark point coordinate information alert ("your location:" + E. marker. getpoint (). LNG + "," + E. marker. getpoint (). LAT) ;}); mypushpin. open (); // enable the tagging Tool

Enable and disable the button control tool

The tool class does not provide the UI elements that control its enabling and disabling. You can create these elements as needed and place them inside or outside the map area. Call open and close control tools of the tool class to enable and disable them.

First, initialize the map and create an instance of the ranging tool:

var map = new BMap.Map("container");  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  var myDis = new BMap.DistanceTool(map);  

Then we create two button elements and add click events for them.

<Input type = "button" value = "enable" onclick = "mydis. open () "/> <input type =" button "value =" close "onclick =" mydis. close () "/>

Box extension tool

Some tool classes provide modifiable configuration parameters. You can refer to the API documentation to modify them to meet your requirements.

This example adds prompt text for the area Zoom tool.

VaR map = new bmap. map ("Container"); map. centerandzoom (New bmap. point (116.404, 39.915), 15); var mydrag = new bmap. dragandzoomtool (MAP, {followtext: "drag the mouse to operate "});