GoogleMap V3 控件

控件：

https://developers.google.com/maps/documentation/javascript/controls?hl=zh-CN

控件
    缩放控件，显示滑块（针对大地图）或“+/-”小按钮（针对小地图），用于控制地图的缩放等级。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则显示在左下角。
    平移控件，显示用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转（如果可用的话）。
    比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。
    MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。
    街景视图控件包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。
    旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。（有关详情，请参阅 45° 图像。）
    总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。

    无法直接访问或修改这些地图控件，但可修改地图的 MapOptions 字段，这些字段会影响控件的可见性和显示效果。您可以在初始化地图后调整控件的显示效果（使用相应的 MapOptions），也可以通过调用 setOptions() 来更改地图的选项，以对地图进行动态修改。
    默认情况下，系统并不会启用所有这些控件。
    此外，系统对所有设备都默认启用了键盘处理功能。
   
    默认用户界面
        控件         大屏幕                                                 小屏幕                                             iPhone                                             Android
        缩放         大型缩放控件，适用于 400x350 像素以上的屏幕         小型缩放控件，适用于 400x350 像素以下的屏幕     不显示。缩放是通过两根手指的开合操作来实现的。     “触摸”式控件
        平移         对 400x350 像素以上的屏幕显示                         对 400x350 像素以下的屏幕不显示                 不显示。平移是通过触摸来实现的。                 不显示。平移是通过触摸来实现的。
        MapType     水平栏，适用于宽度 300 像素以上的屏幕                 下拉菜单，适用于宽度 300 像素以下的屏幕         与大屏幕/小屏幕相同                             与大屏幕/小屏幕相同
        缩放         不显示                                                 不显示                                             不显示                                             不显示
       
在创建地图时，通过地图的 MapOptions 对象中的字段来指定控件的显示效果
    mapTypeControl，用于启用/停用地图类型控件，该控件可让用户在不同的地图类型（例如“地图”和“卫星”）之间进行切换。默认情况下，此控件会显示在地图右上角。mapTypeControlOptions，用于进一步指定要用于此控件的 MapTypeControlOptions。
    panControl，用于启用/停用平移控件。默认情况下，此控件会显示在地图左上角。panControlOptions，用于进一步指定要用于此控件的 PanControlOptions。
    zoomControl，用于启用/停用缩放控件。默认情况下，此控件会显示在地图左上角。zoomControlOptions，用于进一步指定要用于此控件的 ZoomControlOptions。
    scaleControl，用于启用/停用比例控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。scaleControlOptions，用于进一步指定要用于此控件的 ScaleControlOptions。
    rotateControl，用于决定显示/不显示旋转控件，该控件可控制 45° 图像的方向。默认情况下，该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 45° 图像。要更改控件的行为，您可以设置地图的 rotateControlOptions 以指定要使用的 RotateControlOptions（不过，如果当前没有可用的 45° 图像，则无法显示该控件）。
    overviewMapControl，用于启用/停用总览图控件。总览图控件可以显示为完整的控件（展示简略的总览图），也可以显示为折叠的最小化状态。默认情况下，该控件处于停用和折叠状态。overviewMapControlOptions，用于进一步指定要用于此控件的 OverviewMapControlOptions。

控件定位
    每个控件选项都包含 position 属性（类型为 ControlPosition），该属性用于指明要在地图上放置相应控件的位置。控件的定位并不是绝对的
    TOP_CENTER，表示控件应沿着地图顶部中心放置。
    TOP_LEFT，表示控件应沿着地图顶部左侧放置，其中任何子元素均“流”向顶部中心。
    TOP_RIGHT，表示控件应沿着地图顶部右侧放置，其中任何子元素均“流”向顶部中心。
    LEFT_TOP，表示控件应沿着地图顶部左侧放置，但应位于所有 TOP_LEFT 元素的下方。
    RIGHT_TOP，表示控件应沿着地图顶部右侧放置，但应位于所有 TOP_RIGHT 元素的下方。
    LEFT_CENTER，表示控件应沿着地图左侧放置，位于 TOP_LEFT 和 BOTTOM_LEFT 位置的中间。
    RIGHT_CENTER，表示控件应沿着地图右侧放置，位于 TOP_RIGHT 和 BOTTOM_RIGHT 位置的中间。
    LEFT_BOTTOM，表示控件应沿着地图底部左侧放置，但应位于所有 BOTTOM_LEFT 元素的上方。
    RIGHT_BOTTOM，表示控件应沿着地图底部右侧放置，但应位于所有 BOTTOM_RIGHT 元素的上方。
    BOTTOM_CENTER，表示控件应沿着地图底部中心放置。
    BOTTOM_LEFT，表示控件应沿着地图底部左侧放置，其中任何子元素均“流”向底部中心。
    BOTTOM_RIGHT，表示控件应沿着地图底部右侧放置，其中任何子元素均“流”向底部中心。

 

示例

<style>
	html, body, #map-canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,     
	disableDefaultUI: true, //关闭移动等图标
	panControl: true, //上下左右移动
	zoomControl: true,  //缩放的工具栏
	mapTypeControl: true, //右上角，地图卫星图标
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU	//用于显示单个按钮控件，以便您通过下拉菜单选择地图类型
	  //style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR //用于在水平栏中将一组控件显示为如 Google 地图中所示的按钮。
	  //style:google.maps.MapTypeControlStyle.DEFAULT //用于显示“默认”行为，该行为取决于屏幕大小且可能会在以后的 API 版本中有所变化。
    },
	scaleControl: true,  //左下角，比例尺图标
	streetViewControl: true, //街景
	overviewMapControl: false,
	zoomControl: true,
	zoomControlOptions: {
		//style: google.maps.ZoomControlStyle.SMALL  //迷你缩放控件，其中仅包含 ＋ 和 － 按钮。此样式适用于小型地图。在触摸设备上
		//style:google.maps.ZoomControlStyle.LARGE //用于显示标准缩放滑块控件。在触摸设备上，该控件显示为可相应触摸事件的 + 和 - 按钮。
		style:google.maps.ZoomControlStyle.DEFAULT //用于根据地图大小和运行地图的设备来挑选合适的缩放控件。
	},
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

 调整控件位置

<script>
var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,     
	disableDefaultUI: true, //关闭移动等图标
	panControl: true, //上下左右移动
	panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
	zoomControl: true,  //缩放的工具栏
	mapTypeControl: true, //右上角，地图卫星图标
    mapTypeControlOptions: {
		position: google.maps.ControlPosition.BOTTOM_CENTER,
		style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
    },
	scaleControl: true,  //左下角，比例尺图标
	scaleControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },
	streetViewControl: true, //街景
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
	overviewMapControl: false,
	zoomControl: true,
	zoomControlOptions: {
		style:google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTE
	},
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>

 自定义

<style>
	html, body, #map-canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 * @constructor
 */
function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  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>设置武汉为中心</b>';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to
  // Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
		map.setCenter(new google.maps.LatLng(30.51667,114.31667))
  });
}

var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,     
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  
  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  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="map-canvas"></div>
</body>