カバー

マップ オーバーレイの概要

マップ上に重ね合わされる、または覆われるすべてのコンテンツは、総称してマップ オーバーレイと呼ばれます。注釈、ベクター グラフィック要素 (ポリライン、多角形、円を含む)、情報ウィンドウなど。オーバーレイには独自の地理座標があり、マップをドラッグまたはズームすると、それに応じて移動します。

マップ API は、次のタイプのオーバーレイを提供します:

オーバーレイ: オーバーレイの抽象基本クラス。すべてのオーバーレイは、このクラスのメソッドを継承します。

マーカー: マーカーは地図上の点を表し、マーク アイコンはカスタマイズできます。

ラベル: マップ上のテキスト ラベルを表します。ラベルのテキスト コンテンツはカスタマイズできます。

ポリライン: マップ上のポリラインを表します。

ポリゴン: マップ上のポリゴンを表します。ポリゴンは閉じたポリラインに似ていますが、塗りつぶしの色を追加することもできます。

Circle: 地図上の円を表します。

情報ウィンドウ: 情報ウィンドウは、よりリッチなテキストやマルチメディア情報を表示できる特別なオーバーレイでもあります。注: マップ上で同時に開くことができる情報ウィンドウは 1 つだけです。

map.addOverlay メソッドを使用してマップにオーバーレイを追加し、map.removeOverlay メソッドを使用してオーバーレイを削除できます。このメソッドは InfoWindow には適用されないことに注意してください。

ラベル

ラベルは地図上の点を表します。 API にはデフォルトのアイコン スタイルが用意されており、Icon クラスを通じてカスタム アイコンを指定することもできます。マーカーのコンストラクターのパラメーターは、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 を使用しています。 アイコン属性を設定するには、 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);    
}

ラベル イベントを聞く

イベント メソッドは、Map イベント メカニズムと同じです。イベントセクションを参照してください。

ドラッグ可能な注釈

マーカーのenableDraggingメソッドとdisableDraggingメソッドを使用して、マーカーのドラッグ機能をオンまたはオフにできます。デフォルトでは、マーカーはドラッグをサポートしていないため、ドラッグ機能を有効にするには、 marker.enableDragging() メソッドを呼び出す必要があります。注釈のドラッグ機能を有効にすると、注釈の drend イベントをリッスンして、ドラッグ後の注釈の最新の位置をキャプチャできます。

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

メモリ解放

API バージョン 1.0 では、多数のラベルを繰り返し追加する必要がある場合、マップは、より多くのメモリ リソースを占有する可能性があります。削除後にアノテーションが使用されなくなった場合は、Overlay.dispose() メソッドを呼び出してメモリを解放できます。バージョン 1.0 では、このメソッドを呼び出した後、ラベルはマップに再度追加されないことに注意してください。バージョン 1.1 以降、メモリ リソースを解放するためにこのメソッドを使用する必要はなくなり、API が自動的にこの作業を完了するのに役立ちます。

たとえば、注釈が削除された後にこのメソッドを呼び出すことができます:

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

情報ウィンドウ

情報ウィンドウには、地図上に HTML コンテンツが表示されます。情報ウィンドウはマップ上の任意の場所で直接開くことも、ラベル オブジェクト上で開くこともできます (この場合、情報ウィンドウの座標はラベルの座標と一致します)。 InfoWindow を使用して情報ウィンドウ インスタンスを作成できます。マップ上で同時に開くことができる情報ウィンドウは 1 つだけであることに注意してください。

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

ポリライン

ポリラインは、マップ上のポリライン オーバーレイを表します。一連の点で構成され、これらの点を接続してポリラインを形成します。

ポリラインの追加

ポリラインは、一連の直線セグメントとしてマップ上に描画されます。これらのセグメントの色、太さ、透明度はカスタマイズできます。色には 16 進数 (例: #ff0000) または色のキーワード (例: 赤) を指定できます。

ポリライン描画には、ブラウザがベクトル描画機能をサポートしている必要があります。 Internet Explorer では、マップは VML を使用してポリラインを描画します。他のブラウザでは、SVG または Canvas を使用します。

次のコード スニペットは、2 点間に 6 ピクセル幅の青色のポリラインを作成します:

カスタマイズされたオーバーレイ

API は、バージョン 1.1 以降、ユーザー定義のオーバーレイをサポートしています。

カスタム オーバーレイを作成するには、次の手順を実行する必要があります:

1. カスタム オーバーレイのコンストラクターを定義し、コンストラクター パラメーターを通じていくつかの自由変数を渡します。

2. カスタム オーバーレイ オブジェクトのプロトタイプ属性を Overlay のインスタンスに設定して、オーバーレイ基本クラスを継承できるようにします。

3. 初期化メソッドを実装します。map.addOverlay メソッドが呼び出されると、API はこのメソッドを呼び出します。

4.drawメソッドを実装します。

コンストラクターの定義と Overlay の継承

最初にカスタム オーバーレイのコンストラクターを定義する必要があります。次の例では、 SquareOverlay というコンストラクターを定義します。これには 2 つのコンストラクターが含まれます。パラメータ: 中心点と辺の長さ。マップ上に正方形のオーバーレイを作成するために使用されます。

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

カスタム オーバーレイの初期化

カスタム オーバーレイを追加するために map.addOverlay メソッドが呼び出されるとき、APIオブジェクトの初期化メソッドが呼び出され、オーバーレイを初期化します。初期化プロセス中に、オーバーレイに必要な DOM 要素を作成し、マップの対応するコンテナーに追加する必要があります。

マップには、オーバーレイ表示用のいくつかのコンテナが用意されています。これらのコンテナ要素は、map.getPanes メソッドを通じて取得できます。次のものが含まれます:

floatPane

markerMouseTarget

floatShadow

labelPane

markerPane

mapPane

これらのオブジェクトはさまざまなカバー コンテナ要素を表しており、それらの間にはオーバーレイ関係があります。最上位のレイヤーは floatPane で、情報ウィンドウのコンテンツを表示するために使用されます。アノテーションは次のとおりです。エリア レイヤー、情報ウィンドウのシャドウ レイヤー、テキスト アノテーション レイヤー、アノテーション レイヤー、ベクター グラフィックス レイヤーをクリックします。

カスタムの正方形のカバーは任意のレイヤーに追加できます。ここでは、子ノードの 1 つとして markerPane に追加することを選択します。

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);

オーバーレイの描画

これまでのところ、マップにオーバーレイを追加しただけですが、マップに配置することはできません。正しい場所です。描画メソッドでオーバーレイの位置を設定する必要があります。マップの状態が変化するたびに (位置の移動、レベルの変更など)、API はオーバーレイの描画メソッドを呼び出して、オーバーレイの位置を再計算します。地理座標は、map.pointToOverlayPixel メソッドを通じてオーバーレイの必要なピクセル座標に変換できます。

オーバーレイの削除

map.removeOverlay メソッドまたは map.clearOverlays メソッドが呼び出されると、API は、initialize メソッドによって返された DOM 要素を自動的に削除します。

オーバーレイの表示と非表示

カスタム オーバーレイは、Overlay の show メソッドと Hide メソッドを自動的に継承し、initialize メソッドによって返される DOM 要素のスタイルを変更します。表示属性。カスタム オーバーレイ要素がより複雑な場合は、show メソッドと Hide メソッドを自分で実装することもできます。

// 定义自定义覆盖物的构造函数  
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;

オーバーレイの追加

これで、マップに追加できる完全なカスタム オーバーレイの作成が完了しました。