<body onunload=”GUnload()”>
<table><tr><td>
<div id=”map_canvas” style=”width:400px;height:300px;”></div>
<script type=”text/javascript”>
if (GBrowserIsCompatible()){map = new GMap2(document.getElementById(“map_canvas”));map.setCenter(new GLatLng(39.917,116.397), 14);map.addControl(new GLargeMapControl());map.addOverlay(new GMarker(new GLatLng(39.917,116.397)));}
</script>
</td></tr></table>
从前有个table,导致google地图在IE7里面无法正确定位。 在FF和chrome里面是正常的。
去掉table的话,一切都正常的。
艾,要么就得在页面加载完之后,再初始化google地图才可以。 修改如下:
用到了jquery.
<body onunload=”GUnload()”>
<table><tr><td>
<div id=”map_canvas” style=”width:400px;height:300px;”></div>
<script type=”text/javascript”>
$(document).ready(function(){
if (GBrowserIsCompatible()){map = new GMap2(document.getElementById(“map_canvas”));map.setCenter(new GLatLng(39.917,116.397), 14);map.addControl(new GLargeMapControl());map.addOverlay(new GMarker(new GLatLng(39.917,116.397)));}
}
);
</script>
</td></tr></table>
不要问我为什么不在body里面加一个onload=xxx ,因为我实在郁闷。
问题一:
使用 setZoom(level:Number) 重设地图的缩放级别时,如果传入的参数为字符串,比如”12″, 那么缩放无效。必须传入整形的参数。
问题二:
google地图js的编码是utf-8的, 如果你的页面是gbk的,必须显式地指出这一点:
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
charset="utf-8" >
</script>
否则在IE6中会出错的。
示例代码: google simple map 请把代码保存到你自己电脑上再打开。
GMap2 类
对 GMap2 类进行实例化以创建地图。这是 API 中的中心类。其他都是辅助类。
构造函数
|
构造函数
|
说明
|
|
GMap2(container:Node, opts?:GMapOptions)
|
在指定的 HTML 容器中创建新的地图,该容器通常是一个 DIV 元素。如果可选参数 opts.mapTypes 中没有给出地图类型集合,则使用默认的集合 G_DEFAULT_MAP_TYPES。如果可选参数 opts.size 中没有给出大小,则使用 container 的大小。如果给出了 opts.size,则相应地调整地图容器元素的大小。请参见 class GMapOptions。注意:需要先将地图居中,才能使用该地图。您应该立即调用 GMap2.setCenter() 来初始化使用该构造函数创建的地图。
|
修改地图状态
|
方法
|
返回值
|
说明
|
setCenter(center:GLatLng, zoom?:Number, type?:GMapType) |
None |
按指定的中心设置地图视图。也可以同时设置缩放级别和地图类型。地图类型必须是地图已知的类型。请参见构造函数和方法 addMapType()。必须在构造后先调用此方法,才能设置地图的初始状态。在调用此函数之前调用对新构造的 GMap2 对象执行的操作,这是错误的。 |
panTo(center:GLatLng) |
None |
将地图的中心点更改为指定的点。如果该点已经在当前的地图视图中可见,则会以平滑动画的方式移动中心点。 |
panBy(distance:GSize) |
None |
以动画方式平移指定的距离(以像素为单位)。 |
信息窗口
|
方法
|
返回值
|
说明
|
openInfoWindow(latlng:GLatLng, node:Node, opts?:GInfoWindowOptions) |
None |
在指定点处打开一个简单的信息窗口。平移地图,使得打开的信息窗口完全可见。信息窗口的内容为 DOM 节点。 |
openInfoWindowHtml(latlng:GLatLng, html:String, opts?:GInfoWindowOptions) |
None |
在指定点处打开一个简单的信息窗口。平移地图,使得打开的信息窗口完全可见。信息窗口的内容为 HTML 文本。 |
事件
|
事件
|
说明
|
|
click(overlay:GOverlay, latlng:GLatLng, overlaylatlng:GLatLng)
|
用户用鼠标点击地图时会触发此事件。根据所点击的环境的不同以及是否点击了可点击的叠加层,click 事件会传递不同的参数。如果点击的不是可点击叠加层,overlay 参数为 null 并且 latlng 参数包含点击点的地理坐标。如果点击的是clickable叠加层(如 GMarker、GPolygon、GPolyline 或 GInfoWindow),overlay 参数包含叠加层对象,而 overlaylatlng 参数会包含所点击叠加层的坐标。另外,还会在该叠加层自身上触发 click 事件。
|
控件
GLatLng 类
GLatLng 是以经度和纬度表示的地理坐标点。
请注意,尽管进行地图投影时通常将经度与 x 坐标相关联,将纬度与 y 坐标相关联,但总是先填写纬度坐标,后填写经度坐标,因为这符合绘图习惯。
另请注意,不能修改 GLatLng 的坐标。如果想要计算另一个点,必须新建一个。
构造函数
|
构造函数
|
说明
|
|
GLatLng(lat:Number, lng:Number, unbounded?:Boolean)
|
注意纬度和经度的顺序。如果 unbounded 标记为 true,则将使用传递的数字,否则纬度会限定在 -90 度和 +90 度之间,而经度会限定在 -180 度和 +180 度之间。
|
GMarker 类
GMarker 标记地图上的位置。它实现 GOverlay 接口,因此可使用 GMap2.addOverlay() 方法添加到地图中。
标记对象包含 latlng(这是标记在地图中锚定的地理位置)和 icon。如果未在构造函数中设置 icon,则会使用默认图标 G_DEFAULT_ICON。
将标记对象添加到地图中后,通过标记可打开该地图的信息窗口。标记对象会触发鼠标事件和信息窗口事件。
构造函数
方法
将标记添加到地图中后,才能调用这些方法。
bindInfoWindow(content:Node, opts?:GInfoWindowOptions) None 将指定的 DOM 节点绑定到此标记。当点击标记时,此节点中的内容会自动显示在信息窗口中。将 null 作为 content 传递来解除绑定。
(自 2.85 开始)
bindInfoWindowHtml(content:String, opts?:GInfoWindowOptions) None 将指定的 HTML 绑定到此标记。当点击标记时,HTML 内容将自动显示在信息窗口中。将 null 作为 content 传递来解除绑定。
(自 2.85 开始)
GControl 类
存在 interface GControl 的实现方法。
构造函数
|
构造函数
|
说明
|
|
GSmallMapControl()
|
创建带有可在四个方向平移、放大和缩小的按钮的控件。
|
|
GLargeMapControl()
|
创建带有可在四个方向平移、放大、缩小的按钮以及缩放滑块的控件。
|
|
GSmallZoomControl()
|
创建带有放大和缩小按钮的控件。
|
|
GScaleControl()
|
创建显示地图比例尺的控件。
|
|
GMapTypeControl()
|
创建一个标准地图类型控件,通过按钮在受支持地图类型之间进行选择和切换。
|
|
GMenuMapTypeControl()
|
创建一个下拉地图类型控件,在受支持地图类型之间切换。
|
|
GHierarchicalMapTypeControl()
|
创建一个“嵌套”地图类型控件,通过按钮和嵌套复选框在受支持地图类型之间进行选择和切换。
|
|
GOverviewMapControl()
|
在主地图的一角创建可折叠的迷你型概览地图,以便通过拖动提供位置参考和导航。GOverviewMapControl 创建单像素黑边界的概览地图。注意:与其他控件不同,您只能将此控件放在地图的右下角 (G_ANCHOR_BOTTOM_RIGHT)。
|
命名空间 GEvent
此命名空间包含的函数可用于注册事件处理程序(既处理自定义事件也处理 DOM 事件)和触发自定义事件。此 API 定义的所有事件都是由 GEvent.trigger() 内部触发的自定义事件。
静态方法
|
方法
|
返回值
|
说明
|
|
GEvent.addListener(source:Object, event:String, handler:Function)
|
GEventListener
|
为源对象的自定义事件注册事件处理程序。返回一个可用于最终注销处理程序的句柄。可使用源对象的 this 集合调用事件处理程序。
|