1

マップ上に HTML/CSS ツールバーがオーバーレイされたフルスクリーンの Google マップと、一連のマップ マーカーがあります。

ツールバーによってマーカーが隠れないように、マーカーとマップの端の間に十分なパディングがあることを確認する方法はありますか?

(以下のコードが機能しない場合は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>

問題はこれです：

ここに画像の説明を入力

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

4

2 に答える 2

3

かなり遅れて知っています..しかし、これは同様の問題を探していましたが、管理下にありませんでした。コントロール バーの下から物を押し出そうとしている場合、最適な方法は、オーバーレイされたコントロールと同じサイズの空の div を作成し、Google コマンドを使用して同じ場所に配置して、マップが認識できるようにすることです。たとえば、マップの上部に高さ 50px のコントロール バーがあり、これを行います。

var padder = document.createElement('div');
padder.style.height = '52px';
padder.style.width = '100%';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);
于 2012-03-15T00:07:42.087 に答える
1

マップを Google マップ キャンバスに適合させるための PHP:

を。表示したいものすべてから、maxLat、minLat、maxLng、および minLng を使用して、想像の周りに maxmin フレームを作成します。 

$queryMaxMin = 'SELECT max(Nr_Coordinate_Latitude) AS maxLat, min(Nr_Coordinate_Latitude) AS minLat, max(Nr_Coordinate_Longitude) AS maxLng, min(Nr_Coordinate_Longitude) AS minLng FROM coordinate ';
$resultMaxMin = mysql_query($queryMaxMin);
if (count($resultMaxMin) > 0) {
    $rowMaxMin = mysql_fetch_array($resultMaxMin);
    include ('distanceGeoPoints.php');
    $distance = distanceGeoPoints($rowMaxMin['maxLat'], $rowMaxMin['maxLng'], $rowMaxMin['minLat'], $rowMaxMin['minLng']);
}

b. 次に、対角線 (maxLat, minLng) を (minLat, maxLng) に取り、geometry.spherical ライブラリまたは任意のアルゴリズムを使用して距離を計算します - 地球は球形の女の子と男の子ではありません。異なるモデルの方が面積/距離を計算するのに適しています世界のあなたの地域で（ウィキペディアにはアルゴリズムに関する素晴らしい記事があります）

function distanceGeoPoints ($lat1, $lng1, $lat2, $lng2) {
$earthRadius = 3958.75;
$dLat = deg2rad($lat2-$lat1);
$dLng = deg2rad($lng2-$lng1);
$a = sin($dLat/2) * sin($dLat/2) +
   cos(deg2rad($lat1)) * cos(deg2rad($lat2)) *
   sin($dLng/2) * sin($dLng/2);
$c = 2 * atan2(sqrt($a), sqrt(1-$a));
$dist = $earthRadius * $c;
// from miles
$meterConversion = 1609;
$geopointDistance = $dist * $meterConversion;
return $geopointDistance;
}

c. キャンバスの寸法に応じて、ズーム ファクター配列を設定します (これは私のものです)。

$zoomFactor[0] = null;
$zoomFactor[1] = null;
$zoomFactor[2] = null;
$zoomFactor[3] = null;
$zoomFactor[4] = null;
$zoomFactor[5] = 2000000;
$zoomFactor[6] = 1000000;
$zoomFactor[7] = 500000;
$zoomFactor[8] = 250000;
$zoomFactor[9] = 120000;
$zoomFactor[10] = 60000;
$zoomFactor[11] = 30000;
$zoomFactor[12] = 15000;
$zoomFactor[13] = 7500;
$zoomFactor[14] = 3500;
$zoomFactor[15] = 2000;
$zoomFactor[16] = 1100;
$zoomFactor[17] = 500;
$zoomFactor[18] = null;
$zoomFactor[19] = null;
$zoomFactor[20] = null;

d. 次に、ステップ b で取得した距離を取得し、配列に対してチェックするルーチンを作成します。

// zoom factor establish
$zoomFactorFinal = '';
if (($distance > 500) && ($distance < 2000000))  {
    include ('zoomFactor.php');
    for ($i=20;$i>0;$i--) {
        if (!is_null($zoomFactor[$i])) {
            if ($distance < ($zoomFactor[$i])) {
                // save until distance is smaller than
                $zoomFactorFinal .= '&z='.$i;
                $zoomInt = $i;
                $i = 0;
                //echo 'SUCESSO '.$zoomFactorFinal;
            } 
        }
    }
} else {
    if ($distance <= 500)  {
        $zoomFactorFinal .= '&z=16';
        $zoomInt = 16;
    }
    if ($distance >= 2000000)  {
        $zoomFactorFinal .= '&z=2';
        $zoomInt = 2;
    }
}

f. 最後に、キャンバス表示に setZoom() メソッドを埋め込むか、バリエーションを使用する場合は、$zoomFactorFinal を googlemaps URL に追加します。

于 2012-02-27T22:11:32.093 に答える