1

fitBounds（）メソッドを使用してマップの境界をマーカー自体に合わせた後、カスタムマーカーをマップに表示しようとしています。

これを行うには、マーカー配列をループしてから、マップの境界を拡張してマーカー座標を組み込みます。

これは、ストックのグーグルマップマーカーでうまく機能します。ただし、私のクライアントは、サイトに非常に大きな（36px x 57px）マーカー画像を使用したいと考えています。マップの境界をフィッティングするときにこれをどのように補正しますか？

カスタムマーカー画像を使用する場合、現時点では、すべてが境界セット内に収まるわけではありません。

4

2 に答える 2

3

すでに境界を計算しているので、境界を拡張して、大きな画像を含めるのに十分なバッファ領域を追加する必要がある場合があります。この方法で境界を計算または拡張するために使用できる式は、凸包と呼ばれます。計算幾何学アルゴリズムライブラリには、2D凸包アルゴリズムに関するセクションがあるか、ページの下部近くに気の利いたオンライン例を含むJavaScriptQuickhull記事があります。これがお役に立てば幸いです-

于 2012-05-20T19:07:17.713 に答える
1

安価な答えは、fitBounds（）の後に常に1レベルズームアウトすることです。しかし、もう少しうまくやることができます。

私はハックを書くのが好きです。ここでは、マーカーのサイズが36x57より大きくなることはないと想定しています。しばらく前にテストしたところfitBounds()、エッジと最も近いマーカー（モバイルではない可能性があります）の間に約42 pxのマージンが残っていることがわかりました。また、マーカーの位置を変更していない、つまり常に表示されると想定しています。指定された座標位置の上。アイコンが反対側に流れている場合は、調整が必要です。

私のハックは、LatLngのピクセル位置を測定する関数を利用しています（コンテナーバージョンを使用して、divバージョンは境界の変更では信頼できないことをここで読みました）。

アイコンの高さと一番上のマーカーの位置がわかっているので、画面外にあると判断された場合は、地図を少し南にパンできます。下に十分なマージンがない場合、唯一のオプションはズームアウトすることです。私の唯一の懸念は、fitBoundsとカスタムのパン/ズームの2つのイベントが必要になるため、ぎくしゃくすることです。その場合の唯一の答えは、カスタムのfitBoundsを書き直すことです。手動でテストしたところ、イベントはスムーズに実行されました。

http://jsfiddle.net/sZJjY/

クリックして猫のアイコンを追加し、右クリックしてサイズ変更/パンをトリガーします。

例：3〜4匹の子猫を配置し、右クリックしてから、意図的に上から外れる別の子猫を配置し、もう一度右クリックします。

  function fitIcons() {
    var left = 180.0;
    var right = -180.0;
    var top = -90.0;
    var bottom = 90.0;

    for (var i = 0; i < markers.length; i++) {
      curlat = markers[i].getPosition().lat();
      curlng = markers[i].getPosition().lng();
      if(curlat > top)    { top = curlat; }
      if(curlat < bottom) { bottom = curlat; }
      if(curlng > right)  { right = curlng; }
      if(curlng < left)   { left = curlng; }
    }

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

    map.fitBounds(new google.maps.LatLngBounds(
      new google.maps.LatLng(bottom, left),
      new google.maps.LatLng(top, right)));

    topPixels = overlay.getProjection().fromLatLngToContainerPixel(
                  new google.maps.LatLng(top, right));

    bottomPixels = overlay.getProjection().fromLatLngToContainerPixel(
                  new google.maps.LatLng(bottom, left));

    topGap = topPixels.y;
    bottomGap = $("#map_canvas").height() - bottomPixels.y;

    if(topGap < iconHeight) {
      if(bottomGap > iconHeight) {
        map.panBy(0, topGap);
      }
      else {
        map.setZoom(map.getZoom() - 1);
      }
    }
  }
于 2012-05-20T19:49:18.887 に答える