首页
所有分类
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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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
WebSockets(3) mp3Play(1) agg(1) 音频(1) apply(1) Tkinter(4) Pool(1) GUI(2) 数据处理(2) pandas(7)
You might like
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue实现购物车案例
2020/05/30 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
Python选课系统开发程序
2016/09/02 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python导入时小括号大作用
2017/01/10 Python
Python列表(List)知识点总结
2019/02/18 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python将数据插入数据库的代码分享
2020/08/16 Python
如何编写python的daemon程序
2021/01/07 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
全球性的在线购物网站：Zapals
2017/03/22 全球购物
犯错检讨书
2014/02/21 职场文书
房地产活动策划方案
2014/05/14 职场文书
关于运动会的广播稿（10篇）
2014/09/12 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
python必学知识之文件操作（建议收藏）
2021/05/30 Python
Redis Stream类型的使用详解
2021/11/11 Redis
Go语言 详解net的tcp服务
2022/04/14 Golang
python神经网络Xception模型
2022/05/06 Python