HTML教程-HTML谷歌地图
HTML谷歌地图用于在网页上显示地图。您可以在基本的HTML页面上简单地添加地图。
语法：
<!DOCTYPE html>
<html>
<body>
<h1>第一个谷歌地图示例</h1>
<div id="map">地图将显示在这里...</div>
</body>
</html>设置地图大小
您可以使用以下语法来设置地图大小：
<div id="map" style="width:400px;height:400px;background:grey"></div>如何创建一个设置地图属性的函数？
您可以通过创建一个函数来设置地图属性。这里的函数是myMap()。此示例显示在伦敦市中心的谷歌地图。
我们必须使用由Google提供的JavaScript库中的谷歌地图API的功能。使用以下脚本引用带有对myMap函数的回调的Google Maps API。
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个谷歌地图</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>示例解释
mapOptions： 这是一个变量，用于定义地图的属性。
center： 它指定地图的中心位置（使用纬度和经度坐标）。
zoom： 它指定地图的缩放级别（尝试使用不同的缩放级别进行实验）。
mapTypeId： 它指定要显示的地图类型。支持以下地图类型：ROADMAP（道路地图）、SATELLITE（卫星地图）、HYBRID（混合地图）和TERRAIN（地形图）。
var map = new google.maps.Map(document.getElementById("map"), mapOptions)： 它在具有id="map"的元素内创建一个新的地图，并使用传递的参数（mapOptions）。
HTML多个地图
您可以在单个示例中使用不同的地图类型。
示例：
<!DOCTYPE html>
<html>
<body>
<div id="googleMap1" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
<script>
function myMap() {
var mapOptions1 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapOptions3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapOptions4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
