Baidu Map api-Custom icon Overlay

Map Overlays

Overlay: The abstract base class of the covering, all of which inherit the method of this class.

Marker: The callout represents a point on the map, and you can customize the icon for the callout.

Polyline: Represents a polyline on a map.

Polygon: Represents a polygon on a map. Polygons are similar to closed polylines, and you can also add fill colors to them.

Circle: Represents a circle on a map.

Infowindow: Information window is also a special covering, it can display more rich text and multimedia information. Note: Only one information window can be opened on the map at the same time

Map.addoverlay ways to add overlays to a map

Map.removeoverlay method to remove the overlay, note that this method is not applicable to Infowindow annotations

The arguments to the marker constructor are point and markeroptions (optional).

Note: When you use a custom icon, the geographical coordinates of the callout will be in the center of the icon used for the label, and you can modify the calibration position custom overlay by the Offset property of the icon

The API supports user-defined overlays since version 1.1.

To create a custom overlay, you need to do the following:

1. Define a constructor for a custom overlay that can pass some free variables through the constructor arguments.

2. Set the prototype property of the custom overlay object to an instance of overlay to inherit the overlay base class.

3. Implement the Initialize method, which is called by the API when the Map.addoverlay method is called.

4. Implement the Draw method.

Basic steps:

1 var map = new Bmap.map ("Allmap");//Create Map Instance
2 var point = new Bmap.point (116.404, 39.915);//create dot coordinate
3 Map.centerandz Oom (Point, 15);//map initialization, set center coordinates and map level. Maps must be initialized to perform other operations
4 var marker = new Bmap.marker (point);  Create callout
5 map.addoverlay (marker);               Add a callout to a map

Prototype property to add properties to an object

Div.style.whiteSpace = "nowrap"; text in a paragraph does not wrap:

Div.style.MozUserSelect = "none"; let the text not be selected

Here's your demo.

<! DOCTYPE html>  
If you want to open the information window on the overlay, then you can only use marker, because the custom overlay does not have a way to open the Information window, you can use the custom icon to bind the icon to the method on the marker:

var Myicon = new Bmap.icon ("Http://www.yantiansf.cn/mapImage/1.gif", New Bmap.size (30,30), {
                anchor:new bmap.size ( 13,15),
                imageoffset:new bmap.size (0,0)
            });
var mk = new Bmap.marker (Point,{icon:myicon});  
 
However, this method cannot resize the image, so it may be necessary to resize the picture before using:

The effect is as shown (dynamic):

Test Address: Http://developer.baidu.com/map/jsdemo.htm#c1_16