GMap
的每一个实例表现为页面上的一个地图,可以创建这个类的多个实例 每个地图被包含在一个container之中,比如一个DIV标签,除非明确指定,地图将使用相应container的大小.
GMap
类提供了操作地图点(中心和缩放度)和添加删除标记(比如GMarker
和GPolyline
实例)和方法. 同时也提供了一个打开"信息浮窗"的方法,地图上同时只能有一个信息浮窗.
更多信息请参看GMap
类参考
利用事件监视器,你可以在程序中加入动态的内容,每个实例提供一些指定的事件,你的程序可以利用静态方法GEvent.addListener
或GEvent.bind
监视这些事件. 例如,以下代码片断在每次用户点击地图的时候显示一个警告:
var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
alert("You clicked the map");
});
GEvent.addListener
使用一个函数作为第三个参数,这个函数作为事件处理器,在事件被触发时运行. 如果想绑定一个对象的方法到事件,可以使用GEvent.bind
.例如:
function MyApplication() {
this.counter = 0;
this.map = new GMap(document.getElementById("map"));
GEvent.bind(this.map, "click", this, this.onMapClick);
}
MyApplication.prototype.onMapClick() {
this.counter++;
alert("You have clicked the map " + this.counter +
this.counter == 1 ?" time.":" times.");
}
var application = new MyApplication();
Map类有一个信息浮窗,可以在地图上以浮动窗口模式在地图上显示HTML内容.
基本的浮动窗口方法是openInfoWindow
,这个方法以一个点和一个HTML节点作为参数,这个HTML节点被添加到信息浮窗容器里面,并显示在相应点处.
openInfoWindowHtml
差不多,但是它使用HTML字符串作为参数. openInfoWindowXslt
则利用XML节点和XSLT文档的URL地址来生成信息浮窗内容,如果该XSLT文档还没有被下载,则会自动异步下载此文件.
如果需要在标记上显示信息浮窗,你可以传递第三个参数(可选)给出窗口顶端和给定点位置的像素差. 比如你的标记高度是10px,你可以使用GSize(0,-10)
作第三个参数.
GMarker
类还提供了openInfoWindow
方法用来处理像素值内容,所以不用担心在程序中计算像素的问题.
标注是一些绑定到地理坐标的对象,当移动、缩放地图或切换模式(比如从地图到卫星图)时,标注也会跟着变化.
Maps API提供两种标注:标记(地图上的图标)和折线(根据地理位置绘制的折线)
The GMarker
构造函数使用一个图标和一个点作为参数,并提供一些类似"点击"的事件,看这个创建标记的例子
创建标记最困难的地方是指定图标,复杂在于一个图标需要几个不同的图片构成.
每一个图标至少都有一个前景图片和一个阴影图片,阴影必须是前景图的45度视角的形状,并且左下角和前景图的左下角重叠,还必须是24-bit PNG灰度图片,才能刚好使图标看起来像站在地图上一样.
The GIcon
需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片,一下是指定一个图标的最基本的代码:
var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
The GIcon
类提供有超过7个的属性必须设置以保证图标在浏览器上的兼容性和功能. 比如imageMap属性指定图标不透明部分的形状,如果你没有设置这个属性,在Firefox/Mozilla浏览器上,整个图标(包括透明部分)都能被点击. 看这个GIcon类参考了解更多信息
GPolyline
构造函数使用一组地理点最为参数,你也能指定颜色、线宽和透明度 颜色采用老的HTML样式,比如"#ff0000". GPolyline
不支持直接使用颜色名字. 例如以下代码会创建一个10像素宽的红色线段:
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
new GPoint(-122.1519, 37.4519)],
"#ff0000", 10);
map.addOverlay(polyline);
在IE浏览器中,我们用VML来绘制折线,而在其他的浏览器之中,我们使用Google服务器上的图片,并在地图变化时重新刷新图片.
addControl
用来添加控件,Maps API可以让你在地图上使用如下控件:
GLargeMapControl
在Google Map中使用的大缩放/定位控件
GSmallMapControl
在Google Map中使用的小缩放/定位控件
GSmallZoomControl
一个小的缩放控件(不能定位),用在小窗口中显示驾驶方向
GMapTypeControl
地图类型切换控件(如:地图和卫星图)
例如,要在地图上添加一个缩放/定位控件,你可以在地图初始化时使用如下代码:
map.addControl(new GLargeMapControl());
这样,控件就会被添加到地图的左上角
XML和RPC
Google Maps API提供了一个创建XmlHttpRequest
对象的方法,当前可以在IE, Firefox, and Safari上运行正常,如下:
var request = GXmlHttp.create();
request.open('GET', "myfile.txt", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
request.send(null);
你还可以使用静态方法GXml.parse
来解析一个XML文档,使用XML字符串作为参数,这个方法对所有的浏览器兼容. 如果本地浏览器不支持XML解析,则会采用一个基于JavaScript的解析器,可是不能保证这个解析器一定能正常的解析.
注意Google Maps API不需要使用XML或XmlHttpRequest
因为这是一个纯JavaScript/DHTML的API.
分享到:
相关推荐
Google Map API 使用示例
详尽的介绍了google map api 并简单的举了几个例子,能帮助你了解Google map 编程
google map api 实现自定义mark和其移动
谷歌地图Google Map API中文开发文档 V3
google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档
费了半天才找到的源代码,很好用的,如果想学习google map api二次开发,他会提供很好帮助!
GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文 GoogleMap api 中文
写了一些GOOGLE MAP应用,大家分享
基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户管理系统基于googlemap api 的gps终端和用户...
这个swc是googlemap对flash的api,他并不适用于flex,关于flex,有自己的swc哦
Google Map api V3 (3.9.12)的离线开发包
包含了利用Google Map API进行二次开发的很多实例,为刚开始接触Google Map API进行二次开发的读者提供了一条捷径。
最新的Google Map Api 帮助文档 免费下载地址: http://www.hkmci.com
谷歌地图api v3 学习文档,资料查询, 基础学习。
Android google map API例子
google map api 调用的实例,
介绍Google Map Api的文档,其中对Google Map编程中使用的部分API接口进行了说明。
优秀的Google Map API基本源码,值得学习!
很全的google map api v2版的开发实例,比较全,初学者的必备器
使用google地图的反向地址解析功能,提供一个经纬度得到对应地址,或者给出模糊地址,得到经纬度,放在java后台代码中处理,这个使用的是Google的地理编码服务。一般而言数据量不大的情况使用是不限制的。按照Google...