Question

我有一个全屏Google地图，其中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>

问题在于：

更新我已尝试添加Custom controls中记录的控件，但地图并未完全了解它 - 请参阅this fiddle从{{3}分叉}}。其中一个标记仍被控件遮挡。

Answer 1

迟到我知道..但我发现这个搜索类似的问题，但不是在控制之下。如果你试图从控制栏下面推出一些东西，最好的方法是创建一个与覆盖控件相同大小的空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);

Answer 2

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;
}

℃。根据画布的尺寸，设置一个缩放因子数组（这是我的）：

$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网址

确保在Google地图上的标记周围填充网页

2 个答案: