Question

我通过API在我的网站上使用Google地图。它工作正常，但我还有两个额外的代码。一个让它响应，一个让它保持中心。由于某种原因，我无法同时集成两个代码。

这是当前的工作代码（具有响应部分）：

<script>
    var map;
jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-40.893591, 132.023621);
        var myOptions = {
            zoom: 5,
            center: latlng,
            disableDefaultUI: true,
            draggable: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
           };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        // init Height
        $('#map_canvas').height($( window ).height());
        });
        // On Resize
        $(window).resize(function(){ 
        $('#map_canvas').height($( window ).height());});

      var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

});
    </script>

提前致谢。

Answer 1

找到解决方案：

<script>
  function initMap() {
    var lnglat = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: lnglat,
      disableDefaultUI: true,
      draggable: false,
      scrollwheel: false,
      navigationControl: false,
      mapTypeControl: false,
      scaleControl: false,
    });

      var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

  }
    </script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_ID&callback=initMap">
</script>

在响应式网站上展示Google地图

1 个答案: