Google Maps - Types
在上一章中，我们讨论了如何加载基本地图。 在这里，我们将看到如何选择所需的地图类型。
地图类型
Google地图提供了四种类型的地图。 他们是 -
ROADMAP - 这是默认类型。 如果您未选择任何类型，则会显示。 它显示了所选区域的街景。
SATELLITE - 这是显示所选区域的卫星图像的地图类型。
HYBRID - 此地图类型显示卫星图像上的主要街道。
TERRAIN - 这是显示地形和植被的地图类型
语法 (Syntax)
要选择其中一种地图类型，您必须在地图选项中提及相应的地图类型ID，如下所示 -
var mapOptions = {
mapTypeId:google.maps.MapTypeId.<b class="notranslate">Id of the required map type</b>
};
Roadmap
以下示例显示如何选择ROADMAP类型的地图 -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
<font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
它将产生以下输出 -
新页面打开卫星(Satellite)
以下示例显示如何选择SATELLITE类型的地图 -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
<font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>SATELLITE</i></b></font>
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
它将产生以下输出 -
新页面打开Hybrid
以下示例显示如何选择HYBRID类型的地图 -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
<font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>Hybrid</i></b></font>
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
它将产生以下输出 -
新页面打开Terrain
以下示例显示如何选择TERRAIN类型的地图 -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
<font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>TERRAIN</i></b></font>
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
它将产生以下输出 -
新页面打开