32

を呼び出した後にマップビューにパディングを追加できるようにしたいmap.fitBounds()ので、マップコントロールや、開いたときにマーカーを覆うスライドパネルなどに関係なく、すべてのマーカーを表示できます。Leaftlet には fitBoundsにパディングを追加するオプションがありますが、Google Maps にはありません。

最北端のマーカーがビューポートの上に部分的に隠れることがあります。最西端のマーカーは、多くの場合、ズーム スライダーの下にあります。API 2 では、マップ ビューポートから特定のパディングを減らすことで仮想ビューポートを形成し、showBounds()その仮想ビューポートに基づいてズームとセンタリングを計算して実行するメソッドを呼び出すことができました。

map.showBounds(bounds, {top:30,right:10,left:50});

API 2 の実際の例は、showBounds() の例のリンクの下にあります。

API V3 で同様の機能を見つけることはできませんが、これを実現できる別の方法があることを願っています。たぶん、北東と南西のポイントを取得し、それらを含めた後に境界をさらに拡張するために偽の座標を追加できますか?

アップデート

(以下のコードが機能しない場合はCodepen )

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    draggable: true,
    streetViewControl: false,
    zoomControl: false
  });

  var marker1 = new google.maps.Marker({
    position: {lat: 37, lng: -121},
    map: map,
  });

  var marker2 = new google.maps.Marker({
    position: {lat: 39.3, lng: -122},
    map: map,
  });
 
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.position);
  bounds.extend(marker2.position);
  map.fitBounds(bounds);
}
#map {
  height: 640px;
  width: 360px;
}
#overlays {
  position: absolute;
  height: 50px;
  width: 340px;
  background: white;
  margin: -80px 10px;
  text-align: center;
  line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>

  </head>
  <body>
    <div id="map"></div>
    <div id="overlays">Controls / Order pizza / ETA / etc.</div>
  
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html>

問題はこれです：

ここに画像の説明を入力

カスタム コントロールに記載されているようにコントロールを追加しようとしましたが、マップはそれを正確に認識していません。マップ カスタム コントロールの例からフォークされたこのフィドルを参照してください。マーカーの 1 つは、コントロールによってまだ隠されています。

4

8 に答える 8

25

これは一種のハック的な解決策ですが、 の後、fitBounds1 レベル縮小して、マーカーに十分なパディングを取得できます。

map変数がマップ オブジェクトへの参照であると仮定します。

map.setZoom(map.getZoom() - 1);
于 2012-04-26T19:34:16.687 に答える
10

この問題を解決するには、マップの境界を拡張して、マーカーを十分に表示する緯度経度を含めました。

まず、オーバーレイ ビューを作成する必要があります

var overlayHelper = new google.maps.OverlayView();
overlayHelper.onAdd = function() {};
overlayHelper.onRemove = function() {};
overlayHelper.draw = function() {};
overlayHelper.setMap(map);

オーバーレイ ヘルパーを取得したら、地図投影法を取得し、それに基づいて計算を実行する必要があります。

マップ上にあるコントロールは、マップの右端にある幅 420 ピクセル、高さ 100% の div であることに注意してください。コントロールに合わせてコードを変更する必要があることは明らかです。

var mapCanvas = $("#map_canvas"),
    controlLeft = mapCanvas.width() - 420, // canvas width minus width of the overlayed control
    projection = overlayHelper.getProjection(),
    widestPoint = 0, 
    latlng, 
    point;

// the markers were created elsewhere and already extended the bounds on creation
map.fitBounds(mapBounds);

// check if any markers are hidden behind the overlayed control
for (var m in markers) {
    point = projection.fromLatLngToContainerPixel(markers[m].getPosition());
    if (point.x > controlLeft && point.x > widestPoint) {
        widestPoint = point.x;
    }
}

if (widestPoint > 0) {
    point = new google.maps.Point(
                mapCanvas.width() + (widestPoint - controlLeft), 
                mapCanvas.height() / 2); // middle of map height, since we only want to reposition bounds to the left and not up and down

    latlng = projection.fromContainerPixelToLatLng(point);
    mapBounds.extend(latlng);
    map.fitBounds(mapBounds);
}

マップを初めてロードするときにこれを行う場合は、これをマップ イベントでラップして、アイドル状態になるまで待機する必要があります。これにより、オーバーレイ ビューを初期化できます。イベント コールバック内にオーバーレイ ヘルパーの作成を含めないでください。

google.maps.event.addListenerOnce(map, 'idle', function() { <above code> });
于 2012-12-29T09:22:42.550 に答える
9

map.fitBounds()で述べたのと同じパディング構文で API V3 を使用できますmap.showBounds()。

単に使用するだけmap.fitBounds(bounds, {top:30,right:10,left:50});でうまくいきました。

(これは xomena または Roman86 の投稿へのコメントかもしれません。コメントするほどの評判はありません)

于 2018-11-30T21:58:42.337 に答える
-1

これを行う別の方法は、計算された距離離れた追加の LatLong ポイントで境界を拡張することです。google.maps.LatLngBounds() オブジェクトには、バウンディング ボックスの SouthWest と NorthEast のポイントを取得する関数があり、これを使用して北、南、東、または西 X マイルの距離を計算できます。

たとえば、マップの左側にあるオーバーレイ要素を考慮してマーカーを右側に移動しようとしていた場合は、次のことを試してください。

// create your LatLngBounds object, like you're already probably doing
var bounds = new google.maps.LatLngBounds();

// for each marker call bounds.extend(pos) to extend the base boundaries

// once your loop is complete
// *** add a calculated LatLng point to the west of your boundary ***
bounds.extend(new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng() - .9));

// finally, center your map on the modified boundaries
map.fitBounds(bounds);

上記の例では、最西端のポイントの経度から .9 を差し引いて境界に LatLong ポイントを追加すると、境界がさらに西に約 52 マイル移動します。

ポイント全体 (pos.lng() - 1.0) は約 58 マイルなので、適切な距離を推測するか、他の方法を使用して縦方向のオフセットを計算し、必要なパディングの種類を判断することができます。

于 2016-09-22T17:03:43.083 に答える