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

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

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

我已经把他们的小提琴剥下来一点点，以帮助您找出需要包含的基本要素，才能让您的地图正常工作。 You can find it here.

代码片段：

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