从零开始学google地图API(4)--控件

在这里插入图片描述
这是我们平常看见的google地图,它的默认设置如下
Zoom
右下角的加减,来控制map的缩放级别
PPan
地图上显示的是一个平底碗样的控件，点击4个角平移地图(这个我找了半天也没发现是啥，不会就是地图本身的四个顶点?)
MapType
左上角的,允许用户在地图和卫星图之间切换
StreetView
就是那个小人,可拖拽到地图上某个点来打开街景

网页源码如下，就是第一次大家见到的

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,  
    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>

当然也可以关闭默认控件集
在这里插入图片描述
确实都没有了，好像PPan不会是外边的一层白边吧…

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,  
    mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true
  };
  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>

只需要在map里设置地图的disableDefaultUI的属性为true即可

除了默认控件集,Google还有
Scale
显示地图比例尺
Rotate
显示一个小的圆周图标，可以转动地图
verview Map
从一个广域的视角俯视地图
这些控件可以通过创建地图时的设置选项来指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项

下面我们开启所有的控件
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_FALSE"></script>
<script>
function initialize()
{
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,
    scaleControl: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>

设置控件为true使其可见,设置控件为false则隐藏它
如果是默认的控件，我们就不需要再设置他们为true啦，只需要设置额外控件
可以看到地图的下面有一个50公里的比例尺
emm另外两个没有显示出来…不知道为什么…

某些地图控件是可配置的。通过制定控件选项域改变控件集
修改Zoom
zoomControlOptions包含如下3种选项
google.maps.ZoomControlStyle.SMALL
显示最小化zoom 控件
google.maps.ZoomControlStyle.LARGE
显示标准zoom滑动控件
google.maps.ZoomControlStyle.DEFAULT
基于设备和地图大小，选择最合适的控件

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_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.LARGE
},
    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)
换了small,large,default感觉都是一样的…没什么区别

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

变成下拉式

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_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属性指定控件的位置

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIT_KEY&sensor=TRUE_OR_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>

控件集汇总
MapTypeControlOptions
保存用于修改控件的选项(位置和样式)
MapTypeControlStyle
指定要显示的地图控件类型(下拉菜单或按钮)

OverviewMapControlOptions
显示概览地图控件的选项(打开或折叠)

PanControlOptions
平移控件的渲染选项(位置)

RotateControlOptions
旋转控件(位置)的渲染选项

ScaleControlOptions
缩放控件的渲染选项(位置和样式)
ScaleControlStyle
指定要显示的缩放控件类型

StreetViewControlOptions
街景渲染选项pegman控件(位置)

ZoomControlOptions
缩放控件的渲染选项(位置和样式)
ZoomControlStyle
指定要显示的缩放控件类型（大或小）

ControlPosition
指定控件在地图上的位置,使用于一切控件

从零开始学google地图API(4)--控件

猜你喜欢