定制Google地图控件：详解、实例与关闭默认UI

167 浏览量更新于2024-08-28 收藏 79KB PDF 举报

本文将详细介绍Google地图控件集及其在网页开发中的应用。默认情况下，Google地图提供了一系列基本控件，包括： 1. Zoom：滑动条控件，用户可以通过它调整地图的缩放级别，以便查看更详细或更广阔的区域。 2. PPan（平移控制）：一个类似平底碗的图标，允许用户点击地图的四个角进行四向移动，以探索地图的不同部分。 3. MapType：用户可以在两种模式间切换，即Roadmap（路线图，显示街道、建筑物等）和Satellite（卫星视图，展示高空鸟瞰效果）。 4. StreetView：允许用户通过拖拽街景小人图标，查看地图上的特定位置的街景照片。此外，Google地图还提供了额外的控件以增强用户体验： - Scale：显示地图的比例尺，帮助用户了解实际距离和地图上的大小关系。 - Rotate：一个小圆圈图标，允许用户旋转地图以改变视角。 - OverviewMap（全景图）：从广角视角俯瞰地图，便于快速浏览大范围区域。在创建地图时，开发者可以选择性地显示这些控件，或者通过`setOptions()`方法动态更改地图设置。有时，开发者可能希望关闭默认控件集，如在以下示例中所示： ```html <!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742, -0.120850), zoom: 7, disableDefaultUI: true, // 关闭默认控件 mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html> ``` 通过设置`disableDefaultUI`属性为`true`，我们可以隐藏默认的控件集，仅显示地图本身。这在某些场景下，如简洁布局或自定义控件设计时非常有用。理解并掌握这些控件和设置方法，能帮助开发者更好地利用Google Maps API构建功能丰富的地图应用。

Google 地图控件集详解及实例代码地图控件集详解及实例代码

Google 地图控件集地图控件集

Google 地图地图 – 默认控件集设置：默认控件集设置：

当使用一个标准的google地图，它的默认设置如下：

1.Zoom-显示一个滑动条来控制map的Zoom级别

2.PPan-地图上显示的是一个平底碗样的控件，点击4个角平移地图

3.MapType-允许用户在map types(roadmap 和 satallite)之间切换

4.StreetView-显示为一个街景小人图标，可拖拽到地图上某个点来打开街景

Google 地图地图 – 更多控件集更多控件集

除了以上默认控件集,Google还有：

.Scale-显示地图比例尺

.Rotate-显示一个小的圆周图标，可以转动地图

.verview Map-从一个广域的视角俯视地图

创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。

Google 地图地图 – 关闭默认控件集关闭默认控件集

你可能希望能够关闭默认的控件集。

为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:

实例

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38537541

粉丝: 6
资源: 892

定制Google地图控件：详解、实例与关闭默认UI

GoogleMap控件下载

GMap.NET 控件实例C#源代码

文库首页 开发技术其它 微信小程序 input输入框控件详解及实例(多种示例)

地图控件如何加载到qaxwidget

treeview控件使用详解

vb 地图控件 用法

listbox控件用法详解

C#结合Arcengine 实现将一个地图控件中的所有图层显示到另一个地图控件中

mscomm控件使用详解

C#结合Arcengine 实现将一个地图控件中的所有图层显示到另一个地图控件中，矢量图层在上层，栅格图层在下层

最新资源

文库首页开发技术其它微信小程序 input输入框控件详解及实例(多种示例)

vb 地图控件用法