控件:
https://developers.google.com/maps/documentation/javascript/controls?hl=zh-CN
控件
缩放控件,显示滑块(针对大地图)或“+/-”小按钮(针对小地图),用于控制地图的缩放等级。在非触摸的设备上,该控件默认显示在地图的左上角,而在触摸设备上则显示在左下角。
平移控件,显示用于平移地图的按钮。在非触摸的设备上,该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转(如果可用的话)。
比例控件,用于显示地图比例元素。默认情况下,系统不会启用此控件。
MapType 控件,可让用户在不同的地图类型(例如 ROADMAP 和 SATELLITE)之间进行切换。该控件默认显示在地图的右上角。
街景视图控件包含一个街景小人图标,将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。
旋转控件包含一个较小的圆形图标,可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。(有关详情,请参阅 45° 图像。)
总览图控件会显示一个简略的总览图,用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。
无法直接访问或修改这些地图控件,但可修改地图的 MapOptions 字段,这些字段会影响控件的可见性和显示效果。您可以在初始化地图后调整控件的显示效果(使用相应的 MapOptions),也可以通过调用 setOptions() 来更改地图的选项,以对地图进行动态修改。
默认情况下,系统并不会启用所有这些控件。
此外,系统对所有设备都默认启用了键盘处理功能。
默认用户界面
控件 大屏幕 小屏幕 iPhone Android
缩放 大型缩放控件,适用于 400x350 像素以上的屏幕 小型缩放控件,适用于 400x350 像素以下的屏幕 不显示。缩放是通过两根手指的开合操作来实现的。 “触摸”式控件
平移 对 400x350 像素以上的屏幕显示 对 400x350 像素以下的屏幕不显示 不显示。平移是通过触摸来实现的。 不显示。平移是通过触摸来实现的。
MapType 水平栏,适用于宽度 300 像素以上的屏幕 下拉菜单,适用于宽度 300 像素以下的屏幕 与大屏幕/小屏幕相同 与大屏幕/小屏幕相同
缩放 不显示 不显示 不显示 不显示
在创建地图时,通过地图的 MapOptions 对象中的字段来指定控件的显示效果
mapTypeControl,用于启用/停用地图类型控件,该控件可让用户在不同的地图类型(例如“地图”和“卫星”)之间进行切换。默认情况下,此控件会显示在地图右上角。mapTypeControlOptions,用于进一步指定要用于此控件的 MapTypeControlOptions。
panControl,用于启用/停用平移控件。默认情况下,此控件会显示在地图左上角。panControlOptions,用于进一步指定要用于此控件的 PanControlOptions。
zoomControl,用于启用/停用缩放控件。默认情况下,此控件会显示在地图左上角。zoomControlOptions,用于进一步指定要用于此控件的 ZoomControlOptions。
scaleControl,用于启用/停用比例控件,该控件可提供一个简单的地图比例尺。默认情况下,不会显示此控件。启用后,它将显示在地图的左下角。scaleControlOptions,用于进一步指定要用于此控件的 ScaleControlOptions。
rotateControl,用于决定显示/不显示旋转控件,该控件可控制 45° 图像的方向。默认情况下,该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 45° 图像。要更改控件的行为,您可以设置地图的 rotateControlOptions 以指定要使用的 RotateControlOptions(不过,如果当前没有可用的 45° 图像,则无法显示该控件)。
overviewMapControl,用于启用/停用总览图控件。总览图控件可以显示为完整的控件(展示简略的总览图),也可以显示为折叠的最小化状态。默认情况下,该控件处于停用和折叠状态。overviewMapControlOptions,用于进一步指定要用于此控件的 OverviewMapControlOptions。
控件定位
每个控件选项都包含 position 属性(类型为 ControlPosition),该属性用于指明要在地图上放置相应控件的位置。控件的定位并不是绝对的
TOP_CENTER,表示控件应沿着地图顶部中心放置。
TOP_LEFT,表示控件应沿着地图顶部左侧放置,其中任何子元素均“流”向顶部中心。
TOP_RIGHT,表示控件应沿着地图顶部右侧放置,其中任何子元素均“流”向顶部中心。
LEFT_TOP,表示控件应沿着地图顶部左侧放置,但应位于所有 TOP_LEFT 元素的下方。
RIGHT_TOP,表示控件应沿着地图顶部右侧放置,但应位于所有 TOP_RIGHT 元素的下方。
LEFT_CENTER,表示控件应沿着地图左侧放置,位于 TOP_LEFT 和 BOTTOM_LEFT 位置的中间。
RIGHT_CENTER,表示控件应沿着地图右侧放置,位于 TOP_RIGHT 和 BOTTOM_RIGHT 位置的中间。
LEFT_BOTTOM,表示控件应沿着地图底部左侧放置,但应位于所有 BOTTOM_LEFT 元素的上方。
RIGHT_BOTTOM,表示控件应沿着地图底部右侧放置,但应位于所有 BOTTOM_RIGHT 元素的上方。
BOTTOM_CENTER,表示控件应沿着地图底部中心放置。
BOTTOM_LEFT,表示控件应沿着地图底部左侧放置,其中任何子元素均“流”向底部中心。
BOTTOM_RIGHT,表示控件应沿着地图底部右侧放置,其中任何子元素均“流”向底部中心。
示例
<style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script> <script> var map; function initialize() { var myLatLng = new google.maps.LatLng(30.51667,114.31667); var mapOptions = { zoom: 4, center: myLatLng, disableDefaultUI: true, //关闭移动等图标 panControl: true, //上下左右移动 zoomControl: true, //缩放的工具栏 mapTypeControl: true, //右上角,地图卫星图标 mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU //用于显示单个按钮控件,以便您通过下拉菜单选择地图类型 //style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR //用于在水平栏中将一组控件显示为如 Google 地图中所示的按钮。 //style:google.maps.MapTypeControlStyle.DEFAULT //用于显示“默认”行为,该行为取决于屏幕大小且可能会在以后的 API 版本中有所变化。 }, scaleControl: true, //左下角,比例尺图标 streetViewControl: true, //街景 overviewMapControl: false, zoomControl: true, zoomControlOptions: { //style: google.maps.ZoomControlStyle.SMALL //迷你缩放控件,其中仅包含 + 和 - 按钮。此样式适用于小型地图。在触摸设备上 //style:google.maps.ZoomControlStyle.LARGE //用于显示标准缩放滑块控件。在触摸设备上,该控件显示为可相应触摸事件的 + 和 - 按钮。 style:google.maps.ZoomControlStyle.DEFAULT //用于根据地图大小和运行地图的设备来挑选合适的缩放控件。 }, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body>
调整控件位置
<script> var map; function initialize() { var myLatLng = new google.maps.LatLng(30.51667,114.31667); var mapOptions = { zoom: 4, center: myLatLng, disableDefaultUI: true, //关闭移动等图标 panControl: true, //上下左右移动 panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, //缩放的工具栏 mapTypeControl: true, //右上角,地图卫星图标 mapTypeControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR }, scaleControl: true, //左下角,比例尺图标 scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT }, streetViewControl: true, //街景 streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP }, overviewMapControl: false, zoomControl: true, zoomControlOptions: { style:google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTE }, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script>
自定义
<style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script> <script> /** * The HomeControl adds a control to the map that simply * returns the user to Chicago. This constructor takes * the control DIV as an argument. * @constructor */ function HomeControl(controlDiv, map) { // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map controlDiv.style.padding = '5px'; // Set CSS for the control border var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '2px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'Click to set the map to Home'; controlDiv.appendChild(controlUI); // Set CSS for the control interior var controlText = document.createElement('div'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = '<b>设置武汉为中心</b>'; controlUI.appendChild(controlText); // Setup the click event listeners: simply set the map to // Chicago google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(new google.maps.LatLng(30.51667,114.31667)) }); } var map; function initialize() { var myLatLng = new google.maps.LatLng(30.51667,114.31667); var mapOptions = { zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); // Create the DIV to hold the control and // call the HomeControl() constructor passing // in this DIV. var homeControlDiv = document.createElement('div'); var homeControl = new HomeControl(homeControlDiv, map); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body>
相关推荐
**WPF Google Map V3 示例详解** 在Windows Presentation Foundation(WPF)开发中,集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3,实现...
由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
JavaScript调用Google Map API V3是一项常见的Web开发任务,它允许开发者在网页中嵌入交互式地图,并根据需求进行自定义。以下是对这个经典教程的详细解析: 1. **目标** - 整个教程旨在教会读者如何利用...
### 谷歌地图API V3 - 详细知识点解析 #### 概述 谷歌地图API V3(Google Maps API V3)是谷歌提供的一套强大的工具和服务集合,旨在帮助开发者在网页上集成交互式地图。它支持多种功能,如自定义地图样式、添加...
这个“Google MAP 学习例程”旨在帮助你深入理解和掌握Google Map V3 API,从而能够利用它创建各种定制化的地图应用。 **一、Google Map API基础** 1. **引入API**: 首先,你需要在HTML文件中通过`<script>`标签...
此外,V3 API还提供了丰富的类和接口,如`Map`、`Marker`、`Polyline`、`InfoWindow`等,用于创建、操作和显示地图元素。还有`Geocoder`服务用于地理编码和反编码,`DirectionsRenderer`和`DirectionsService`用于...
4. **mapapi.js**:这可能是包含离线地图功能的JavaScript库,它封装了与Google Maps API V3相关的离线操作,比如加载本地地图数据、处理地图瓦片等。 5. **说明.txt**:这是工具的使用指南,会详细解释如何使用...
Google Maps API v3离线开发包,带本地地图示例数据 需要特别说明的是: 1、本离线开发包内仅实现了功能离线,即js源码和部分控件图片的离线,地图仍然使用Google Tile。 2、从思路上讲,将Google Tile下载到本地...
- 引用了Google提供的CSS文件,用于美化地图控件。 3. **JavaScript逻辑**: - `initialize`函数是页面加载时执行的函数,用于初始化地图。 - `mapOptions`对象配置了地图的各项属性,包括: - `zoom`: 缩放...
### Google Maps JavaScript API V3中文版参考手册 #### 概述 Google Maps JavaScript API V3 是一款强大的工具,允许开发者在网页上嵌入并自定义谷歌地图。此API提供了丰富的功能,包括创建交互式地图、添加标记、...
本文将深入探讨"Google Maps API V3",也就是第三版本,以及它与V2的主要区别,并提供一些示例来帮助理解其核心功能和优势。 Google Maps API V3是Google为Web开发人员提供的一套JavaScript库,允许他们将交互式...
### 谷歌Maps API V3 知识点解析 #### 一、概述 Google Maps JavaScript API V3 是一个强大的工具包,允许开发者在网页上嵌入交互式地图。此版本相比之前的版本提供了更多的功能和更好的性能。通过API,用户能够...
Google Maps JavaScript API V3 是一个强大的工具,允许开发者在网页上集成交互式地图。这个API提供了丰富的功能,包括创建和自定义地图、添加各种控件、叠加层、服务以及地图类型,以满足不同应用场景的需求。 1. ...
Google Maps API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个中文参考文档包含了详细的API使用指南和技术说明,帮助开发者更好地理解和利用这个强大的工具。下面将对其中的...
### Google Maps API V3:深度解析与应用指南 Google Maps API V3,即Google地图JavaScript API的第三版,标志着Google地图服务在Web开发领域的重要里程碑。这一版本自2010年6月15日发布以来,凭借其强大的功能、...
Google Maps API v3 是 Google 提供的一套用于在网页上集成和操作地图的 JavaScript 库。这个库允许开发者创建交互式、自定义的地图,包括添加标记、绘制形状、实现地理编码(地址转换为经纬度)等功能。Ashtree ...
`v` 参数代表 API 版本,这里是 v2.x,但请注意,Google Maps API v2 已经被弃用,建议使用更新的版本如 v3。 接下来,通过 JavaScript 创建地图实例。在提供的代码中,创建了一个 `GMap2` 对象,用于表示地图: `...
根据给定的信息,本文将详细解释Google Maps API v3中涉及的关键知识点,这些知识点主要集中在地图的基本操作上,包括但不限于地图的初始化、设置中心点坐标、地图类型切换、缩放控制、通过像素或经纬度移动地图、...