6

当社は Leaflet.js から Google Maps API に移行したばかりです。HTML/CSS マーカー/ボックスをオーバーレイとして Google Maps Javascript API v3 に統合する簡単な方法を見つけようと、高低を検索しました。

これまでのところ、このチュートリアルを見つけました: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

それにもかかわらず、私はこれが非常に扱いにくく、HTML/CSS コードをマップにうまく挿入できていません。

HTML/CSS マーカー/ボックスを Google マップに追加する簡単な方法を知っている人はいますか?

上/左の座標を部門に割り当ててマップをハックし、jQuery を使用して Google マップのマーカーにアタッチすることもできますが、これは回避策/ハックであり、これらを統合する簡単な方法が必要です。

前もって感謝します！

4

2 に答える 2

3

読者の時間を節約するために、ここにデモ目的の Web サイトを提供します。

この質問のために。OverlayView基本的に、HTML/CSS のカスタマイズされたマーカーを追加するには、外部ライブラリを使用して の サブクラスを 1 つ実装することをお勧めします。

  • OverlayViewまず、クラスを継承する理由を明確にする必要があります。
  • 次に、外部ライブラリが役立つ理由を示す必要があります。

わかった。まず、google.maps.Markerクラスが拡張されMVCObjectます。OverlayViewクラスも拡張しますMVCObject。HTML/CSS で実装されたカスタマイズされたマーカーを正常に動作させgoogle.maps.Marker、動作レベルおよびイベント通信レベル (ビジュアル レベルではなく) に類似させるには、OverlayViewクラスの拡張が安全な方法の 1 つですOverlayView。内部マップ イベント管理。この「登録」がどのように行われたかを以下で説明します。

を拡張するには、 、 のOverlayView3 つのメソッドをオーバーライドする必要があります。オーバーライドの目的は、このメソッドが. の目的は、dom 要素を再描画し、マップ キャンバスの正しい位置に表示し、マップ キャンバス上で正しいサイズにすることです。たとえば、ユーザーがマップをズームインまたはズームアウトするたびに、自分自身を再描画します。さらに、マップのタイルの準備ができたときに呼び出される、 が呼び出されたときに呼び出される、さまざまな状況がトリガーされます。これら 3 つのメソッドによってリッスンされる一連のイベントがあります。これが、私の主張では「登録」がどのように行われるかです。これは、クラスを拡張する理由も説明していますonRemove() onAdd()draw()draw()zoom_changeddraw()google.maps.Markerdraw()onAdd()onRemove()setMap()OverlayViewHTML/CSS カスタマイズ マーカーを実装する安全な方法の 1 つです。を拡張するときに自分自身をリッスンするマップ イベントを処理する必要がないためですOverlayView。それ以外の場合は、する必要があります。

具体的には、この「1つのカスタムメーカーを実装するには」という質問に対して、上記のことも行う必要があります。

あなたの質問にある「カスタムOverlayViewの例」について。1 つのマーカーのように動作させるには、何を変更する必要があるかを説明できます。

その例では。cssleftおよびはtop、width事前定義された によって決定されるためgoogle.maps.Bounds、これを変更する必要があります。次のようなコードが必要です。

    CustomMarker.prototype.draw = function(){
      var overlayProjection = this.getProjection();
      // console.log("draw" + this.latLng);
      var anchor = overlayProjection.fromLatLngToDivPixel(this.latLng);

      if (this.dom_) {
        this.dom_.style.top = (Math.round(anchor.y- this.height_)).toString()+'px';
        this.dom_.style.left = Math.round( anchor.x - this.width_ / 2).toString() + 'px';
        $(this.dom_).outerWidth(this.width_); // I need to have this jQuery method 
      }

      // generally, the dom node left-top corner should not be generated at clicking poistion, but with offsets of both left and top
    };

addDomListener()また、Google マップ API によって提供されるメソッドによって、いわゆる「dom イベント」を処理する必要があります。なぜ「いわゆる」イベントなのですか？

拡張された「OverlayView」クラスのマーカー インスタンスにアタッチされた HTML ノードを、「クリック」「ダブルクリック」などのユーザーの動作 (ここではブラウザー イベントを呼び出していません) に応答できるようにするには、開発者はノードをペインに追加する必要があります。 `overlayMouseTarget".

その理由は、実際にはペインの上に、DOM ツリーに追加されたカスタム マーカー ノードを"シャドウ"overlayMousetargetする、幅がゼロで高さがゼロ以外のマップ HTML ノードがいくつかあるためです。そのため、DOM イベント ハンドラー関数を実装したとしても、マーカーは のようなブラウザー イベントを直接受け取ることはできません。彼らは「聴覚障害者」です。onclick

したがって、カスタマイズされたマーカーをoverlayMouseTargetペイン (ノード) に追加する目的は、Google マップが、受信した最も外側のブラウザー イベントを処理するための独自のメカニズムを持っていることです。Google マップはそれらを処理し、Google マップの管理されたペインに追加されたノードに通知します (これらの 5 つのノード: floatPane mapPane markerLayer overlayLayer overlayMouseTarget)

これで、「addDomListener()」を呼び出すときに「いわゆる」イベントを呼び出す理由が理解できます。元の「クリック」ブラウザ イベントは貧弱なマーカーに到達しなかったため、代わりに、最も外側の元の「クリック」ブラウザ イベントによってトリガーされる 1 つの内部 Google マップ イベントをリッスンすることで「クリック」アクションに応答します。

ここで、2 番目のポイントに焦点を当てましょう: 「外部ライブラリが役立つ理由を示す必要があります」 元々数行の CSS コードで実行できるタスクを完了するには、さまざまな Google マップ dom リスナーを処理する必要があります。

たとえば、疑似クラスを実現するhoverには、のハンドラなどを実装mouseover mouseoutしたり、いくつかの CSS クラスの追加と削除を行ったりする必要があります。

mapcover.js などの外部ライブラリを使用すると、set("mouseover": function cb() { /*your implementations here*/}).

たくさん書いたので、ここでデモを 1 つだけ示します: http://easysublease.org/mapcoverjs/

HTML マーカーを作成する方法の詳細な実装については、こちらを参照してください。

于 2015-07-21T16:47:52.857 に答える
1

google.maps.InfoWindow( https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows ) とgoogle.maps.Marker( https://developers.google.com/maps/documentation/javascript/reference#Marker )を確認してください。グーグルマップ。ページに適用する CSS は、InfoWindow にも適用されます。

于 2012-07-26T22:06:38.980 に答える