谷歌地圖標記未顯示在Modal中心彈出

Question

我正在使用以下代碼在模式彈出窗口上顯示Google Map。 但是Google Map標記不會顯示在模態的中心。 它總是隱藏在左上角。

<script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0.0, 0.0);
    var mapOptions = {
      zoom: 14,
      center: new google.maps.LatLng(0.0, 0.0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  }


  function codeAddress(i) {       

    var address = document.getElementById('address'+i).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            zoom:10,
            position: results[0].geometry.location
        });

        google.maps.event.addListenerOnce(map, 'idle', function () {
        google.maps.event.trigger(map, 'resize');
        });

        } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });

  }   

 </script>

也可以在這里查看代碼

Answer 1

這也可能與Google地圖模式問題有關 。

請嘗試使用@SSR給出的解決方案的模式事件處理程序：

Bootstrap模態圖問題解決方案：

 $(document).ready(function(){ $('#locationMap').on('shown.bs.modal', function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); }); }); 

此相關SO帖子中的解決方案也可能會有所幫助。