12

Google Maps API (v3) を使用して、架空のゲーム世界用のカスタム マップ タイプを作成しました。デフォルトでは、マップは、カスタム マップ タイプであっても、水平方向に繰り返されます (下の画像を参照)。

ここに画像の説明を入力 拡大画像はこちら

マップが水平方向に繰り返されないようにすることは可能ですか? 私の地図では、それは惑星や球状の世界を表していないので、水平方向に永遠に繰り返すことはまったく意味がありません. 次のように、左右に繰り返されるマップのタイルをロードしない方法を見つけました。

ここに画像の説明を入力 拡大画像はこちら

ただし、マーカーを作成すると、繰り返されるすべてのマップにマーカーが引き続き表示されます。

ここに画像の説明を入力 拡大画像はこちら

マーカーが繰り返されないようにすることは可能ですか? または、マップがまったく繰り返されないようにすることは可能ですか? そうすれば、マーカーの繰り返しに対処する必要がなくなりますか?

回避策: マップ境界を超えたパンを 制限する ユーザーが左または右にパンできる範囲を単純に制限することについて説明しているさまざまな回避策を読みました。ユーザーがズームアウトしてマップ全体を一度に表示できるようにする必要があるため、これはうまくいきません。完全にズームアウトすると、繰り返されるマーカーがまだ表示されますが、これは受け入れられません。

マップに大量のパディングを追加することは可能ですか? こうすることで、マップ間に大きなスペースができます。

ここに画像の説明を入力 拡大画像はこちら

十分なパディングを追加できれば、パニングを制限することでうまくいきます。これは、繰り返されるマーカーがパディングによって十分に遠くに押し出され、ユーザーが決して見ることができないためです。

最後に、私のコードは非常に単純です:

(注: 私が使用しているマップ タイルの画像は、まだオンラインでは利用できません)

<!DOCTYPE html>
<html style='height: 100%'>
    <head>
        <link rel="stylesheet" type="text/css" href="normalize.css" />
        <style>
            html, body { height: 100%;}
            #map_canvas { height: 1000px;}
        </style>


    </head>
    <body style='height: 100%'>
        <div id="map_canvas"></div>

        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type='text/javascript'>

            var options =
            {
                getTileUrl: function(coord, zoom)
                {
                    // Don't load tiles for repeated maps
                    var tileRange = 1 << zoom;
                    if ( coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange )
                        return null;

                    // Load the tile for the requested coordinate
                    var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';

                    return file;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 9,
                radius: 1738000, // I got this from an example in the api, I have no idea what this does
                name: 'Map',
            };

            var mapOptions =
            {
                center: new google.maps.LatLng(0,0),
                zoom: 2,
                backgroundColor: '#000',
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            var mapType = new google.maps.ImageMapType(options);
            map.mapTypes.set('map', mapType);
            map.setMapTypeId('map');

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(0,0),
                    map: map,
                    title: "Test"
            });

            </script>
    </body>
</html>
4

4 に答える 4

4

質問への回答:マーカーが繰り返されないようにすることは可能ですか?

はい。

Google マップ JavaScript API V3 リファレンス (3.19) から、マーカーの markerOptions プロパティをfalseに最適化すると、マーカーは繰り返されず、中央の地図にのみ表示されます。

参照: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

したがって、あなたのコードでは、var マーカーをそのように変更します ( optimized: falseを追加します):

var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, title: "Test" optimized: false });

Googleのドキュメントによると（太字を追加しました）、

最適化により、多くのマーカーが単一の静的要素としてレンダリングされます。最適化されたレンダリングはデフォルトで有効になっています。アニメーション GIF または PNG の最適化されたレンダリングを無効にするか、各マーカーを個別の DOM 要素としてレンダリングする必要がある場合 (高度な使用のみ)。

最適化を false に設定し、ページを調べて、マーカーに関連付けられている ID (または少なくともクラス) を見つけました。「余分な」マーカーを非表示にするつもりでした。要素は存在しますが、id またはクラスがありません。jQuery を使用してそれらを識別する別の方法を考えていたとき、たまたま「マップ」を調べたところ、「余分な」マーカーがなくなっていることに気付きました。☺</p>

注意: Google のドキュメントに基づくと、この動作 (「余分な」マーカーが表示されない) は、意図しない「機能」であると思われます。

乾杯、ブルース。

于 2015-03-30T16:08:46.370 に答える
1

開始ズームと最小ズーム制限を変更するだけでよいようです。

ズーム レベル 1 の場合、Google でさえ繰り返しに遭遇しますが、それ以下にズームアウトすることはできません。

オプション オブジェクトに minZoom および maxZoom プロパティを追加するだけで、ズームを制限できます。

于 2012-11-07T15:51:26.373 に答える
0

繰り返し領域にマスクを貼ることができますが、私は試していません。これはあなたの問題を解決できるようです: Apply mask to Google Map。更新: マスクは、必要な場合、つまりズームが最も低い場合にのみ適用してください。ブラウザー ウィンドウのサイズを変更しても、マップ内の何かに影響するとは思いません。また、質問とは何の関係もありません。問題は、マスクがマーカーの上にある場合です。更新 2: v2 では可能ですが、v3 では可能ではないようです。v2 では、プロジェクション クラスで水平方向のコピーを無効にすることができます。

于 2012-11-07T17:31:17.800 に答える
0

まだこの問題を抱えている人は、私の解決策を見てください。

1- マップのズームを (2) に設定し、マーカーの位置 (緯度、経度) を追加します。

  var minZoomLevel = 2;
  map.setZoom(minZoomLevel);

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < result.length; i++){
        var latlng = new google.maps.LatLng(result[i].Lat, result[i].Lng);
        bounds.extend(latlng);
    });

2-ズームが変更されたときにイベントリスナーをアタッチします。つまり

google.maps.event.addListener(map, 'zoom_changed', function() {
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
    });

3-中央が変更されたリスナーを接続します（これでうまくいきました）つまり

google.maps.event.addListener(map, 'center_changed', function() 
{ 
   checkBounds(bounds);
}

 function checkBounds(allowedBounds) {
    if(allowedBounds.contains(map.getCenter())) {
        return;
    }
    var mapCenter = map.getCenter();
    var X = mapCenter.lng();
    var Y = mapCenter.lat();

    var AmaxX = allowedBounds.getNorthEast().lng();
    var AmaxY = allowedBounds.getNorthEast().lat();
    var AminX = allowedBounds.getSouthWest().lng();
    var AminY = allowedBounds.getSouthWest().lat();

    if (X < AminX) {X = AminX;}
    if (X > AmaxX) {X = AmaxX;}
    if (Y < AminY) {Y = AminY;}
    if (Y > AmaxY) {Y = AmaxY;}

    map.setCenter(new google.maps.LatLng(Y,X));
}

中心を変更するたびに、ポイントがチェックされ、マップが特定のエリアに制限されます。ズームを設定すると、ワールド タイルが 1 つだけ表示され、チェック バウンドにより水平スクロールが制限されます。

于 2016-04-19T07:26:58.567 に答える