Baidu Map は使いやすい - ポリライン、円などを追加します (html、js)_html/css_WEB-ITnose

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

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

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

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

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

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

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

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

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

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

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

1つ。ポリライン

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

ポリラインを追加

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

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

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

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 は、バージョン 1.1 以降、ユーザー定義のオーバーレイをサポートしています。

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

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

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

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

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

コンストラクターを定義して Overlay を継承する

まず、カスタム オーバーレイのコンストラクターを定義する必要があります。次の例では、中心点と辺の長さの 2 つのパラメーターを含むコンストラクターを定義します。地図上の正方形のオーバーレイ。

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

Initializing a Custom overlay

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

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

floatPane

markerMouseTarget

labelPane

markerPane

mapPane

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

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

// 实现初始化方法  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

これまでのところ、オーバーレイを地図に追加しただけで、正しい場所に配置していません。描画メソッドでオーバーレイの位置を設定する必要があります。マップの状態が変化するたびに (位置の移動、レベルの変更など)、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";    }

Add Overlay

これで、地図に追加する準備ができた完全なカスタム オーバーレイの作成が完了しました。

れーい

三。楕円を追加します

// 初始化地图  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);

効果:

読んでいただきありがとうございます!

基礎知識は http://www.cnblogs.com/0201zcr/p/4687220.html 百度地図事件

http://www.cnblogs.com/0201zcr/p/4680461.html タグを追加

http://www.cnblogs.com/0201zcr/p/4679444.html 地図サービスを追加