地图步步为赢之hello world(google map api)

阅读更多

各位好!由于工作关系,自己对Google map api有点自己的心得,在接下来的日子,笔者准备写一系列关于Google map api教程。包括初级、中级、高级,以及自定义Google map api的教程。有兴趣的朋友可以看看,并且有意见及问题可以留言,我会进我最大可能解答各位问题。

首先:说说谷歌开放api的好处吧。从根本上理解开放api对网站、开发者、用户使用都有什么好处。

网站api提供者:这里包括大家熟知的谷歌、FaceBook、[size=x-small;]twitter、国内校内等等[/size]

最终用户:无论网站api提供者、第三方开发者目的都是为了为最终用户提供良好的体验,及粘性。

所以:开发平台是最终的趋势。
开始地图hello world之旅。

先介绍一下代码。下面即使一个事例。

 

  http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml
" xmlns:v="urn:schemas-microsoft-com:vml">
 
   
    Google 地图 JavaScript API 示例: 简单的地图
   
   
 
 
   


 

 

 

 即使在此简单的示例中,也需要注意五点:

1.加载 Google 地图 API

 

 http://ditu.google.cn/maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“abcdefg”。

2.承载地图的容器div。

3.GMap2 - 基本对象

var map = new GMap2(document.getElementById("map_canvas"));
GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)我们使用 JavaScript new 操作符创建此类的一个新实例。
关于GMap2的接口请参照

http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GMap2。 

4。初始化地图

map.setCenter(new GLatLng(39.9493, 116.3975), 13);

通过 GMap2 构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。

5.最后一步加载地图:

 

到这里地图应该可以正常运行了。其实谷歌地图很简单,具备javascript及html知识应该可以很快入手。

 

以上事例地址:http://code.google.com/intl/zh-CN/apis/maps/documentation/examples/map-simple.html

参考,下载都可以。

 

好的今天就到这里。有问题的朋友可以联系我.或者留言。

Email:[email protected]

QQ:469931718

 

你可能感兴趣的:(Google,JavaScript,QQ,Facebook,Twitter)