`
fly.net.cn
  • 浏览: 186471 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Google map API 介绍

阅读更多

 

 

GMap

GMap的每一个实例表现为页面上的一个地图,可以创建这个类的多个实例 每个地图被包含在一个container之中,比如一个DIV标签,除非明确指定,地图将使用相应container的大小.

GMap类提供了操作地图点(中心和缩放度)和添加删除标记(比如GMarkerGPolyline实例)和方法. 同时也提供了一个打开"信息浮窗"的方法,地图上同时只能有一个信息浮窗.

更多信息请参看GMap类参考

 

 

事件

利用事件监视器,你可以在程序中加入动态的内容,每个实例提供一些指定的事件,你的程序可以利用静态方法GEvent.addListenerGEvent.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.

评论
1 楼 youchengLin 2010-03-30  
不错,再详细点就更好了

相关推荐

    谷歌地图Google Map API V3中文开发文档

    本文档旨在为开发者提供一个详细的中文开发指南,介绍谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。 一、Google Maps JavaScript API V3 谷歌地图 Google Map API V3 是一个基于 ...

    Google Map API 使用示例

    Google Map API 是一款强大的工具,它允许开发者在自己的网站或应用程序中嵌入地图功能,提供定位、导航、地理编码、路线规划等多种服务。本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及...

    google map api学习

    下面将详细介绍谷歌地图API的一些关键知识点。 首先,你需要在Google Developers Console中注册一个项目,并启用Google Maps JavaScript API,获取API密钥。这个API密钥是连接你的应用和谷歌地图服务的桥梁,确保你...

    google map api开发源代码

    Google Map API是一个强大的工具,允许开发者在网页或应用程序中集成地图功能,进行各种定制和交互。这个源代码压缩包提供了一种实现Google Map API二次开发的实例,对于想要深入理解和应用这一技术的人来说非常有...

    GoogleMap API + ASP.NET(C#)

    在IT行业中,Google Map API 和 ASP.NET(C#)的结合应用是构建地理位置服务的重要技术组合。Google Map API 提供了丰富的地图展示和地理定位功能,而ASP.NET(C#)则是一个强大的Web应用程序开发框架,两者结合可以创建...

    GOOGLE MAPapi示例

    ### GOOGLE MAP API 示例知识点解析 #### 一、Google Maps JavaScript API 概述 Google Maps JavaScript API 是一个功能强大的工具包,允许开发者将交互式的地图嵌入到网页中。通过使用这个API,开发者可以轻松地...

    google map api 实现自定义mark和其移动

    google map api 实现自定义mark和其移动

    google map api v3.18.0 离线开发包

    总的来说,"google map api v3.18.0 离线开发包"为开发者提供了在无网络环境下使用谷歌地图API的功能,使得地图服务在多种场景下都具备了可行性。通过熟练掌握和应用这个API,开发者可以创建出丰富多样的地图应用。

    Google Map Api

    Google Map API 是一款由谷歌公司提供的强大工具,用于在网页或移动应用中集成地图功能。这个API允许开发者将交互式地图集成到他们的网站或应用程序中,提供定位、导航、地理编码、路线规划等多种功能。最新版的...

    Google Map Api 调用样例程序(Java版)

    在IT行业中,Google Map API是一个广泛使用的工具,它允许开发者集成地图功能到自己的应用程序中,无论是Web应用还是桌面应用。本示例程序是基于Java语言实现的,它为我们展示了如何利用Google Map API来画点和画线...

    google map api 最新参考文档

    google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    Google Map API获取地理位置信息

    在IT领域,Google Map API是开发人员常用的工具之一,它允许我们通过JavaScript编程语言与Google Maps服务进行交互,获取和处理地理位置信息。本篇文章将详细探讨如何利用Google Map API来获取地点的经纬度坐标以及...

    GoogleMap Api二次开发+Asp.Net+数据库+GPS

    在本实例中,我们主要探讨如何使用GoogleMap API进行二次开发,并结合Asp.Net、数据库以及GPS技术,创建一个功能丰富的Web应用。首先,我们来深入理解这些关键知识点。 1. GoogleMap API: GoogleMap API是Google...

    Google Map API基本源码

    Google Map API是一个强大的工具,它允许开发者在网页或应用程序中集成地图功能,提供导航、定位、地理编码等服务。这个“Google Map API基本源码”很可能是为了帮助初学者理解和应用这一API而准备的示例代码集合。...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    Google Map API 使用详解

    本文档将详细介绍如何使用 Google Map API,并解答一些常见问题。 #### 二、Google Map API 开发背景知识 ##### 2.1 谷歌地图主页 谷歌地图针对不同地区提供专门的主页入口。例如,香港地区为 `...

    介绍优秀Google Map API的网站

    - **基础知识**: 介绍了Google Map API的基本概念和工作原理。 - **案例分享**: 分享了一些实际应用场景,比如如何在网页上嵌入地图,并进行简单的交互操作。 - **代码示例**: 提供了具体的代码示例,帮助开发者...

    谷歌地图API-google map api v3

    通过本文的介绍,我们详细了解了谷歌地图API V3的各个组成部分以及如何使用这些组件来创建丰富的地图应用。无论是基本的地图显示,还是复杂的路线规划和地理编码功能,谷歌地图API V3都为开发者提供了强大而灵活的...

    基于Google Map API的简单地图

    在IT行业中,Google Map API是一个强大的工具,它允许开发者集成地图功能到他们的应用程序中,提供丰富的地理定位服务。本文将详细解析如何利用Google Map API实现"基于Google Map API的简单地图"的功能,包括显示...

Global site tag (gtag.js) - Google Analytics