Baidu Map API - カスタム オーバーレイへのイベント メソッドの追加_PHP チュートリアル

この記事では、Baidu Maps のアプリケーションを簡単に紹介します。ここでは、設定したレイヤーにイベント メソッドを追加する機能を紹介します。必要に応じて参照してください。

マーカー、ラベル、サークルなどのオーバーレイにイベントを追加するのは非常に簡単です。単に addEventListener を直接追加するだけです。では、カスタム オーバーレイ イベントを追加するにはどうすればよいでしょうか?見てみましょう~

-------------------------------------- ---------------------------------------------------- ----1. 定義 関数の構築と Overlay

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

SquareOverlay.prototype = new BMap.Overlay(); の継承 2. カスタム オーバーレイの初期化

代码如下

复制代码

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

3. オーバーレイの描画

代码如下	复制代码
// 实现绘制方法 <br>SquareOverlay.prototype.draw = function(){ <br>// 根据地理坐标转换为像素坐标，并设置给容器 <br> var position = this._map.pointToOverlayPixel(this._center);<br> this._div.style.left = position.x - this._length / 2 + "px"; <br> this._div.style.top = position.y - this._length / 2 + "px"; <br>}

4. オーバーレイの追加

代码如下	复制代码
//添加自定义覆盖物 <br>var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); <br>map.addOverlay(mySquare);

5.カスタム オーバーレイ 1. 表示イベント

代码如下	复制代码
SquareOverlay.prototype.show = function(){ <br> if (this._div){ <br> this._div.style.display = ""; <br> } <br>}

上記の表示オーバーレイ イベントを追加した後、オーバーレイを表示するには次の文のみが必要です。

代码如下	复制代码
mySquare.show();

2. オーバーレイを非表示にする

// 实现隐藏方法  <br>

代码如下	复制代码
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }

添加完以上code，只需使用这句话，即可隐藏覆盖物。rreee3. オーバーレイの色を変更する

mySquare.hide();

上記の文は、次のステートメントを使用して有効にします。概要: マップ上に赤いオーバーレイを追加し、「表示、非表示、色の変更」のイベントをそれぞれ追加しました。概略図は次のとおりです: したがって、最初に HTML でマップ コンテナーと 3 つのボタンを記述する必要があります。

次に、JavaScript で次の 3 つの関数を追加します:

mySquare.yellow();

代码如下	复制代码
SquareOverlay.prototype.yellow = function(){ <br> if (this._div){ <br> this._div.style.background = "yellow"; <br> } <br>}

6. カスタム オーバーレイにクリック イベントを追加する方法
(この章は重要です! 多くの人から質問されます) たとえば、Customize を指定します。オーバーレイのクリックイベント。まず、addEventListener イベントを追加する必要があります。次のように: rrree 次に、関数内に click などのパラメータを記述します。これは、Baidu Map API のオーバーレイ イベントと同じです。

代码如下	复制代码
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div><br><p><br> <input type="button" value="移除覆盖物" onclick="mySquare.hide();" /><br> <input type="button" value="显示覆盖物" onclick="mySquare.show();" /><br> <input type="button" value="变成黄色" onclick="mySquare.yellow();" /><br></p>

同様に、addEventListener を追加した後、mouseover などの他のマウス イベントを追加することもできます。

代码如下	复制代码
// 实现显示方法 SquareOverlay.prototype.show = function(){ <br> if (this._div){ <br> this._div.style.display = ""; <br> } <br>} // 实现隐藏方法 <br>SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } } //改变颜色的方法 SquareOverlay.prototype.yellow = function(){ <br> if (this._div){ <br> this._div.style.background = "yellow"; <br> } <br>}

すべてのソース コードカスタム オーバーレイ

代码如下	复制代码
SquareOverlay.prototype.addEventListener = function(event,fun){<br> this._div['on'+event] = fun;<br>} API FAQ の概要投稿:

http://tieba.baidu.com/p/1147019448
http://www.bkjia.com/PHPjc/444736.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/444736.html技術記事この記事では、Baidu Maps のアプリケーションを簡単に紹介します。ここでは、指定したレイヤーにイベント メソッドを追加する機能を紹介します。必要に応じて参照してください。 マーカーに...