tool

Overview of Map Tools

Tip: The tool has been made into an open source library (lib) and is free and open to the outside world. You can directly access the JavaScript open source library. If you need to run the following sample code, please first confirm that the lib file has been introduced into the development project. For specific reference methods, see the sample source file provided by the JavaScript open source library. Note that the open source library must be used together with the Baidu Map JS API.

Baidu Map provides "tools" with more complex interactive functions, including:

MarkerTool: Marking tool. Through this tool, users can add labels to any area of ​​the map.

MarkerClusterer: Multi-annotation aggregator. This tool solves the problem of loading a large number of point features onto the map causing slowness and overwriting.

MarkerManager: Annotation management tool. This tool provides the ability to show, hide, and clear all annotations.

RichMarker: Rich annotation tool. This tool provides users with customized Marker styles and adds click, double-click, drag and drop events.

DistanceTool: Distance measurement tool. This tool allows users to measure the distance between any location on the map.

RectangleZoom: Region zoom tool. This tool will zoom in or out on the map based on the size of the rectangular area drawn by the user.

MapWrapper: Map moving tool. This tool provides the functionality to add Markers in the form of Google or GPS coordinates to Baidu Maps.

InfoBox: Custom information window tool. Similar to infoWindow, it is more flexible than infoWindow. For example, you can customize the border, close button style, etc.

LuShu: Road book, trajectory motion tool. This tool is used to realize marker movement along the route and has functions such as pause.

CityList: City list tool. This tool directly generates a city list for users and comes with city selection operations.

AreaRestriction: Area restriction tool. This tool provides users with Baidu map browsing area restriction settings.

GeoUtils: Geometric operation tools. This tool provides judgment on the relationship between points and rectangles, circles, polygon lines, and polygon faces, and provides formulas for calculating the length of polylines and the area of ​​polygons.

TrafficControl: Real-time traffic control. This tool provides real-time display, hiding, etc. of the traffic flow layer on the map.

SearchControl: Retrieve control. This tool is for mobile devices and provides city list selection, local search box, and bus driving query box. and provide corresponding functions.

DrawingManager: Mouse drawing tool. Through this tool, users can draw points, lines, and pictures anywhere on the map and display the distance of the line and the area of ​​the surface.

EventWrapper: event packaging tool. This tool provides a more user-friendly approach to using events.

TextIconOverlay: Custom overlay tool. Users can use this tool to add text and icon style overlays to the map.

SearchInRectangle: Frame zoom tool, used to achieve three rectangle search effects.

SearchInfoWindow: "Baidu map style" information window tool. This tool provides users with an information window with a search box, and the content of this window can be freely customized in a variety of styles. At the same time, users can send the title of the information window to their mobile phone as a text message.

The tool class needs to provide map instance parameters when initializing so that the tool can take effect on the map. You can add multiple tools to the map, but only one can be active at a time. The labeling tool and ranging tool will automatically exit the open state after completing an operation, while the area zoom tool can be configured to automatically close or not.

Add tools to the map

After the map has been properly initialized, you can create tool instances. The following example shows how to add a label tool to the map.

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myPushpin = new BMap.PushpinTool(map);         // 创建标注工具实例    
myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息   
 alert("您标注的位置：" +     
       e.marker.getPoint().lng + ", " +     
       e.marker.getPoint().lat);    
});    
myPushpin.open();                                  // 开启标注工具

Control the opening and closing of tools through buttons

The tool class does not provide a UI to control its opening and closing element. You can create these elements yourself as needed and place them inside or outside the map area. Calling open and close of the tool class can control the opening and closing of the tool.

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 BMapLib.DistanceTool(map);

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

##Pull-frame magnification tool

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDrag = new BMapLib.DragAndZoomTool(map, {    
 followText : "拖拽鼠标进行操作"    
});