调整窗口大小时将谷歌地图标记保留在屏幕上

Question

我有一个包含多个标记的地图的网页，我希望我能找到一种方法，在调整窗口大小或在不同视口查看时将所有这些标记保留在屏幕上。

我已经尝试了我为此找到的不同解决方案，但它导致以各种方式破坏代码。

这是我的代码：

function draw_map($id, $mark, $lat, $long, $zoom, $width, $height, $control, $map_type, $geo_codes) {
#intialize output
$output = '';
#put together array
// print_r($geo_codes);exit;
$output .= "    
<div id='truckmap' ></div>
<script>
function initMap() {
var myLatLng = {lat: ".$lat.", lng: ".$long."};
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('truckmap'), {
center: myLatLng,
scrollwheel: false,
zoom: ".$zoom."
}); ";
foreach ($geo_codes as $key => $stop) {
$output .= "
var infowindow = new google.maps.InfoWindow({
content: '".$stop['text']."'
});
var marker = new google.maps.Marker({
map: map,
position: {lat: ".$stop['latitude'].", lng: ".$stop['longitude']."},
title: '".$stop['opts']['title']."'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});";
}
$output .= "}</script><script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCmXYC5YlrqIQXuJwfYe2xiyZjswOKxsZE&callback=initMap' async defer></script>  ";
#return output
return $output;
} #end function

我对javascript和PHP的了解有限，所以我可以使用我能得到的所有帮助！

Answer 1

您需要在窗口中添加一个事件侦听器，以便在窗口调整大小时添加。您是否尝试过此处提供的解决方案？

我已经稍微简化了他们的小提琴，以帮助您找出使地图正常工作所需的基本要素。你可以在这里找到它。

代码片段：

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
thirdB = new google.maps.LatLng(38.9382571,-99.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
bounds.extend(thirdB);
geocoder = new google.maps.Geocoder();
var mapOptions = {
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(bounds);

var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',     
}); 
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
}); 
var tmarker = new google.maps.Marker({
position: thirdB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});

我建议稍微重新处理您的地图，以便使用标记的边界对其进行初始化，而不是在函数中传递缩放和中心。我想如果您有多个地图或需要添加标记，那么这将是一个比计算要传入的缩放更好的解决方案。您也可以在选项中省略latlng，因为fitBounds方法无论如何都会计算出中心的位置。

您需要为每个制作者创建更多变量，例如 firstB、secondB，并扩展边界对象以包含每个变量。您可以在 initMap 函数的开头使用类似的 foreach 函数添加所有这些内容。

更新：试试这个，它应该适合你：

function draw_map($id, $mark, $lat, $long, $zoom, $width, $height, $control, $map_type, $geo_codes) {
$i = 1;
$output = '';
$output .= "    
<div id='truckmap' ></div>
<script>
function initMap() {
var bounds = new google.maps.LatLngBounds();
var myLatLng = {lat: ".$lat.", lng: ".$long."};
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('truckmap'), {
center: myLatLng,
scrollwheel: false,
zoom: ".$zoom."
}); ";
foreach ($geo_codes as $key => $stop) {
$output .= "
var marker".$i." = new google.maps.LatLng(".$stop['latitude'].",".$stop['longitude'].");
bounds.extend(marker".$i.");
var infowindow".$i." = new google.maps.InfoWindow({
content: '".$stop['text']."'
});
var marker".$i." = new google.maps.Marker({
map: map,
position: {lat: ".$stop['latitude'].", lng: ".$stop['longitude']."},
title: '".$stop['opts']['title']."'
});
marker".$i.".addListener('click', function() {
infowindow".$i.".open(map, marker".$i.");
});";
$i++;   
}
$output .= "map.fitBounds(bounds); google.maps.event.addDomListener(window, 'resize', function() {
google.maps.event.trigger(map, 'resize');
map.fitBounds(bounds);
});}</script><script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCmXYC5YlrqIQXuJwfYe2xiyZjswOKxsZE&callback=initMap' async defer></script>  ";
#return output
return $output;
} #end function