首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 06, 2016

Google 地图控件集

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

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

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

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

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

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

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

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

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

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

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 地图控件集详解及实例代码

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
angular实现form验证实例代码
Jan 17 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
使用Vue生成动态表单
Nov 26 Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
小缇娜的奇幻之地(1) 最终幻想(1) 艾尔登法环(1) 巫师(1) 东方异文石(1) 守望先锋(1) 我的世界(1) LOL(1) 暴雪(1) 战锤40K(1)
You might like
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
Joomla开启SEF的方法
2016/05/04 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python常见数据结构详解
2014/07/24 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python的gevent框架的入门教程
2015/04/29 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python快速排序算法实例分析
2017/11/29 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python创建学生管理系统
2019/11/22 Python
python yield和Generator函数用法详解
2020/02/10 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Fossil美国官网：Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Allsole美国/加拿大：英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
阿玛尼意大利官网：Armani意大利
2018/10/30 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商：Wynsors
2020/02/17 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
新闻发布会主持词
2014/03/28 职场文书
读书之星事迹材料
2014/05/12 职场文书
家庭贫困证明范本（经典版）
2014/09/22 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers