确保在Google地图上添加网页标记 [英] Ensure padding around markers on Google Maps for web
问题描述
我有一个全屏谷歌地图，HTML / CSS工具栏覆盖在地图上，还有一组地图标记。有没有一种方法可以确保存在标记和地图边缘之间是否有足够的填充，以便工具栏不会遮挡标记？
（
UPDATE
strong>我尝试添加一个控件，详情请参阅自定义控件 ，但地图并没有完全意识到它 - 请参阅这个小提琴从地图自定义控件示例。其中一个标记仍然被控制遮挡。 解决方案 PHP使地图适合你的谷歌地图canvas： p>
a。创建一个maxmin框架，围绕您想要显示的任何内容的maxLat，minLat，maxLng和minLng。
$ 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库或任何你喜欢的算法计算距离 - 地球不是球形的女孩和男孩，不同的模型可以更好地计算面积/距离在你所在的地区（wikipedia有一个关于算法的伟大文章）
pre $函数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;
//英里数
$ meterConversion = 1609;
$ geopointDistance = $ dist * $ meterConversion;
返回$ 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中获取距离，并对数组进行检查：
//缩放因子建立
$ zoomFactorFinal =''; （（距离> 500）&&（$ distance< 2000000））{
include（'zoomFactor.php'）;
for（$ i = 20; $ i> 0; $ i--）{
if（！is_null（$ zoomFactor [$ i]））{
if（$ distance< （$ zoomFactor [$ i]））{
//保存到距离小于
$ 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附加到您的Google地图网址上。
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.
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
这篇关于确保在Google地图上添加网页标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
