在調整窗口大小時在屏幕上保留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