Javascript 为什么封装在div中的googlemaps代码不起作用？_Javascript_Google Maps

Javascript 为什么封装在div中的googlemaps代码不起作用？

javascript google-maps

Javascript 为什么封装在div中的googlemaps代码不起作用？,javascript,google-maps,Javascript,Google Maps,这是一个显示谷歌地图的简单代码。还有一个比这多一点的功能，即它还允许在单击多个点时创建路径。不过，这些扩展与问题无关。我面临的问题是以下代码可以工作。它正确显示谷歌地图，但下面的第二个代码与第一个代码相同，但正文内容用div块包装。第二个代码不起作用，即它不显示地图。我想知道为什么用div包装身体会破坏谷歌地图的显示功能。谢谢你的帮助！谢谢 <!doctype html> <html lang="en"> <head> <meta ht

这是一个显示谷歌地图的简单代码。还有一个比这多一点的功能，即它还允许在单击多个点时创建路径。不过，这些扩展与问题无关。我面临的问题是以下代码可以工作。它正确显示谷歌地图，但下面的第二个代码与第一个代码相同，但正文内容用div块包装。第二个代码不起作用，即它不显示地图。我想知道为什么用div包装身体会破坏谷歌地图的显示功能。谢谢你的帮助！谢谢

<!doctype html>
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Simple Map</title>
      <meta charset="utf-8">
      <style>
         html, body {
         height: 100%;
         margin: 0;
         padding: 0;
         }
         #map {
         height: 100%;
         }
      </style>
   </head>
   <body>



     <div id="info">
        <label> Distance: </label>
        <label id="dis"> </label>
     </div>
     <div>
        <button onClick="reset()"> Reset </button>
        <button onClick="getLatLong()"> Save </button>
     </div>

      <div id="map"></div>
      <script>
         var map;

         var coordinates = [];

         function reset(){


         document.getElementById('dis').innerHTML = "";
         initMap();



         }

         function getLatLong(){
         document.getElementById('dis').innerHTML = map.getCenter() + map.getZoom();
         }    

         function initMap() {


           map = new google.maps.Map(document.getElementById('map'), {
             center: {lat: 40.274330810357355, lng: -111.68475025794504},
             zoom: 17
           });


         var lineSymbol = {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW};

         map.addListener('click', function( event ){

         coordinates.push({lat: event.latLng.lat(), lng: event.latLng.lng() });

         var flightPath = new google.maps.Polyline({
         path: coordinates,
         icons: [{icon: lineSymbol, offset: '100%'}],
         geodesic: true,
         strokeColor: '#FF0000',
         strokeOpacity: 1.0,
         strokeWeight: 2
         });

         flightPath.setMap(map);



         });

         }


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




   </body>
</html>

这张地图占了整页。我只想把地图封装成一个div

在运行JS脚本之前，等待页面完全加载。如果您使用的是jquery$document.readyfunction{/**您的js代码**/}

而不是

#map {
  height: 100%;
}

你可以试试这样的

#map {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

这样，您就不必设置父分区的高度。

此行：

map=new google.maps.Mapdocument.getElementById'map'

标识映射将呈现到的HTML元素。如果您希望地图小于全屏。给Map一些CSS来定义它的大小和位置。为了实现这一点，无需将JS封装在div中。例如：

#map {
  position: absolute;
  top: 0; 
  right: 0;
  width:400px;
  height:400px
}

这将在窗口右上角为您提供一张400px的正方形地图

好的，我正在发布问题的答案。因此，无论贴图容器有多深，如果将div高度和宽度设置为特定像素，那么贴图都将显示在该空间中。这就是我想要的，所以解决方案是

#map {
         height: 500px;
         width: 500px;
    }

你能提供一个完整的解决方案吗？在上面的代码中，google maps库似乎调用了initMap，因为该调用是作为回调的一部分指定的。尝试在body标记中添加一个onload，看起来我需要设置父div的高度和宽度，但问题是我在grails应用程序中有一个适用于所有视图页面的布局，该布局有一个div容器用于引导。布局主体在这个div中，所以我认为只为一个视图页面设置基本容器的宽度和高度不是一个好主意。我赞赏任何解决这一困境的办法。谢谢@用户734861太棒了！我认为gmap要求像素的宽度和高度。百分比不起作用。为什么这个问题被否决了？谢谢你的回答。我尝试了css，它看起来如上面更新部分所示。我希望地图被封装在一个div中，而不是占据整个页面。谢谢您所需要做的就是将映射定义为所需的大小/位置，映射代码将把映射渲染到元素中。不需要将JS封装在div中即可实现这一点。map=new google.maps.Mapdocument.getElementById'map'是不够的。如果贴图div位于另一个div内，则不会渲染贴图。我面临的问题是，我无法删除外部分区。我需要在不删除外部分区的情况下将地图显示在内部分区中。这正是下面的答案。

#map {
  position: absolute;
  top: 0; 
  right: 0;
  width:400px;
  height:400px
}

#map {
         height: 500px;
         width: 500px;
    }