Baidu map API-annotation point

Annotation point

Common annotation point
Annotation indicates the point on the map. The API provides the default Icon style. You can also use the Icon class to specify custom icons. The constructor parameters of Marker are Point and MarkerOptions (optional ). Note: When you use a custom Icon, the geographical coordinate point of the annotation is located at the center of the Icon used for the annotation. You can modify the calibration position through the offset attribute of the Icon.
The following example adds a annotation to the map center and uses the default annotation style.

<Script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 2.0 & ak = fw4DkI8ZoN3UZsUc5fkkBOQc "> </script> <script type =" text/javascript "src =" Global. js "> </script> <script type =" text/javascript ">/** load map */function load () {var map = new BMap. map ("container"); var point = createPoint (116.404, 39.915); map. centerAndZoom (point, 15); map. enableScrollWheelZoom (); addCommonMarker (map); addPersonalMarker (map);}/** add common annotation */function addCommonMarker (map) {// create annotation, referencing Global. js method var marker = new BMap. marker (createPoint (116.404, 39.915); map. addOverlay (marker); // Add a label to the map} </script>

Custom annotation point icon
You can use the Icon class to customize the labeled icon. The following example uses the Icon attribute of the MarkerOptions parameter to set the icon. You can also use the marker. setIcon () method.

/** Add custom annotation */function addPersonalMarker (map) {// create a custom icon. Put the icon in the imgae folder of the class path var myIcon = new BMap. icon ("image/marker.jpg", createSize (300,157); // create var marker = new BMap. marker (createPoint (116.417, 39.909), {// specify the labeled icon as a custom icon: myIcon}); // marker. setIcon (myIcon); // This method is more in line with object-oriented map. addOverlay (marker); // Add the annotation to the map}

Listen to annotation event
You can register the listener to listen to the events marked. The events are described in the next chapter. Here we will introduce how to add a listener.

Marker. addEventListener ('click', function () {alert ('Hi, I'm a normal annotation ~ ');});

Dynamic tagging
The annotation on the map can be set as a beating annotation. At first glance, do we need a lot of JavaScript code for control? If we implement it ourselves, we should do this, however, Baidu map API library has been implemented, so we only need to call a line of code to make it OK.

/** Add dynamic annotation */function addMoveableMarker (map) {var marker = new BMap. marker (createPoint (108.963536, 34.238584); map. addOverlay (marker); marker. setAnimation (BMAP_ANIMATION_BOUNCE); // specifies a beating animation}

Annotation point Aggregation
When there are many labels for a region, but the scaling ratio of the map cannot intuitively display these labels, you can use annotation aggregation to mark them. annotation aggregation uses the MarkerClusterer class in the BMapLib namespace, the following is a way to generate annotation aggregation.
First, you need to reference two js files:

<Script type = "text/javascript" src = "http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"> </script> <script type = "text/javascript" src = "http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"> </script> /* * Add point aggregation */function addPointAggregation (map) {var MAX = 10; var markers = []; var point = null; for (var I = 0; I <MAX; I ++) {point = createPoint (Math. Random () * 40 + 85, Math. random () * 30 + 21); markers. push (new BMap. marker (point);} // The simplest usage. Generate a marker array and call the MarkerClusterer class. New BMapLib. MarkerClusterer (map, {markers: markers });}

Memory release
In API 1.0, if you need to add a large number of tags to the map Repeatedly, this may occupy a large amount of memory resources. If your annotation is no longer used after it is removed, you can use the Overlay. dispose () method to release the memory. Note: In Version 1.0, after this method is called, The annotation cannot be added to the map again. Since Version 1.1, you do not need to use this method to release memory resources. The API will automatically help you do this.
For example, you can call this method after the annotation is removed:

Map. removeOverlay (marker); marker. dispose (); // This call is not required in Versions later than 1.1.