1

我有一个全屏谷歌地图，地图上覆盖有 HTML/CSS 工具栏，还有一组地图标记。

有没有办法确保标记和地图边缘之间有足够的填充，以便工具栏不会遮挡标记？

（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>

问题是这样的：

在此处输入图像描述

更新我已经尝试添加一个控件，如自定义控件中所述，但地图并不完全了解它 - 请参阅从地图自定义控件示例分叉的这个小提琴。其中一个标记仍被控件遮挡。

4

2 回答 2

3

我知道的晚了..但我发现这个正在寻找类似的问题，但不受控制。如果您试图从控制栏下推出东西，最好的方法是创建一个与您的覆盖控件相同大小的空 div，并使用 google 命令将其放置在同一位置，以便地图知道它。例如，我在地图顶部有一个 50 像素高的控制栏，我就是这样做的。

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

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']);
}

湾。然后取对角线 (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 回答