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

2024-12-07 17:59:53

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">
</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>

Google 地图 - 开所有控件集

一些控件集默认显示在地图上，而其它的不会，除非你设置它们。

设置控件为true使其可见-设置控件为false则隐藏它。

以下实例开启所有的控件：

实例

<html>
<head>
<script
src="http://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,
 panControl:true,
 zoomControl:true,
 mapTypeControl:true,
 scaleControl:true,
 streetViewControl:true,
 overviewMapControl:true,
 rotateControl: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>

Google 地图 - 修改控件集

某些地图控件是可配置的。通过制定控件选项域改变控件集。

F举个例子来说，修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项：

1.google.maps.ZoomControlStyle.SMALL-显示最小化zoom 控件
2.google.maps.ZoomControlStyle.LARGE-显示标准zoom滑动控件
3.google.maps.ZoomControlStyle.DEFAULT-基于设备和地图大小，选择最合适的控件

实例

<html>
<head>
<script
src="http://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,
 zoomControl:true,
 zoomControlOptions: {
 style:google.maps.ZoomControlStyle.SMALL
 },
 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>

注意：如果需要修改一个控件，首先开启控件(设置其为true)。

另一个控件为 MapType 控件。

MapType 控件可显示为以下 style 选项之一：

1.google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
2.google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。
3.google.maps.MapTypeControlStyle.DEFAULT，用于显示"默认"的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。

实例

<html>
<head>
<script
src="http://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,
 mapTypeControl:true,
 mapTypeControlOptions: {
 style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
 },
 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>

同样你可以使用ControlPosition属性指定控件的位置:

<html>
<head>
<script
src="http://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,
 mapTypeControl:true,
 mapTypeControlOptions: {
 style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
 position:google.maps.ControlPosition.TOP_CENTER
 },
 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>

Google 地图 - 自定义控件集

创建一个返回伦敦自定义控件，用于点击事件： (如果地图被拖拽):

实例

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

<script>
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);

// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
 controlDiv.style.padding = '5px';
 var controlUI = document.createElement('div');
 controlUI.style.backgroundColor = 'yellow';
 controlUI.style.border='1px solid';
 controlUI.style.cursor = 'pointer';
 controlUI.style.textAlign = 'center';
 controlUI.title = 'Set map to London';
 controlDiv.appendChild(controlUI);
 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>Home<b>'
 controlUI.appendChild(controlText);

 // Setup click-event listener: simply set the map to London
 google.maps.event.addDomListener(controlUI, 'click', function() {
 map.setCenter(london)
 });
}

function initialize() {
 var mapDiv = document.getElementById('googleMap');
 var myOptions = {
 zoom: 12,
 center: london,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(mapDiv, myOptions);
 // Create a DIV to hold the control and call HomeControl()
 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="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

以上就是Google 地图控件集的资料整理，后续继续补充相关知识，希望能帮助开发Google 地图应用的朋友，谢谢大家对本站的支持！

在Google 地图上实现做的标记相连接

这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了. 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta char
js+html5获取用户地理位置信息并在Google地图上显示的方法

本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&
Google 地图API Map()构造器详解

地图 API Map() 构造器实例创建一个 Google 地图: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var map
Google 地图类型详解及示例代码

Google 地图类型 Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: 1.MapTypeId.ROADMAP,用于显示默认的道路地图视图 2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片 3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图. 要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性: var
Google 地图API资料整理及详细介绍

Google 地图API 参考手册地图构造函数/对象描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层构造函数/对象描述 Marker 创建一个标记. MarkerOptions 标记的选项.由DirectionsRenderer渲染的所有标记都将使用这些选项. MarkerImage A structure representing a Marker icon or shadow image MarkerShape Defines the
Google 地图叠加层实例讲解

Google 地图 - 叠加层叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动. Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标.标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标. 2.地图上的线使用折线(表示点的集合)来显示.线是类型为 GPolyline 的对象. 3.地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域).多边形类似于闭合的折线,因此可以是任何
Google Maps API地图应用示例分享

效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://
Google 地图事件实例讲解

Google 地图事件点击标记缩放地图我们仍然使用上一遍文章使用的英国伦敦的地图. 点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>
百度地图经纬度转换到腾讯地图/Google 对应的经纬度

实现目的:将百度地图经纬度转换到腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +
Google 地图获取API Key详细教程

Google 地图API Key 开始学习本教程前,你需要拥有一个免费的 Google 地图 API key. 开始学习? 开始学习本教程前,你需要在Google上申请一个指定的API key. 通过以下步骤我们可以免费获取 API key . 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆. 登陆后会出现如下界面: 点击 "Create Project" 按钮. 在服务列表中找到 Google Maps API v3,

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

相关推荐

随机推荐