响应式谷歌地图

Question

下面的代码用于在我的网站上的谷歌地图上显示位置。它在桌面视图上工作正常，但响应式没有帮助。请帮助我调整缩放和大小并使其响应。我已附上图片以供参考。

地图上有四个标记。 3 个是簇，1 个是正常标记。请帮助我调整视图，以便我的所有标记在一帧中可见。如果您可以在单击标记时帮助我平滑缩放，那将非常有帮助。

谢谢。

SCREENSHOT FOR DESKTOP VIEW

function initMap() {

  // Create a new StyledMapType object, passing it an array of styles,
  // and the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
],
      {name: 'Styled Map'});
function initialize() {

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.

    var myLatlng = {lat: 29.687978, lng: 0.00};

  var map = new google.maps.Map(document.getElementById('map'), {
    center: myLatlng,
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
              'styled_map']
    }
  });

    var marker = locations.map(function(location, i) {
      return new google.maps.Marker({
      position: location,
      animation: google.maps.Animation.DROP,
      title: 'Click to zoom' 

    });

    marker.addListener('click', toggleBounce);
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, marker,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

  //Associate the styled map with the MapTypeId and set it to display.
   map.mapTypes.set('styled_map', styledMapType);
   map.setMapTypeId('styled_map');
   map.setOptions({ minZoom: 2, maxZoom: 15 });

}


var locations = [
  {lat: 19.013916, lng: 73.012211},
  {lat: 18.995356, lng: 72.838849},
  {lat: 42.365981, lng: -71.051223},
  {lat: 18.558610, lng: 73.883862},
]

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 400px;
  width: 100%;
  margin: 0;
  padding: 0;
}

div id="map"></div>


<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Answer 1

此链接将对您有所帮助。 stackoverflow/googlemap.resize

不要使用地图的即时图像。 map有resize函数，在window.resize事件中调用。