18

Google マップに情報ウィンドウを表示しようとしています。完璧に表示されます。マーカーにカーソルを合わせると、情報ウィンドウが読み込まれますが、マップはウィンドウに収まるようにジャンプします。地図を動かしたくはありませんが、地図に従って情報ウィンドウの位置を設定します。Booking.comにはこんなものがあります。

編集:私のコードを追加しました

これが私のコードの簡素化されたバージョンです。私はAJAXサービスからすべての情報を取得していますが、このサービスは返されますresponse(さらに多くの情報も保持しています)。

$.ajax({
    url: 'URL',
    dataType: "json",
    type: "GET",
    success: function(response) {
        // delete all markers
        clearOverlays();

        var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < response.length; i++) {
            item = response[i];

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                url: item.detail_url
            });

            markersArray.push(marker);

            // display infowindow
            google.maps.event.addListener(marker, "mouseover", (function(marker, item) {
                return function() {
                    infowindow.setOptions({
                        content: 'SOME CONTENT HERE FOR INFOWINDOW'
                    });

                    infowindow.open(map, marker);
                }
            })(marker, item));

            // remove infowindow
            google.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close();
            });

            // marker click
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });
        }
    }
});

以下に示すように、最初の画像はマーカーの下部に表示された情報ウィンドウを示し、2 番目の画像はマーカーの上に表示された情報ウィンドウを示しています。マップは移動しませんが、情報ウィンドウはマップの境界内にその位置を設定します。

マーカーの情報ウィンドウ下部 マーカーの上の情報ウィンドウ

4

2 に答える 2

43

情報ウィンドウのオプションを設定するための宣言でinfowindow.setOptions、次のオプションを追加して、情報ウィンドウが表示されているときのマップのパンを無効にしますdisableAutoPan : true。

ただし、これは、マップ上に情報ウィンドウを表示し、オプションを使用して位置を指定するために使用できる不動産を計算する必要があることも意味しpositionます。そうしないと、情報ウィンドウがマップ上に完全に表示されることが保証されません。

https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions

EDIT：画面の不動産を計算する方法

あなたの質問の一部が実際に情報ウィンドウの位置を設定することであったときに、情報ウィンドウの位置を設定するために利用可能な画面の領域を計算するという私の提案はかなり曖昧でした。そのため、画面の領域を計算して情報ウィンドウの位置を調整する方法について、回答を更新しました。

重要なのは、最初にポイントを LatLng からピクセルに変換し、マップの中心のピクセル座標に関連して、マップ上のマーカーのピクセル座標を見つけることです。次のスニペットは、これを行う方法を示しています。

getPixelFromLatLng: function (latLng) {
    var projection = this.map.getProjection();
    //refer to the google.maps.Projection object in the Maps API reference
    var point = projection.fromLatLngToPoint(latLng);
    return point;
}

ピクセル座標を取得したら、マップ キャンバスのどの象限にマーカーが現在存在しているかを調べる必要があります。これは、マーカーの X 座標と Y 座標をマップと比較することで実現されます。

quadrant += (point.y > center.y) ? "b" : "t";
quadrant += (point.x < center.x) ? "l" : "r";

ここでは、マップの中心に対する相対位置に基づいて、ポイントがマップの右下、左下、右上、または左上の象限にあるかどうかを判断しています。LatLng 値では常に同じ結果が得られるため、LatLng 値ではなくピクセルを使用するのはこのためであることに注意してください。ただし、実際には、マーカーはパンニングに応じてマップ キャンバスの任意の象限に配置される可能性があります。

マーカーがどの象限にあるかがわかったら、情報ウィンドウにオフセット値を指定して、マップ上で見えるように配置できます。次のようにします。

if (quadrant == "tr") {
    offset = new google.maps.Size(-70, 185);
} else if (quadrant == "tl") {
    offset = new google.maps.Size(70, 185);
} else if (quadrant == "br") {
    offset = new google.maps.Size(-70, 20);
} else if (quadrant == "bl") {
    offset = new google.maps.Size(70, 20);
}
//these values are subject to change based on map canvas size, infowindow size

オフセット値が決定されたらpixelOffset、メソッドを呼び出すリスナーの情報ウィンドウを調整するだけinfoWindow.open()です。これはsetOptions()、infowindows のメソッドを使用して行われます。

infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)});

上記のソリューションの実際の JSFiddle の例を次に示します。

注:情報ウィンドウの位置を示す情報ウィンドウに迷惑な「矢印」が表示されることに気付くでしょう。これは、情報ウィンドウのデフォルトの Google マップ設定の一部であり、それを取り除く適切な方法が見つかりませんでした。ここに提案がありましたが、機能させることができませんでした。別の方法として、infobox ライブラリまたはinfobubble ライブラリを使用することもできます。これにより、より多くのスタイル オプションが提供されます。

于 2013-08-23T19:23:48.623 に答える
1

Suvi Vignarajah の答えは素晴らしいです。私が気に入らなかったのは、ウィンドウの位置が端に近いことです。

期待どおりに泡が壁にくっつくように微調整しました：http://jsfiddle.net/z5NaG/5/

唯一の条件は、infoWindowのwidth&を知っている必要があるということです。それを適切に配置することができます。heightマップのピクセルから計算します。わからない場合は、InfoWindow オフスクリーンを初期化し、サイズを取得して、適切な場所で再度開くことができます。醜いがうまくいくだろう。

この関数を実行して、マップの初期化時にオーバーレイを最初に初期化します。

    ourOverlay:null,
    createOverlay:function(){
        this.ourOverlay = new google.maps.OverlayView();
        this.ourOverlay.draw = function() {};
        this.ourOverlay.setMap(this.map);
    },

次に、openイベントで次のようにオフセットを調整します。

getInfowindowOffset: function (map, marker) {
    // Settings
    var iwWidth = 240; // InfoWindow width 
    var iwHeight = 190; // InfoWindow Height
    var xOffset = 0;
    var yOffset = 0;

    // Our point of interest
    var location = this.ourOverlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 

    // Get Edges of map in pixels: Sout West corner and North East corner
    var swp = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getSouthWest()); 
    var nep = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getNorthEast()); 

    // Horizontal Adjustment
    if(location.x<iwWidth/2){
        xOffset= iwWidth/2-location.x;
    }else if(location.x>nep.x-iwWidth/2){
        xOffset = (nep.x-iwWidth/2)-location.x ;
    }

    // Vertical Adjustment
    if(location.y<iwHeight){
        yOffset = location.y + iwHeight-(location.y-nep.y);
    }

    // Return it
    return new google.maps.Size(xOffset, yOffset);

},

結果はかなり良いですが、この三角形は今では場違いに思えます。

InfoBoxを使用して、下部の先のとがった矢印を削除できます。

            GmapsManager.infowindow = new InfoBox({
            content:'',
            alignBottom: true,
            closeBoxURL: "",
        });

次のコードでバブルのスタイルを設定します。

.infobox-popup{
    background: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    margin-left: -100px;
    margin-bottom: 30px;
    width: 200px;
    -webkit-box-shadow: 0 0 1px 0 #595959;
    box-shadow: 0 0 1px 0 #595959;
}
于 2014-02-04T21:51:06.827 に答える