Google Maps UI控件
Google 地图提供了带有各种控件的用户界面，可让用户与地图进行交互。我们可以添加、自定义和禁用这些控件。
默认控件
以下是 Google 地图提供的默认控件列表-
缩放-为了增加和减少地图的缩放级别，默认情况下我们将有一个带有 + 和-按钮的滑块。此滑块将位于地图左侧的角落。
Pan-在缩放滑块上方，将有一个用于平移地图的平移控件。
地图类型-您可以在地图的右上角找到此控件。它提供地图类型选项，例如卫星、路线图和地形。用户可以选择这些地图中的任何一个。
街景-在平移图标和缩放滑块之间，我们有一个街景小人图标。用户可以拖动此图标并将其放置在特定位置以获取其街景。
示例
这是一个示例，您可以在其中观察 Google 地图提供的默认 UI 控件-
禁用 UI 默认控件
我们可以通过在地图选项中设置
disableDefaultUI 值为 true 来禁用 Google 地图提供的默认 UI 控件。
示例
以下示例展示了如何禁用 Google 地图提供的默认 UI 控件。
<!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:5,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
启用/禁用所有控件
除了这些默认控件之外，Google 地图还提供了另外三个控件，如下所列。
Scale-Scale 控件显示地图比例元素。默认情况下不启用此控件。
Rotate-Rotate 控件包含一个允许您旋转包含倾斜图像的地图的小圆形图标。默认情况下，此控件显示在地图的左上角。 （有关详细信息，请参阅 45° 图像。）
概览-为了增加和减少地图的缩放级别，默认情况下我们有一个带有 + 和-按钮的滑块。此滑块位于地图的左角。
在地图选项中，我们可以启用和禁用谷歌地图提供的任何控件，如下所示-
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
示例
以下代码显示了如何启用所有控件-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
控制选项
我们可以使用其控件选项更改 Google 地图控件的外观。例如，缩放控件的尺寸可以缩小或放大。 MapType 控件外观可以更改为水平条或下拉菜单。下面给出了 Zoom 和 MapType 控件的控件选项列表。
| Sr.No. |
控制名称 |
控制选项 |
| 1 |
缩放控制 |
google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT |
| 2 |
MapType 控件 |
google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT |
示例
以下示例演示如何使用控制选项-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
控制定位
您可以通过在控件选项中添加以下行来更改控件的位置。
position:google.maps.ControlPosition.Desired_Position,
这是可以在地图上放置控件的可用位置列表-
TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT
示例
以下示例展示了如何将 MapTypeid 控件放置在地图的顶部中心以及如何将缩放控件放置在地图的底部中心。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
