#map { width: 500px; height: 400px; }
这将设置地图的宽度和高度,以便其适应HTML页面的大小。接着,大家需要使用JavaScript API来加载地图,并将其显示在页面上。下面是一个基本的JavaScript代码片段,可以加载Google Map API并将地图显示在大家的HTML页面上:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.7749, lng: -122.4194}, zoom: 13 }); } </script>
在上面的代码中,大家定义了一个initMap()函数,该函数使用JavaScript API创建一个新的地图对象,并将其附加到大家HTML页面上的“map”元素上。该函数使用经度和纬度指定地图的中心,并使用“ zoom”属性设置地图的缩放级别。
在CSS中调用地图非常简单,并且为大家提供了更多的控制,以及更好的外观和交互效果。CSS和JavaScript的结合使大家能够轻松地构建出漂亮、功能强大的地图。