编程 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操纵Cookie实现购物车程序

Nov 23 Javascript

在浏览器窗口上添加遮罩层的方法

Nov 12 Javascript

JS中捕获console.log()输出的方法

Apr 16 Javascript

js通过指定下标或指定元素进行删除数组的实例

Jan 12 Javascript

axios基本入门用法教程

Mar 25 Javascript

vuejs实现本地数据的筛选分页功能思路详解

Nov 15 Javascript

详解JavaScript基础知识（JSON、Function对象、原型、引用类型）

Jan 16 Javascript

vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

Apr 13 Javascript

获取layer.open弹出层的返回值方法

Aug 20 Javascript

详解使用JWT实现单点登录（完全跨域方案）

Aug 02 Javascript

Vue学习之常用指令实例详解

Jan 06 Javascript

2分钟实现一个Vue实时直播系统的示例代码

Jun 05 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