首页
所有分类
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 相关文章推荐
Jquery replace 字符替换实现代码
Dec 02 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析
Jul 17 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Koa代理Http请求的示例代码
Oct 10 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
如何手写一个简易的 Vuex
Oct 10 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
PL-365(1) YB235(1) 东方红(1) YB217(1) 森海(1) YB400(2) 1 Tube Radio(1) 再生机(1) 直流胆(1) MX500(1)
You might like
php email邮箱正则
2008/10/08 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
如何制作幻灯片（代码分享）
2017/01/06 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Python字符串处理实例详解
2017/05/18 Python
python中的字符串内部换行方法
2018/07/19 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python组合无重复三位数的实例
2018/11/13 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python中调用其他程序的方式详解
2019/08/06 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python中内建模块collections如何使用
2020/05/27 Python
NUK奶瓶美国官网：NUK美国
2016/09/26 全球购物
美国著名珠宝品牌之一：Jared The Galleria Of Jewelry
2016/10/01 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
高一生物教学反思
2014/01/17 职场文书
检讨书怎么写
2015/05/07 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python