피복
지도 오버레이 개요
지도 위에 겹쳐지거나 겹쳐지는 모든 콘텐츠를 통칭하여 지도 오버레이라고 합니다. 주석, 벡터 그래픽 요소(폴리라인, 폴리곤 및 원 포함), 정보 창 등. 오버레이에는 고유한 지리적 좌표가 있으며 지도를 드래그하거나 확대/축소하면 그에 따라 이동됩니다.
The map API는 다음 오버레이를 제공합니다:
Overlay: 오버레이의 추상 기본 클래스, 모든 오버레이는 이 클래스 메서드를 상속합니다.
Marker: 마커는 지도의 한 지점을 나타내며, 마크 아이콘은 사용자 정의할 수 있습니다.
Label: 지도의 텍스트 라벨을 나타냅니다. 라벨의 텍스트 내용을 맞춤설정할 수 있습니다.
Polyline: 지도의 폴리라인을 나타냅니다.
Polygon: 지도상의 다각형을 나타냅니다. 다각형은 닫힌 폴리선과 유사하지만 채우기 색상을 추가할 수도 있습니다.
Circle: 지도에서 원을 나타냅니다.
InfoWindow: 정보 창은 더욱 풍부한 텍스트 및 멀티미디어 정보를 표시할 수 있는 특수 오버레이이기도 합니다. 참고: 지도에서는 동시에 하나의 정보 창만 열 수 있습니다.
map.addOverlay 메소드를 사용하여 지도에 오버레이를 추가할 수 있으며, map.removeOverlay 메소드를 사용하여 오버레이를 제거할 수 있습니다. 이 메소드는 InfoWindow에는 적용되지 않습니다.
Label
Label은 지도의 한 지점을 나타냅니다. API는 기본 아이콘 스타일을 제공하며 Icon 클래스를 통해 사용자 정의 아이콘을 지정할 수도 있습니다. Marker 생성자의 매개변수는 Point 및 MarkerOptions(선택 사항)입니다. 참고: 사용자 정의 아이콘을 사용하는 경우 레이블의 지리적 좌표 지점은 레이블 지정에 사용되는 아이콘의 중앙에 위치하게 됩니다. 아이콘의 오프셋 속성을 통해 보정 위치를 수정할 수 있습니다.
아래 예에서는 지도의 중심점에 라벨을 추가하고 기본 라벨 스타일을 사용합니다.
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); // 将标注添加到地图中레이블 아이콘 정의
Icon 클래스를 통해 사용자 정의 가능 마커의 아이콘을 정의합니다. 다음 예에서는 MarkerOptions 매개변수의 icon 속성을 통해 설정합니다. marker.setIcon() 메서드를 사용할 수도 있습니다.
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);
}주석 이벤트 듣기
이벤트 방법 및 지도 이벤트 메커니즘은 동일합니다. 이벤트 항목을 참고해주세요.
marker.addEventListener("click", function(){
alert("您点击了标注"); });marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})예를 들어 콜아웃이 제거된 후 이 메서드를 호출할 수 있습니다.
map.removeOverlay(marker); marker.dispose(); // 1.1 版本不需要这样调用#🎜 🎜 #정보창
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
Polyline폴리라인 추가
폴리라인은 일련의 직선 세그먼트로 지도에 그려집니다. 이러한 세그먼트의 색상, 두께 및 투명도를 사용자 정의할 수 있습니다. 색상은 16진수(예: #ff0000) 또는 색상 키워드(예: 빨간색)일 수 있습니다.
폴리라인을 그리려면 브라우저에서 벡터 그리기 기능을 지원해야 합니다. Internet Explorer에서는 지도가 VML을 사용하여 다른 브라우저에서 SVG 또는 Canvas를 사용합니다.
맞춤형 오버레이
API는 버전 1.1부터 사용자 정의 오버레이를 지원합니다.
사용자 정의 오버레이를 생성하려면 다음을 수행해야 합니다.
1. 사용자 정의 오버레이의 생성자를 정의하고 생성자 매개변수를 통해 일부 자유 변수를 전달합니다.
2. 오버레이 기본 클래스를 상속할 수 있도록 사용자 정의 오버레이 객체의 프로토타입 속성을 오버레이 인스턴스로 설정합니다.
3. 초기화 메서드를 구현합니다. map.addOverlay 메서드가 호출되면 API가 이 메서드를 호출합니다.
4. 그리기 방법을 구현합니다.
생성자 정의 및 오버레이 상속
먼저 사용자 정의 오버레이의 생성자를 정의해야 합니다. 다음 예에서는 중심점과 측면 길이라는 두 가지 매개변수를 포함하는 SquareOverlay라는 생성자를 정의합니다. 지도에 정사각형 오버레이가 표시됩니다.
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);맞춤 오버레이 초기화
맞춤 오버레이를 추가하기 위해 map.addOverlay 메소드가 호출되면 API는 초기화 프로세스 중에 객체의 초기화 메소드를 호출합니다. 오버레이를 생성해야 합니다. 객체에 필요한 DOM 요소가 지도의 해당 컨테이너에 추가됩니다.
지도는 다음과 같은 컨테이너 요소를 통해 오버레이 표시를 제공합니다.
floatPane
floatShadow
labelPane
markerPane
mapPane
이러한 개체는 서로 다른 표지 컨테이너 요소를 나타내며 이들 사이에는 오버레이 관계가 있습니다. 최상위 레이어는 정보 창의 내용을 표시하는 데 사용됩니다. 영역 레이어 및 정보 창 그림자 레이어, 텍스트 주석 레이어, 주석 레이어 및 벡터 그래픽 레이어.사용자 정의 사각형 커버는 모든 레이어에 추가할 수 있습니다. 여기서는 markerPane에 하위 노드 중 하나로 추가하도록 선택합니다.
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, length, color){
this._center = center;
this._length = length;
this._color = color;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();// 实现初始化方法
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;오버레이 제거
map.removeOverlay 또는 map.clearOverlays 메소드가 호출되면 API는 초기화 메소드에서 반환된 DOM 요소를 자동으로 제거합니다.
오버레이 표시 및 숨기기
사용자 정의 오버레이는 Overlay의 표시 및 숨기기 메소드를 자동으로 상속하며, 이는 초기화 메소드에서 반환된 DOM 요소의 style.display 속성을 수정합니다. 사용자 정의 오버레이 요소가 더 복잡한 경우 표시 및 숨기기 메소드를 직접 구현할 수도 있습니다.
// 实现绘制方法
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";
}다른 방법 맞춤설정 생성자의 프로토타입 속성을 통해 사용자 정의 메소드를 추가할 수 있습니다. 예를 들어 다음 메소드는 호출될 때마다 오버레이의 표시 상태를 변경할 수 있습니다.
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = "";
}
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function(){
if (this._div){
this._div.style.display = "none";
}
}Add overlay
이제 완료되었습니다. 완전한 맞춤형 오버레이를 작성하고 지도에 추가할 수 있습니다.
// 添加自定义方法
SquareOverlay.prototype.toggle = function(){
if (this._div){
if (this._div.style.display == ""){
this.hide();
}
else {
this.show();
}
}
}
