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，并扩展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

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

1 个答案: