为什么我的谷歌地图没有完美加载

why my google map isn't loading perfectly?

本文关键字：完美 加载 我的 谷歌地图 为什么      更新时间：2023-09-26
<h4>Location</h4>
<div class="full-row mt20">
    <?php 
    if(empty($restaurant['Restaurant']['lattitude']))
        $restaurant['Restaurant']['lattitude'] = 0;
    if(empty($restaurant['Restaurant']['longitude']))
        $restaurant['Restaurant']['longitude'] = 0;
    ?>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $restaurant['Restaurant']['lattitude']; ?>,<?php echo $restaurant['Restaurant']['longitude']; ?>);
        var mapOptions = {
          zoom: 6,
          center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
      var marker=new google.maps.Marker({position:myLatlng});
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    });

  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <div id="googleMap" style="height:250px;"></div>

！[在此输入图像描述][1]

！[在此输入图像描述][2]输出图像链接为：https://i.stack.imgur.com/YGS3X.pnghttps://i.stack.imgur.com/1SLRK.png上面的部分是我的代码和我的结果。我找不到错误。当我拖动地图时，地图的另一部分将不可见。为什么会这样？

就像@KimGyesen说的那样，您必须使用调整大小来刷新地图。试试这个代码片段，也许这对你有所帮助...

$(document).ready(function () {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    var mapOptions = {
        zoom: 6,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    });
    setInterval(function () {
        google.maps.event.trigger(map, 'resize');
        map.fitBounds();
    }, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
    <div id="googleMap" style="width:500px; height:400px"></div>
</body>

相关文章：