Simple use of Baidu map-add line, circle, etc. (html, js), line js

Simple use of Baidu map-add line, circle, etc. (html, js), line js
Overview

All contents that overlay or overwrite a map are collectively referred to as map covers. Such as annotation, vector graphics elements (including: Line and polygon and circle), Information Window, etc. The cover has its own geographic coordinates. When you drag or scale a map, they move accordingly.

The map API provides the following cover types:

• Overlay: the abstract base class of the covering. All the covering classes inherit the methods of this class.
• Marker: annotation indicates the point on the map. You can customize the annotation icon.
• Label: indicates the text annotation on the map. You can customize the text content of the annotation.
• Polyline: Indicates the line on the map.
• Polygon: the Polygon on the map. A polygon is similar to a closed line. You can also add a fill color to it.
• Circle: Indicates the circle on the map.
• InfoWindow: The information window is also a special covering that can display richer text and multimedia information. Note: Only one information window can be opened on the map at a time.

You can use map. addOverlay to add a cover to a map and use map. removeOverlay to remove the cover. Note that this method is not applicable to InfoWindow.

I. Line

Polyline indicates the line covering on the map. It contains a group of points and connects them to form a line.

Add a line

A line is drawn as a series of line segments on a map. You can customize the color, width, and transparency of these line segments. The color can be a hexadecimal number (for example, # ff0000) or a color keyword (for example, red ).

To draw a Polyline, the browser must support vector rendering. In Internet Explorer, a map uses VML to draw a line. In other browsers, it uses SVG or Canvas.

The following code snippet creates a 6-pixel blue line between two points:

var polyline = new BMap.Polyline([       new BMap.Point(116.399, 39.910),       new BMap.Point(116.405, 39.920)     ],     {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    );    map.addOverlay(polyline);

 

 

II. Custom cover

API 1.1 and later versions support custom overlay.

YesCreate a custom cover, You need to do the following:

1. Define a user-defined covering constructor. Some free variables can be passed through the constructor parameters.

2. Set the prototype attribute of the custom covering object to the Overlay instance to inherit the covering base class.

3. Implement the initialize method. When the map. addOverlay method is called, the API calls this method.

4. Implement the draw method.

Define constructors and inherit Overlay

First, you need to define the custom covering constructor. In the following example, we define a constructor named SquareOverlay, which contains two parameters: the center point and the side length, used to create a square covering on a map.

// Define the UDF SquareOverlay (center, length, color) {this. _ center = center; this. _ length = length; this. _ color = color;} // inherits the BMap of the API. overlay SquareOverlay. prototype = new BMap. overlay ();

 

 

Initialize custom overlay

When map. when the addOverlay method adds a custom covering, the API will call the initialize method of this object to initialize the covering. During the initialization process, you need to create the DOM elements required for the covering, and add it to the corresponding map container.

A map provides several containers for Overlay display. The map. getPanes method can be used to obtain these container elements, including:

• FloatPane
• MarkerMouseTarget
• FloatShadow
• LabelPane
• MarkerPane
• MapPane

These objects represent different elements of the covering container, and there is a overwriting Relationship between them. The top layer is floatPane, which is used to display the information window content, the following layers are marked by the click area layer, Information Window shadow layer, text annotation layer, annotation layer, and vector graphics layer.

The custom square cover can be added to any layer. Here we choose to add it to markerPane as a child node.

// Implement the initialization method SquareOverlay. prototype. initialize = function (map) {// Save the map object instance this. _ map = map; // create a div element, which serves as the container var div = document. createElement ("div"); div. style. position = "absolute"; // you can set the element exterior div according to the parameter. style. width = this. _ length + "px"; div. style. height = this. _ length + "px"; div. style. background = this. _ color; // Add the div to the map in the covering container. getPanes (). markerPane. appendChild (div); // Save the div instance this. _ di V = div; // you need to use the div element as the return value of the method. When you call the show, // hide method of the cover or remove the cover, the API will operate on this element. Return div ;}

Draw a cover

So far, we have only added the cover to the map, but have not placed it in the correct position. You need to set the covering position in the draw method. Whenever the MAP status changes (such as location movement and level change), the API calls the covering draw method, used to recalculate the covering position. The map. pointToOverlayPixel method can be used to coordinate geographical coordinates to the required pixel coordinates of the covering.

// Implementation of the draw method SquareOverlay. prototype. draw = function () {// convert the value to the pixel coordinate based on the geographic coordinate transformation, and set it to the container var position = this. _ map. pointToOverlayPixel (this. _ center); this. _ div. style. left = position. x-this. _ length/2 + "px"; this. _ div. style. top = position. y-this. _ length/2 + "px ";}

 

 

Add a cover

Now you have completed the compilation of a complete custom cover, which can be added to the map.

// Initialize map var map = new BMap. map ("container"); var point = new BMap. point (116.404, 39.915); map. centerAndZoom (point, 15); // Add a custom overlay var mySquare = new SquareOverlay (map. getCenter (), 100, "red"); map. addOverlay (mySquare );

 

 

3. Add an elliptic

<! DOCTYPE html> 
 
 
Effect:

 
Thank you for reading!
Basic knowledge: http://www.cnblogs.com/0201zcr/p/4687220.html Baidu map event
Http://www.cnblogs.com/0201zcr/p/4680461.html add label
Http://www.cnblogs.com/0201zcr/p/4679444.html add map service