cover


Table of Contents

  • 1 Map Overlay Overview
  • 2 Mark
  • ##3 Information window
  • 4 Polyline
  • ##5 Custom overlay

    • Overview of Map Overlay

    All content that is superimposed or covered on the map is collectively referred to as map overlay. Such as annotations, vector graphic elements (including polylines, polygons and circles), information windows, etc. Overlays have their own geographic coordinates, and when you drag or zoom the map, they move accordingly.

    The map API provides the following types of overlays:

    Overlay: The abstract base class of overlays. All overlays inherit the methods of this class.

    Marker: Marker represents a point on the map, and the mark icon can be customized.

    Label: Represents the text label on the map. You can customize the text content of the label.

    Polyline: Represents a polyline on the map.

    Polygon: Represents a polygon on the map. A polygon is similar to a closed polyline, but you can also add a fill color to it.

    Circle: Represents a circle on the map.

    InfoWindow: The information window is also a special overlay that can display richer text and multimedia information. Note: Only one information window can be open on the map at the same time.

    You can use the map.addOverlay method to add an overlay to the map, and the map.removeOverlay method to remove the overlay. Note that this method does not apply to InfoWindow.

    Label

    Label represents a point on the map. The API provides default icon styles, and you can also specify custom icons through the Icon class. The parameters of Marker's constructor are Point and MarkerOptions (optional). Note: When you use a custom icon, the geographical coordinate point of the label will be located at the center of the icon used for labeling. You can modify the calibration position through the offset property of the Icon.

    The following example adds a label to the center point of the map and uses the default label style. 

    var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

    Define the label icon

    The icon for custom labeling can be realized through the Icon class. The following example uses the parameter MarkerOptions To set the icon attribute, you can also use the marker.setIcon() method. 

    var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 编写自定义函数，创建标注   
function addMarker(point, index){  // 创建图标对象   
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
// 指定定位位置。   
// 当标注显示在地图上时，其所指向的地理位置距离图标左上    
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
   // 图标中央下端的尖角位置。    
   offset: new BMap.Size(10, 25),    
   // 设置图片偏移。   
   // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
   // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
   imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
 });      
// 创建标注对象并添加到地图   
 var marker = new BMap.Marker(point, {icon: myIcon});    
 map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
 var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                            bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
 addMarker(point, i);    
}

    Listen to label events

    The event method is the same as the Map event mechanism. Please refer to the events section. 

    marker.addEventListener("click", function(){    
 alert("您点击了标注");    });

    Dragable annotation

    The enableDragging and disableDragging methods of marker can be used to turn on and off the dragging function of the marker. By default, markers do not support dragging. You need to call the marker.enableDragging() method to enable the dragging function. After the dragging function is enabled for an annotation, you can listen to the dragend event of the annotation to capture the latest position of the annotation after dragging. 

    marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
 alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

    Memory Release

    In API version 1.0, if you need to repeatedly add a large number of labels to the map , which may occupy more memory resources. If your annotation is no longer used after removal, you can call the Overlay.dispose() method to free up memory. Note that in version 1.0, labels will not be added to the map again after calling this method. Starting from version 1.1, you no longer need to use this method to release memory resources, the API will automatically help you complete this work.

    For example, you can call this method after the annotation has been removed: 

    map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不需要这样调用

    Information window

    The information window displays HTML content floating above the map. The information window can be opened directly at any location on the map, or it can be opened on the label object (in this case, the coordinates of the information window are consistent with the coordinates of the label). You can use InfoWindow to create an information window instance. Note that only one information window can be open on the map at the same time. 

    var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

    Polyline

    Polyline represents a polyline overlay on the map. It consists of a set of points and connects these points to form a polyline.

    Add Polyline

    Polylines are drawn on the map as a series of straight segments. The color, thickness, and transparency of these segments can be customized. The color can be a hexadecimal number (for example: #ff0000) or a color keyword (for example: red).

    Polyline drawing requires the browser to support the vector drawing function. In Internet Explorer, the map uses VML to draw polylines; in other browsers, use SVG or Canvas

    The following code snippet creates a 6-pixel-wide blue polyline 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);

    Customized overlay

    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, and pass some free variables through the constructor parameters.

    2. Set the prototype attribute of the custom overlay object to an instance of Overlay so that it can inherit the overlay base class.

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

    4. Implement the draw method.

    Define the constructor and inherit Overlay

    First you need to define the constructor of the custom overlay, in the following example we define a constructor called SquareOverlay , which contains two parameters: center point and side length, and is used to create a square overlay on the map. 

    // 定义自定义覆盖物的构造函数  
function SquareOverlay(center, length, color){    
 this._center = center;    
 this._length = length;    
 this._color = color;    
}    
// 继承API的BMap.Overlay    
SquareOverlay.prototype = new BMap.Overlay();

    Initialize custom overlay

    When the map.addOverlay method is called to add a custom overlay, the API The object's initialize method will be called to initialize the overlay. During the initialization process, the DOM elements required for the overlay need to be created and added to the corresponding container of the map.

    The map provides several containers for overlay display. These container elements can be obtained through the map.getPanes method. They include:

    floatPane

    markerMouseTarget

    floatShadow

    labelPane

    markerPane

    mapPane

    These objects represent different cover container elements, and there is an overlay relationship between them. The top layer is floatPane, which is used to display the content of the information window. The following are the annotations. Click on the area layer, info window shadow layer, text annotation layer, annotation layer, and vector graphics layer.

    Our custom square cover can be added to any layer. Here we choose to add it to the markerPane as one of its child nodes. 

    // 实现初始化方法  
SquareOverlay.prototype.initialize = function(map){    
// 保存map对象实例   
 this._map = map;        
 // 创建div元素，作为自定义覆盖物的容器   
 var div = document.createElement("div");    
 div.style.position = "absolute";        
 // 可以根据参数设置元素外观   
 div.style.width = this._length + "px";    
 div.style.height = this._length + "px";    
 div.style.background = this._color;      
// 将div添加到覆盖物容器中   
 map.getPanes().markerPane.appendChild(div);      
// 保存div实例   
 this._div = div;      
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、   
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。   
 return div;

    Drawing Overlay

    So far we have only added overlay to the map, but not Not placing it in the right place. You need to set the position of the overlay in the draw method. Whenever the map state changes (for example, position movement, level change), the API will call the overlay's draw method to recalculate the position of the overlay. The geographical coordinates can be converted to the required pixel coordinates of the overlay through the map.pointToOverlayPixel method. 

    // 实现绘制方法   
SquareOverlay.prototype.draw = function(){    
// 根据地理坐标转换为像素坐标，并设置给容器    
 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";    
}

    Remove overlay

    When the map.removeOverlay or map.clearOverlays method is called, the API will automatically remove the DOM element returned by the initialize method.

    Showing and hiding overlays

    Custom overlays will automatically inherit the show and hide methods of Overlay, which will modify the style of the DOM element returned by the initialize method. display attribute. If the custom overlay element is more complex, you can also implement the show and hide methods yourself. 

    // 实现显示方法    
SquareOverlay.prototype.show = function(){    
 if (this._div){    
   this._div.style.display = "";    
 }    
}      
// 实现隐藏方法  
SquareOverlay.prototype.hide = function(){    
 if (this._div){    
   this._div.style.display = "none";    
 }    
}

    Customize other methods Through the prototype attribute of the constructor, you can add any custom method. For example, the following method can change the display state of the overlay every time it is called: 

    // 添加自定义方法   
SquareOverlay.prototype.toggle = function(){    
 if (this._div){    
   if (this._div.style.display == ""){    
     this.hide();    
   }    
   else {    
     this.show();    
   }    
 }    
}

    Add Overlay

    You have now finished writing a complete custom overlay that is ready to be added to the map. 

    // 初始化地图  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定义覆盖物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);
←
→