需要引入script标签
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn">
一段加入地图的代码
new google.maps.LatLng(myLatitude, myLongitude) 是设置地图精度纬度的
构建一个 LatLng
对象,以 {纬度, 经度} 的顺序传递其参数:
myOptions 配置项 zoom 大小级别 center 中心的位置 就是前面创造出的对象
mapTypeId 支持4个类型
new google.maps.Map(document.getElementById('cc'), myOptions)
创建地图类 第一个参数是容器元素 第二个参数是配置
地图事件
用户事件 (其实就是鼠标操作时候的事件)
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
地图事件
zoom_changed
center_changed
控件
导航控件可显示为以下
style
选项之一:google.maps.NavigationControlStyle.SMALL
,用于显示迷你缩放控件,其中仅限 + 和 - 按钮。此样式适用于移动设备。google.maps.NavigationControlStyle.ZOOM_PAN
,用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。google.maps.NavigationControlStyle.ANDROID
,用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。google.maps.NavigationControlStyle.DEFAULT
,会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
MapType 控件可显示为以下
style
选项之一:google.maps.MapTypeControlStyle.HORIZONTAL_BAR
,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU
,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT
,用于显示“默认”的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。
请注意,如果您确实想要修改任何控件选项,您还是应当通过将
MapOptions
值设置为true
以显式地启用相应的控件。修改控件
您可以在创建地图时通过地图的
MapOptions
对象中的字段指定控件的显示。下面对这些字段进行了说明:mapTypeControl
可启用/停用“地图类型”控件,该控件允许用户在地图类型(如“地图”和“卫星”)之间切换。默认情况下,此控件将显示在地图右上角。mapTypeControlOptions
字段可进一步指定要用于此控件的MapTypeControlOptions
。navigationControl
可启用/停用“导航”控件,该控件可提供一个平移/缩放控件。默认情况下,此控件将显示在地图左上角。navigationControlOptions
字段可进一步指定要用于此控件的NavigationControlOptions
。scaleControl
可启用/停用“比例”控件,该控件可提供一个简单的地图比例尺。默认情况下,不会显示此控件。启用后,它将显示在地图的左下角。scaleControlOptions
可进一步指定用于此控件的ScaleControlOptions
。
请注意,您可以为您最初停用的控件指定选项。
控件定位
每个控件选项都包含一个
position
属性(类型为ControlPosition
),它指明要在地图上放置该控件的位置。控件的定位并不是绝对的;相反,API 会在给定的约束条件(如地图大小)下,通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意:虽然 API 会尝试以智能方式排列控件,但这并不能保证控件不会叠加指定的复杂布局。系统支持以下控件位置:
TOP
表示控件应沿着地图顶部中心放置。TOP_LEFT
表示控件应沿着地图顶部左侧放置,控件的任何子元素“流”向顶部中心。TOP_RIGHT
表示控件应沿着地图顶部右侧放置,控件的任何子元素“流”向顶部中心。BOTTOM
表示控件应沿着地图底部中心放置。BOTTOM_LEFT
表示控件应沿着地图底部左侧放置,控件的任何子元素“流”向底部中心。BOTTOM_RIGHT
表示控件应沿着地图底部右侧放置,控件的任何子元素“流”向底部中心。LEFT
表示控件应沿着地图左侧放置,位于使用TOP_LEFT
定位方法放置的任何元素之下,控件的任何子元素“流”向底部。RIGHT
表示控件应沿着地图右侧放置,位于使用TOP_RIGHT
定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
bounds_changed
ROADMAP
,用于显示 Google Maps 默认的普通二维图块。SATELLITE
,用于显示拍摄的图块。HYBRID
,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。TERRAIN
,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。-
自定义控件
除了修改现有 API 控件的样式和位置外,您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件,浮动在地图之上的绝对位置处;这与“叠加”不同,后者会随下面的地图一起移动。从本质上讲,控件只是一个在地图上具有绝对位置的
<div>
元素,它会向用户显示某个用户界面,并处理与用户或地图的交互(通常通过某个事件处理程序)。要创建您自己的自定义控件,没有什么需要遵循的“规则”。不过,您可以将以下指导原则视为最佳实践的参考:
- 为要显示的控件元素定义适当 CSS。
- 针对地图属性更改或用户事件(如
'click'
事件),通过事件处理程序处理与用户或地图的交互。 - 创建一个
<div>
元素以承载控件并将此元素添加到Map
的controls
属性中。
处理自定义控件的事件
要使控件有用,它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入,也可以响应
Map
的状态变化。对于响应用户输入,Google Maps API 提供了一个跨浏览器的事件处理方法
addDomListener()
,它可以处理浏览器的多数支持的 DOM 事件。定位自定义控件
要在地图上定位自定义控件,您可以在
Map
对象的controls
属性中将其放在适当位置。此属性包含一个google.maps.ControlPosition
数组。您可以通过将Node
(通常是<div>
)添加至适当ControlPosition
向地图中添加自定义控件。(有关这些位置的信息,请参见上面的控件定位。)每个
ControlPosition
会存储一个显示在该位置的控件的MVCArray
。因此,当您向该位置添加或从中删除控件时,API 将相应更新控件。API 按照
index
属性的顺序将控件放在每个位置,并会首先放置索引值较低的控件。例如,位置BOTTOM_RIGHT
处的两个自定义控件将按照此索引顺序进行排列,并优先放置索引值较低的控件。默认情况下,所有自定义控件将在放置完任何 API 默认控件之后进行放置。您可以通过将控件的index
属性设置为一个负值覆盖此行为。请注意,如果希望在放置相同位置的默认 API 控件“之前”放置您的控件,通常只需设置一个索引值。OverlayView
自定义叠加层
Google Maps API 第 3 版提供了用于创建自定义叠加层的
OverlayView
类。OverlayView
是一个基类,提供了您在创建叠加层时必须实现的若干方法。该类还提供了一些方法,用于实现屏幕坐标和地图位置之间的转换。要创建自定义叠加层,请执行以下操作:
- 将自定义对象的
prototype
设置为google.maps.OverlayView()
的新实例。这可以有效地实现叠加层类的“子类化”。 - 为自定义叠加层创建构造函数,并将该构造函数中的所有初始化参数都设置为自定义属性。
- 在原型中实现
onAdd()
方法,以将叠加层附加到地图上。当地图准备好附加叠加层后,系统将会调用OverlayView.onAdd()
。 - 在原型中实现
draw()
方法,以处理对象的视觉显示。同样,在对象首次显示后,系统将会调用OverlayView.draw()
。 - 您还应当实现
onRemove()
方法,以清理在叠加层中添加的所有元素。
一个简单的例子.................
划线
当前地图 整个容器经纬度操作