【07】オーバーレイ（百度地図オーバーレイメモ）_html/css

【07】オーバーレイ

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

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

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

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

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

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

ポリライン: 地図上のポリラインを表します。

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

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

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

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

ラベル

ラベルは地図上の点を表します。 API にはデフォルトのアイコンスタイルが用意されており、Icon クラスを通じてカスタムアイコンを指定することもできます。マーカーのコンストラクターのパラメーターは、Point と MarkerOptions (オプション) です。注: カスタムアイコンを使用する場合、ラベルの地理座標点は、ラベル付けに使用されるアイコンの中心に配置されます。アイコンのオフセットプロパティを通じてキャリブレーション位置を変更できます。

以下の例では、マップの中心点にラベルを追加し、デフォルトのラベルスタイルを使用します。

すごいです

ラベルアイコンを定義します

var map =newBMap.Map("container");
var point =newBMap.Point(116.404,39.915);
map.centerAndZoom(ポイント, 15);
var marker =newBMap.Marker(point);//マーカーを作成します
map.addOverlay(marker);//地図にマーカーを追加します

カスタマイズされたマーカーは、アイコンクラス次の例では、アイコンは、MarkerOptions パラメーターの icon 属性によって設定されます。また、marker.setIcon() メソッドを使用することもできます。

var map =newBMap.Map("container");
var point =newBMap.Point(116.404,39.915);
map.centerAndZoom(point,15);//カスタム関数を作成します。マークを作成します
function addMarker(point,index){// アイコンオブジェクトを作成します
var myIcon =newBMap.Icon("markers.png",newBMap.Size(23,25),{
//
// マーカーが地図上に表示されると、アイコンの左上から 10 ピクセルと 25 ピクセル離れた場所を指します
// この場合、それが
/. / アイコンの中央下端の鋭角の位置
offset:newBMap.Size(10,25),
// 画像のオフセットを設定します
// 特定の部分をキャプチャする必要がある場合アイコンにラベルを付けるときは、
// このメソッドは CSS スプライトテクノロジー
imageOffset:newBMap.Size(0,0-index *25)/ に似ています。 / 画像のオフセットを設定します
});
//マーカーオブジェクトを作成して地図に追加します
var marker =newBMap.Marker(point,{icon: myIcon});
map.addOverlay(marker) ;
}
// ランダムな方向マップに 10 個のラベルを追加します
varbounds = map.getBounds();
var lngSpan =bounds.maxX -bounds.minX;
var latSpan =bounds.maxY -bounds .minY;
for(var i =0 ; i
var point =newBMap.Point(bounds.minX + lngSpan *(Math.random()*0.7+0.15),
bounds.minY + latSpan *(Math.random ()*0.7+0.15));
addMarker(point, i);
}

マークイベントのリスニング

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

marker.addEventListener("click",function(){
alert("マーカーをクリックしました");
});

ドラッグ可能な注釈

marker的enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽，您需要调用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后，您可以监听标注的dragend事件来捕获拖拽后标注的最新位置。

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

内存释放

在API 1.0版本中，如果您需要在地图中反复添加大量的标注，这可能会占用较多的内存资源。如果您的标注在移除后不再使用，可调用 Overlay.dispose()方法来释放内存。注意在1.0版本中，调用此方法后标注将不能再次添加到地图上。自1.1版本开始，您不在需要使用此方法来释放内存资源，API会自动帮助您完成此工作。

例如，您可以在标注被移除后调用此方法：

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

信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。

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

折线

ログイン後にコピー

Polyline表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。

添加折线

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。

Polyline的绘制需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML绘制折线；在其他浏览器中使用SVG或者Canvas

以下代码段会在两点之间创建6像素宽的蓝色折线：

var polyline =newBMap.Polyline([
newBMap.Point(116.399,39.910),
newBMap.Point(116.405,39.920)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);

自定义覆盖物

API自1.1版本起支持用户自定义覆盖物。

要创建自定义覆盖物，您需要做以下工作：

1.定义一个自定义覆盖物的构造函数，通过构造函数参数可以传递一些自由的变量。

2.设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。

3.实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。

4.实现draw方法。

定义构造函数并继承Overlay

首先您需要定义自定义覆盖物的构造函数，在下面的示例中我们定义一个名为SquareOverlay的构造函数，它包含中心点和边长两个参数，用来在地图上创建一个方形覆盖物。

// カスタムオーバーレイのコンストラクターを定義します
functionSquareOverlay(center, length, color){
this._center = center;
this._length = length;
this._color = color; }
// APIのBMap.Overlayを継承
SquareOverlay.prototype =newBMap.Overlay();

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

map.addOverlay呼び出し時オーバーレイ定義時にselfを追加するメソッドの場合、API はオブジェクトの初期化メソッドを呼び出してオーバーレイを初期化します。初期化プロセス中に、オーバーレイに必要な DOM 要素を作成し、マップの対応するコンテナーに追加する必要があります。

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

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

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

// 初期化メソッドを実装

SquareOverlay.prototype.initialize =function(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 要素はメソッドの戻り値として使用する必要がありますカバーの表示が呼び出されるとき、
//Hide メソッドが呼び出されるとき、またはオーバーレイが削除されるとき、API はこの要素に対して動作します。
return div;
}
オーバーレイの描画
ここまではオーバーレイを地図に追加しただけですが、正しい場所には配置していません。描画メソッドでオーバーレイの位置を設定する必要があります。マップの状態が変化するたびに (位置の移動、レベルの変更など)、API はオーバーレイの描画メソッドを呼び出してオーバーレイの位置を再計算します。地理座標は、map.pointToOverlayPixel メソッドを通じてオーバーレイの必要なピクセル座標に変換できます。

// 描画メソッドを実装します

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

}

オーバーレイの削除
map.removeOverlay メソッドまたは map.clearOverlays メソッドが呼び出されると、API は初期化メソッドによって返された DOM 要素を自動的に削除します。
オーバーレイの表示と非表示

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