确保 Google 地图网页版上的标记周围有内边距

发布于 2024-11-26 18:25:59 字数 2361 浏览 2 评论 0原文

我有一个全屏 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>

问题是这样的：

更新我尝试添加一个控件，如自定义控件，但地图并不完全意识到这一点 - 请参阅 < a href="https://jsfiddle.net/dandv/pn66Lfcz/" rel="nofollow noreferrer">这个小提琴从地图自定义控件示例。其中一个标记仍然被控件遮挡。

原文

I have a full screen Google map with HTML/CSS toolbars overlaid on the map, and a set of map markers.

Is there a way to ensure there is enough padding between the markers and the edges of the map, so that no markers are obscured by the toolbars?

(Codepen in case the code below doesn't work)

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>

The problem is this:

UPDATE I've tried adding a control as documented at Custom controls, but the map isn't exactly aware of it - see this fiddle forked from the Maps custom control example. One of the markers is still obscured by the control.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怀里藏娇 2024-12-03 18:26:00

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

PHP to make your map fit into your google maps canvas:

a. create a maxmin frame around your imagine wiht maxLat, minLat, maxLng and minLng from everything that you want to show.

$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. then take the diagonal (maxLat, minLng) to (minLat, maxLng) and calculate the distance using the geometry.spherical library or any algorithm you like - the earth is NOT spherical girls and boys, different models are better equiped to calculate area/distance in your region of the world (wikipedia has a great article on algorithms)

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. depending on your canvas's dimensions, set up a zoom factor array (this is mine):

$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. then create a routine that takes the distance you got in step b and check it against array:

// 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. finally, append the $zoomFactorFinal to your googlemaps URL if you are embedding or use a variation of setZoom() method on your canvas display

回复收藏 0 原文

凝望流年 2024-12-03 18:25:59

我知道已经晚了..但我发现这个搜索类似的问题，但不受控制。如果您尝试将内容从控制栏下推出，最好的方法是创建一个与覆盖的控件大小相同的空 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);

Way late I know.. but I found this searching for a similar issue, but not under controls. If you are trying to push things out from under an control bar, the best way is to create an empty div the same size as your overlaid control and place it in the same spot using the google commands so that maps is aware of it. For example I have a control bar across the top of my map that is 50px tall and I do this.

var padder = document.createElement('div');
padder.style.height = '52px';
padder.style.width = '100%';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(padder);

回复收藏 0 原文

~没有更多了~