Question

我正在使用Google地图反向地址编码，但是我的地图未显示在我的网站中。我复制了示例代码及其工作方式，然后将其粘贴到我的网站文件（带有模板）中时没有显示

这是代码

<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地图中的示例代码中就有数据

Answer 1

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

更改为px或将高度设置为父级或使用cal

相对于高度的百分比计算生成框的包含块。如果包含的高度没有明确指定块（即，取决于内容高度），并且此元素不是绝对定位的自动计算。根元素上的百分比高度是相对的到最初的包含块。

有关更多参考，check

为什么没有显示谷歌地图

1 个答案: