Google map API 介绍

阅读更多

 

 

GMap类

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.