时间戳

首页 > 解决方案 > 为什么谷歌地图没有出现

javascript - 为什么谷歌地图没有出现

问题描述

我正在使用谷歌地图反向地理编码，我的地图没有显示在我的网站上。我复制了我的示例代码及其工作，当我将它粘贴到我的网站文件（带模板）时它没有显示

这是代码

<div id="map" style="width:50%;height:100%;"></div>

这是我的脚本

       <script>
            function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: 16.0130425, lng: 120.35724399999998}
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        document.getElementById('go').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        });
      }
      function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              map.setZoom(17);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map,
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
  </script>

我的 header.php 中有我的 API

但是当我签入我的“检查元素”时，div 地图有一个数据在我的示例代码中

标签： javascriptgoogle-maps

解决方案

<div id="map" style="width:50%;height:100px;"></div>

将高度更改为 px 或将高度赋予父级或使用cal

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 auto。根元素上的百分比高度是相对于初始包含块的。

更多参考检查

推荐阅读