4

次の Google マップ テスト アプリがあります: http://dev.driz.co.uk/googlemap/

ご覧のとおり、地理位置情報を使用してマップ上に (ユーザーの) 位置を表示し、JSON データを使用してマップに他のマーカーを設定します。

注: 世界のどこにいるかによっては、ピンが表示されない場合があります (ハダースフィールド近くの英国にあります)。ズームアウトするとピンが表示されるはずです。

次の問題があります。

1.) すべてのマーカーが同じタイトルを持っているので、ページの下部にある for ループのどこかで間違いを犯したと思います...しかし、何がわかりませんか?

以下の回答で修正されました。

2.)マーカーには、Z インデックスが原因で、また一部のマーカーが同じ座標を持っているために、さまざまなオーバーラップの問題があります。マーカーが重複しないようにループごとに数ピクセルずつオフセットし、ループごとに z-index が自動的に増加して前のマーカーよりも高くなるようにすることは可能ですか?

ユーザーがマーカーをホバーすると、マーカーが上にくるように z-index が高くなるようにする必要があります...それが理にかなっている場合は? したがって、ホバーイベントでは、最新のオフセットを取得し、それに追加して最高にする必要があります! しかし、ホバー時にマーカーの zindex を変更するにはどうすればよいですか?

3.) 最後の (そしておそらく最も難しい) ことは、マップを移動したときにマーカーの右側にツールチップを移動すると、ツールチップが均等に配置されないことです。これを改善するためのアイデアはありますか？それらは JSON ベースのマーカーでさらに悪化し、マップから外れてしまいます。

誰でもこれらの問題で私を助けることができますか?

ありがとう

4

1 に答える 1

3

これが機能するかどうかはわかりませんが、私が共有したそのリンクのパターンに従って、おそらくこのようなものになります。

    function doToolTip(item) {
        return function () {                        
                        mTooltip = new Tooltip('<span class="name">' + item.User.Profile.firstname + ' asked:</span> <span class="title">' + item.Post.title + '</span>');                  
                        mTooltip.open(this.getMap(), this); 
                    };
        }

...そしてこれがあなたのメインコードです。ループの範囲外で初期化する「アイテムが必要」だと思います（しかし、私は間違っている可能性があります）

    //other code etc...

var item;
    for (var i = 0; i < data.length; i++) {
        item = data[i];
        //other code etc....
        google.maps.event.addListener(marker, 'mouseover', doToolTip(item));
        //other code etc...
}

わかった。コードのローカルコピーを持っていないので、ここで推測していますが、描画機能を実行するときにz-indexを変更する必要があるようです...

    //code fragment...
    // need to force redraw otherwise it will decide to draw after we show the Tooltip                      
    $(this).css('z-index', 9999);
    this.draw();
// show tooltip

ツールチップの位置については、マーカーから位置を計算しているように見えるので、描画機能を試してみる必要があります。グーグルマップの座標からではなく、ページ上の実際の位置から位置を計算する方が良いかもしれません-犯人は次のとおりです：

    pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
                // top offset
                top = pos.y - this.getAnchorHeight() / 2 - this.wdiv.outerHeight() / 2;
                // left offset
                if (this.getMap().getCenter().lng() > this.get('position').lng()) {
                    left = pos.x + this.wdiv.outerWidth();
                } else {
                    left = pos.x - this.wdiv.outerWidth();
                }
                // window position
                this.wdiv.css('top', top);
                this.wdiv.css('left', left);

ポジショニングが常にオフになっている場合は、上部と左側の値に修正を適用するだけで済みます。より複雑な場合は、アルゴリズムを変更する必要があります。

于 2012-09-14T15:49:25.853 に答える