Google 地图 API V3 之控件

Google官方教程：

控件概述

通过 Google Maps API 显示的地图包含用户界面元素，以便用户与地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用中添加这些控件的多种组合。或者，您也可以不进行任何操作，让 Google Maps API 处理所有控件行为。

Maps API 带有一部分可在地图中使用的内置控件：

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

注意：以前提供的导航控件已弃用，并分割为独立的缩放和平移控件。

您无法直接访问或修改这些地图控件，但可修改地图的 MapOptions 字段，这些字段会影响控件的可见性和显示效果。您可以在初始化地图后调整控件的显示效果（使用相应的 MapOptions），也可以通过调用 setOptions() 来更改地图的选项，以对地图进行动态修改。

默认情况下，系统并不会启用所有这些控件。要了解默认用户界面行为（以及如何修改此类行为），请参阅下面的默认用户界面。

默认用户界面

您可能只想指定自己的地图展示 Google 地图界面的外观（其中包括以后要添加到地图中的所有新地图项或控件），而不想指定和设置单独的控件。要实现此行为，您无需进行任何操作。您的地图会显示默认控件。

默认控件集

Maps API 提供了以下默认控件：

控件	大屏幕	小屏幕	iPhone	Android
缩放	大型缩放控件，适用于 400x350 像素以上的屏幕	小型缩放控件，适用于 400x350 像素以下的屏幕	不显示。缩放是通过两根手指的开合操作来实现的。	“触摸”式控件
平移	对 400x350 像素以上的屏幕显示	对 400x350 像素以下的屏幕不显示	不显示。平移是通过触摸来实现的。	不显示。平移是通过触摸来实现的。
MapType	水平栏，适用于宽度 300 像素以上的屏幕	下拉菜单，适用于宽度 300 像素以下的屏幕	与大屏幕/小屏幕相同	与大屏幕/小屏幕相同
缩放	不显示	不显示	不显示	不显示

此外，系统对所有设备都默认启用了键盘处理功能。

停用默认用户界面

有时，您可能需要关闭 API 的默认用户界面设置。要执行此操作，请将 Map 的 disableDefaultUI 属性（在 Map options 对象中）设置为 true。此属性可停用 Google Maps API 中所有自动执行的用户界面行为。

以下代码可彻底停用默认用户界面：

function initialize() {

  var mapOptions = {

    zoom: 4,

    center: new google.maps.LatLng(-33, 151),

    disableDefaultUI: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

       mapOptions);

}

向地图添加控件

您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面，并确保即使以后进行了更新，也不会改变这种行为。如果您只想添加或修改现有的行为，您需要确保以显式的方式将相应的控件添加到自己的应用中。

有些控件在默认情况下会出现在地图上，而其他控件则只有在您明确提出相关请求后，才会显示出来。您可以将以下 Map options 对象的字段设为 true 以显示相应控件，或者设为 false 以隐藏相应控件，从而通过这些字段指定向地图添加控件或从地图删除控件：

{

  panControl: boolean,

  zoomControl: boolean,

  mapTypeControl: boolean,

  scaleControl: boolean,

  streetViewControl: boolean,

  overviewMapControl: boolean

}

以下示例对地图进行了设置，使其隐藏导航（缩放和平移）控件，同时显示比例控件。请注意，我们并未显式停用默认用户界面，因此您可在默认用户界面行为中添加这些修改。

function initialize() {

  var mapOptions = {

    zoom: 4,

    center: new google.maps.LatLng(-33, 151),

    panControl: false,

    zoomControl: false,

    scaleControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

        mapOptions);

}

控件选项

有些控件是可以配置的，这样您就可以更改它们的行为或外观。例如，缩放控件可显示为带有滑块的大型完整控件，也可以显示为适用于较小地图的小型迷你缩放控件。

您可以在创建地图后更改 MapOptions 对象中的相应控件选项字段，从而对这些控件进行修改。例如，用于更改缩放控件的选项位于 zoomControlOptions 字段中。

缩放控件可能出现在以下某个 style 选项中：

google.maps.ZoomControlStyle.SMALL，用于显示迷你缩放控件，其中仅包含＋和－按钮。此样式适用于小型地图。在触摸设备上，该控件显示为可相应触摸事件的 + 和 - 按钮。
google.maps.ZoomControlStyle.LARGE 用于显示标准缩放滑块控件。在触摸设备上，该控件显示为可相应触摸事件的 + 和 - 按钮。
google.maps.ZoomControlStyle.DEFAULT，用于根据地图大小和运行地图的设备来挑选合适的缩放控件。

MapType 控件可显示为以下某个 style 选项：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google 地图中所示的按钮。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您通过下拉菜单选择地图类型。
google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”行为，该行为取决于屏幕大小且可能会在以后的 API 版本中有所变化。

请注意，如果您确实想要修改任何控件选项，还应将相应的 MapOptions 值设为 true 以显式启用相关控件。例如，要将缩放控件设置为显示 SMALL 样式，请在 MapOptions对象内使用以下代码：

...

  zoomControl: true,

  zoomControlOptions: {

    style: google.maps.ZoomControlStyle.SMALL

  }

  ...

以下示例设置了一个下拉 MapType 控件，并指定缩放控件使用小型迷你缩放布局：

function initialize() {

  var mapOptions = {

    zoom: 4,

    center: new google.maps.LatLng(-33, 151),

    mapTypeControl: true,

    mapTypeControlOptions: {

      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

    },

    zoomControl: true,

    zoomControlOptions: {

      style: google.maps.ZoomControlStyle.SMALL

    },

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);

}

控件通常是在创建地图后进行配置的。不过，您可以调用 Map 的 setOptions() 方法并为相应控件传递新的控件选项，以动态更改控件的显示效果。

修改控件

您可以在创建地图时，通过地图的 MapOptions 对象中的字段来指定控件的显示效果。下面对这些字段进行了说明：

mapTypeControl，用于启用/停用地图类型控件，该控件可让用户在不同的地图类型（例如“地图”和“卫星”）之间进行切换。默认情况下，此控件会显示在地图右上角。mapTypeControlOptions，用于进一步指定要用于此控件的 MapTypeControlOptions。
panControl，用于启用/停用平移控件。默认情况下，此控件会显示在地图左上角。panControlOptions，用于进一步指定要用于此控件的 PanControlOptions。
zoomControl，用于启用/停用缩放控件。默认情况下，此控件会显示在地图左上角。zoomControlOptions，用于进一步指定要用于此控件的 ZoomControlOptions。
scaleControl，用于启用/停用比例控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。scaleControlOptions，用于进一步指定要用于此控件的 ScaleControlOptions。
rotateControl，用于决定显示/不显示旋转控件，该控件可控制 45° 图像的方向。默认情况下，该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 45° 图像。要更改控件的行为，您可以设置地图的 rotateControlOptions 以指定要使用的 RotateControlOptions（不过，如果当前没有可用的 45° 图像，则无法显示该控件）。
overviewMapControl，用于启用/停用总览图控件。总览图控件可以显示为完整的控件（展示简略的总览图），也可以显示为折叠的最小化状态。默认情况下，该控件处于停用和折叠状态。overviewMapControlOptions，用于进一步指定要用于此控件的 OverviewMapControlOptions。

请注意，您可以为您最初停用的控件指定选项。

控件定位

每个控件选项都包含 position 属性（类型为 ControlPosition），该属性用于指明要在地图上放置相应控件的位置。控件的定位并不是绝对的；相反，API 会在给定的约束条件（例如地图大小）下，通过围绕现有地图元素或其他控件“流动”控件来以智能方式对控件进行布局。

注意：虽然 API 会尝试以智能方式排列控件，但这并不能保证控件不会叠加给定的复杂布局。

系统支持以下控件位置：

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，表示控件应沿着地图底部右侧放置，其中任何子元素均“流”向底部中心。

请注意，这些位置可能会与用户界面元素的位置相冲突，而您无法修改用户界面元素（如版权和 Google 徽标）的位置。在这种情况下，控件将按照每个位置所注明的逻辑“流动”，并显示在尽可能靠近指定位置的位置。

下面的示例展示了一张简单的地图，其中启用了位于不同位置的所有控件。

function initialize() {

  var mapOptions = {

    zoom: 12,

    center: new google.maps.LatLng(-28.643387, 153.612224),

    mapTypeId: google.maps.MapTypeId.ROADMAP,

    mapTypeControl: true,

    mapTypeControlOptions: {

        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,

        position: google.maps.ControlPosition.BOTTOM_CENTER

    },

    panControl: true,

    panControlOptions: {

        position: google.maps.ControlPosition.TOP_RIGHT

    },

    zoomControl: true,

    zoomControlOptions: {

        style: google.maps.ZoomControlStyle.LARGE,

        position: google.maps.ControlPosition.LEFT_CENTER

    },

    scaleControl: true,

    scaleControlOptions: {

        position: google.maps.ControlPosition.TOP_LEFT

    },

    streetViewControl: true,

    streetViewControlOptions: {

        position: google.maps.ControlPosition.LEFT_TOP

    }

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);

}

下列代码展示在google地图中设置控件展现样式，并设置一标签并绑定其单击事件：

<%@ Page Language="C#" AutoEventWireup="true" %>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>谷歌地图 v3</title>

    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            function initialize() {

                var mapOptions = {

                    center: new google.maps.LatLng(39.915972, 116.395686), //new google.maps.LatLng(-25.363882, 131.044922),

                    mapTypeId: google.maps.MapTypeId.ROADMAP,

                    zoom: 4,

                    disableDefaultUI: true,

                    panControl: false,

                    mapTypeControl: true,

                    mapTypeControlOptions: {

                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

                        position: google.maps.ControlPosition.LEFT_BOTTOM

                    },

                    zoomControl: true,

                    zoomControlOption: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER },

                    scaleControl: true,

                    overviewMapControl: true

                };  

                var map = new google.maps.Map(document.getElementById('map'), mapOptions);  

                var marker = new google.maps.Marker({

                    position: map.getCenter(),

                    map: map,

                    title: 'Click to zoom'

                });  

                google.maps.event.addListener(map, 'center_changed', function () {

                    // 3 seconds after the center of the map has changed, pan back to the

                    // marker.

                    window.setTimeout(function () {

                        map.panTo(marker.getPosition());

                    }, 3000);

                });  

                google.maps.event.addListener(marker, 'click', function () {

                    map.setZoom(8);

                    map.setCenter(marker.getPosition());

                });

            }  

            google.maps.event.addDomListener(window, 'load', initialize);  

        });

    </script>

</head>

<body>

    <table>

        <tr>

            <td colspan="5">

                <div id="map" style="width: 400px; height: 400px;">

                </div>

            </td>

        </tr>

    </table>

</body>

</html>

对应上面代码的地图：

Google 地图 API V3 之控件

自定义控件

除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的小部件，浮动在地图之上的绝对位置处，这与会随着下面的地图一起移动的“叠加层”不同。从本质上讲，控件只是一个在地图上具有绝对位置的 <div> 元素，该元素会向用户显示某个用户界面并处理与用户或地图的交互（通常通过事件处理程序）。

要创建您自己的自定义控件，没有什么必须遵循的“规则”。不过，您可以将以下准则视为最佳实践的参考：

为待显示的控件元素定义适当的 CSS。
针对地图属性更改或用户事件（例如 'click'' 事件），通过事件处理程序处理与用户或地图的交互。
创建 <div> 元素以存储控件并将此元素添加到 Map 的 controls 属性中。

下面将分别对这些准则加以说明。

绘制自定义控件

如何绘制控件由您自己决定。一般而言，建议您将所有的控件显示方式放在单个 <div> 元素中，以便将控件作为一个单元进行处理。我们将在下面所示的示例中使用这种设计模式。

设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 <div> 容器、一个用于存储按钮轮廓的 <div> 和另一个用于存储按钮内部事项的 <div> 来创建简单的控件。

// Create a div to hold the control.

var controlDiv = document.createElement('div');  

// 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 = '<strong>Home</strong>';

controlUI.appendChild(controlText);

处理自定义控件的事件

要使控件有用，它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户的输入内容，也可以响应 Map 的状态变化。

为响应用户输入，Maps API 提供了一个跨浏览器的事件处理方法 addDomListener()，该方法可以处理大多数受浏览器支持的 DOM 事件。以下代码段为浏览器的 'click'事件添加了一个监听器。请注意，此事件是从 DOM（而非地图）接收的。

// Setup the click event listener: simply set the map to center on Chicago

var chicago = new google.maps.LatLng(41.850033, -87.6500523);  

google.maps.event.addDomListener(outer, 'click', function() {

  map.setCenter(chicago)

});

定位自定义控件

要在地图上定位自定义控件，请在 Map 对象的 controls 属性中将相应控件放在适当的位置。此属性包含 google.maps.ControlPosition 数组。您可以将 Node（通常为<div>）添加至相应的 ControlPosition，以向地图中添加自定义控件。（有关这些位置的信息，请参阅上面的控件定位。）

每个 ControlPosition 均会存储显示在相应位置上的控件的 MVCArray。因此，当您向该位置添加或从该位置删除控件时，API 将对控件作出相应的更新。

API 会按照 index 属性的顺序分别将控件放在各自的位置上；并且索引值较低的控件的位置会较靠前。例如，BOTTOM_RIGHT 位置处的两个自定义控件将按照此索引顺序进行排列，并优先放置索引值较低的控件。默认情况下，API 会先放置所有的 API 默认控件，然后才开始放置所有自定义控件。您可以通过将控件的 index 属性设为负值，以覆盖此行为。自定义控件无法放置在徽标的左侧或版权的右侧。

以下代码创建了一个新的自定义控件（未显示其构造函数），并将该控件添加到地图中的 TOP_RIGHT 位置。

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  

// Construct your control in whatever manner is appropriate.

// Generally, your constructor will want access to the

// DIV on which you'll attach the control UI to the Map.

var controlDiv = document.createElement('div');

var myControl = new MyControl(controlDiv);  

// We don't really need to set an index value here, but

// this would be how you do it. Note that we set this

// value as a property of the DIV itself.

controlDiv.index = 1;  

// Add the control to the map at a designated control position

// by pushing it on the position's array. This code will

// implicitly add the control to the DOM, through the Map

// object. You should not attach the control manually.

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

自定义控件示例

下面是一个简单的控件（尽管不是很实用），其中综合了上面所示的模式。该控件通过使地图在某个默认位置上居中来响应 DOM 'click' 事件：

var map;

var chicago = new google.maps.LatLng(41.850033, -87.6500523);  

/**

 * The HomeControl adds a control to the map that simply

 * returns the user to Chicago. This constructor takes

 * the control DIV as an argument.

 */  

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 = '<strong>Home</strong>';

  controlUI.appendChild(controlText);  

  // Setup the click event listeners: simply set the map to Chicago.

  google.maps.event.addDomListener(controlUI, 'click', function() {

    map.setCenter(chicago)

  });

}  

function initialize() {

  var mapDiv = document.getElementById('map_canvas');

  var mapOptions = {

    zoom: 12,

    center: chicago,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(mapDiv, 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);

}

为控件添加状态

控件也可以存储状态。下面的示例与前面所示的类似，但该控件包含了一个额外的“Set Home”按钮，它将控件设置为显示一个新首页位置。为此，我们在该控件内创建了一个 home_ 属性以存储此状态，并为该状态提供了获取函数和设置函数。

<%@ Page Language="C#" AutoEventWireup="true" %>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>谷歌地图 v3</title>

    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var beijing = new google.maps.LatLng(39.915972, 116.395686); //坐标  

            /**

            * The HomeControl adds a control to the map that simply

            * returns the user to Chicago. This constructor takes

            * the control DIV as an argument.

            */

            function HomeControl(controlDiv, map) {//自定义控件 HomeControl：以北京坐标为地图中心  

                // 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 = '<strong>Home</strong>';

                controlUI.appendChild(controlText);  

                // Setup the click event listeners: simply set the map to beijing.

                google.maps.event.addDomListener(controlUI, 'click', function () {//绑定该控件Click单击事件

                    map.setCenter(beijing);//事件内容为：使坐标北京居中

                });

            }  

            /**

            * The MyHomeControl adds a control to the map that

            * returns the user to the control's defined home.

            */  

            // Define a property to hold the Home state.

            MyHomeControl.prototype.home_ = null;  

            // Define setters and getters for this property.

            MyHomeControl.prototype.getHome = function () {

                return this.home_;

            }  

            MyHomeControl.prototype.setHome = function (home) {

                this.home_ = home;

            }  

            function MyHomeControl(map, div, home) {  

                // Get the control DIV. We'll attach our control UI to this DIV.

                var controlDiv = div;  

                // We set up a variable for the 'this' keyword since we're adding event

                // listeners later and 'this' will be out of scope.

                var control = this;  

                // Set the home property upon construction.

                control.home_ = home;  

                // 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 goHomeUI = document.createElement('div');

                goHomeUI.style.backgroundColor = 'white';

                goHomeUI.title = 'Click to set the map to Home';

                controlDiv.appendChild(goHomeUI);  

                // Set CSS for the control interior.

                var goHomeText = document.createElement('div');

                goHomeText.innerHTML = '<strong>Home</strong>';

                goHomeUI.appendChild(goHomeText);  

                // Set CSS for the setHome control border.

                var setHomeUI = document.createElement('div');

                setHomeUI.style.backgroundColor = 'white';

                setHomeUI.title = 'Click to set Home to the current center';

                controlDiv.appendChild(setHomeUI);  

                // Set CSS for the control interior.

                var setHomeText = document.createElement('div');

                setHomeText.innerHTML = '<strong>Set Home</strong>';

                setHomeUI.appendChild(setHomeText);  

                // Setup the click event listener for Home:

                // simply set the map to the control's current home property.

                google.maps.event.addDomListener(goHomeUI, 'click', function () {

                    var currentHome = control.getHome();//定位到最近一次设置的Home点

                    map.setCenter(currentHome);

                });  

                // Setup the click event listener for Set Home:

                // Set the control's home to the current Map center.

                google.maps.event.addDomListener(setHomeUI, 'click', function () {

                    var newHome = map.getCenter();

                    control.setHome(newHome);//设置最近一次Home点

                });

            }  

            function initialize() {

                var mapDiv = document.getElementById('map');

                var mapOptions = {

                    zoom: 12,

                    center: beijing,

                    mapTypeId: google.maps.MapTypeId.ROADMAP,

                    disableDefaultUI: true,

                    panControl: false,

                    mapTypeControl: true,

                    mapTypeControlOptions: {

                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

                        position: google.maps.ControlPosition.LEFT_BOTTOM

                    },

                    zoomControl: true,

                    zoomControlOption: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER },

                    scaleControl: true,

                    overviewMapControl: true

                }

                var map = new google.maps.Map(mapDiv, 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);  

                var myHomeControlDiv = document.createElement("div");

                var myHomeControl = new MyHomeControl(map, myHomeControlDiv, beijing);

                myHomeControlDiv.index = 2;

                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myHomeControlDiv);

            }  

            google.maps.event.addDomListener(window, 'load', initialize);

        });

    </script>

</head>

<body>

    <table>

        <tr>

            <td colspan="5">

                <div id="map" style="width: 400px; height: 400px;">

                </div>

            </td>

        </tr>

    </table>

</body>

</html>

运行结果如下图：
Google 地图 API V3 之控件

秒客网

Google 地图 API V3 之控件

控件概述

默认用户界面

默认控件集

停用默认用户界面

向地图添加控件

以下示例对地图进行了设置，使其隐藏导航（缩放和平移）控件，同时显示比例控件。请注意，我们并未显式停用默认用户界面，因此您可在默认用户界面行为中添加这些修改。

控件选项

以下示例设置了一个下拉 MapType 控件，并指定缩放控件使用小型迷你缩放布局：

修改控件

控件定位

下列代码展示在google地图中设置控件展现样式，并设置一标签并绑定其单击事件：

对应上面代码的地图：

自定义控件

绘制自定义控件

处理自定义控件的事件

定位自定义控件

自定义控件示例

为控件添加状态

相关文章