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

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

我已经尝试了我找到的不同的解决方案，但是它以不同的方式破坏了代码

这是我的密码：

    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

函数绘制地图（$id、$mark、$lat、$long、$zoom、$width、$height、$control、$map\u type、$geo\u code）{
#初始化输出
$output=''；
#组合阵列
//打印（$geo_代码）；退出；
$output.=”
函数initMap（）{
var myLatLng={lat:.$lat.”，lng:.$long.}；
//创建贴图对象并指定要显示的DOM元素。
var map=new google.maps.map（document.getElementById（'truckmap'）{
中心：myLatLng，
滚轮：错误，
缩放：“.$zoom。”
}); ";
foreach（$geo_代码为$key=>$stop）{
$output.=”
var infowindow=new google.maps.infowindow({
内容：““$stop['text']””
});
var marker=new google.maps.marker({
地图：地图，
位置：{lat:'.$stop['纬度].]，lng:'.$stop['经度].}，
标题：“$stop['opts']['title']”
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});";
}
$output.=“}”；
#返回输出
返回$output；
}#结束函数

---

我对javascript和PHP的知识有限，因此我可以利用我能得到的所有帮助

当窗口调整大小时，需要在中添加事件侦听器。您尝试过所提出的解决方案吗

我已经把他们的小提琴简化了一点，以帮助你计算出让地图正常工作所需的基本要素

代码段：

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，并扩展bounds对象以包含它们中的每一个。您可以在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

函数绘制地图（$id、$mark、$lat、$long、$zoom、$width、$height、$control、$map\u type、$geo\u code）{
$i=1；
$output=''；
$output.=”
函数initMap（）{
var bounds=new google.maps.LatLngBounds（）；
var myLatLng={lat:.$lat.”，lng:.$long.}；
//创建贴图对象并指定要显示的DOM元素。
var map=new google.maps.map（document.getElementById（'truckmap'）{
中心：myLatLng，
滚轮：错误，
缩放：“.$zoom。”
}); ";
foreach（$geo_代码为$key=>$stop）{
$output.=”
var标记“$i.”=新的google.maps.LatLng（“.stop['latitude']”，“$stop['longitude']”）；
扩展（标记“$i.”）；
var infowindow.“$i.”=新的google.maps.infowindow({
内容：““$stop['text']””
});
var marker.“$i.”=新的google.maps.marker({
地图：地图，
位置：{lat:'.$stop['纬度].]，lng:'.$stop['经度].}，
标题：“$stop['opts']['title']”
});
标记“$i.”.addListener（'click'，function（）{
信息窗口“$i.”。打开（地图、标记“$i.”）；
});";
$i++；
}
$output.=“map.fitBounds（bounds）；google.maps.event.addDomListener（窗口，'resize'，函数（）{
google.maps.event.trigger（映射，'resize'）；
映射边界（bounds）；
});}  ";
#返回输出
返回$output；
}#结束函数

恐怕我不明白你的答案。我没有写这里发布的原始代码，我只知道基本的Javascipt，所以我不知道如何使您的解决方案适应我现有的代码…尝试我在更新中添加的代码，看看是否对您有效。好的，刚刚发现一个问题-如果我单击地图上的某个pin，它将始终打开列表中的第一个pin，不管你点击了哪一个。啊，那是一个疏忽。重新编辑它，以便它现在可以工作。弹出窗口现在可以在所有标记上工作，但弹出窗口中显示的信息仍然是来自第一个地图插针的数据。