`
碧血剑
  • 浏览: 217399 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

地图步步为赢之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之旅。

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

 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例: 简单的地图</title>
    <script src="
http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script>
    <script type="text/javascript">
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.917, 116.397), 14);
      }
    }
 
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

 

 

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

1.加载 Google 地图 API

<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
        type="text/javascript"></script>

 

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

2.承载地图的容器div。
<div id="map_canvas" style="width: 500px; height: 300px"></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.最后一步加载地图:

<body onload="initialize()" onunload="GUnload()">

 

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

 

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

参考,下载都可以。

 

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

Email:stev.wise@gmail.com

QQ:469931718

 

分享到:
评论

相关推荐

    google map api学习

    谷歌地图API(Google Maps API)是谷歌提供的一套强大的开发工具,允许开发者在自己的网站或应用中嵌入交互式地图,实现地理位置相关的功能。通过学习谷歌地图API,你可以创建定制的地图,添加标记、路径、信息窗口...

    google map api v3源码

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

    google地图api文档

    2. Google 地图的“Hello, World” 要使用 Google 地图 API,首先需要加载 Google 地图 API。加载 Google 地图 API 需要在 HTML 文件中添加一行 JavaScript 代码,用于加载 Google 地图 API。例如:...

    GOOGLE MAPapi示例

    map.openInfoWindow(point, document.createTextNode("Hello World")); } } ``` - **`addControl()`**: 为地图添加控件,如缩放控件和地图类型选择控件。 - **`new GLatLng()`**: 创建一个新的地理坐标点。 - **...

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

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

    OpenWrt之helloworld程序

    在这个"OpenWrt之helloworld程序"中,我们将探讨如何在OpenWrt环境中编写、编译和运行一个简单的 HelloWorld 程序,这将帮助初学者了解OpenWrt的开发流程。 首先,`helloworld` 文件通常是一个C或C++源代码文件,...

    hello world hello world

    标题中的“hello world hello world”和描述中的“hello world”似乎是在引用计算机编程中的经典入门程序,通常用于演示一个语言的基本输出功能。在大多数编程语言中,“Hello, World!”是初学者编写的第一个程序,...

    google map API 的应用

    Google Map API 是一套强大的工具,允许开发者在网页或应用程序中集成 Google 地图的功能。这个API提供了丰富的接口和功能,可以实现地图的展示、定位、路线规划、标记添加、信息窗口等众多操作。本文将深入探讨...

    openwrt可用helloworld程序

    2. 编写源代码:在`src`目录下创建一个名为`helloworld.c`的C语言源文件,内容如下: ```c #include int main() { printf("Hello, World!\n"); return 0; } ``` 3. 配置Makefile:`Makefile`应包含以下内容,...

    Helloworld_helloworld_

    在编程世界中,"Hello, World!"程序是一个经典的起点,用于教授新手如何在特定的编程语言中编写并运行他们的第一个程序。这个简单的程序通常只包含一行代码,用于在控制台上打印出 "Hello, World!" 这个字符串。在这...

    JNI入门之HelloWorld(一)

    ### JNI入门之HelloWorld(一)详解 #### 一、引言 JNI(Java Native Interface)是Java平台标准的一部分,它允许Java代码与其他语言写的代码进行交互。JNI接口提供了若干公共服务,并为Java虚拟机和本机应用程序或...

    SSH +hello world

    在上面的代码中,我们使用高德地图API在地图上显示Hello World,并实现了地图的基本操作。 我们可以使用SSH连接服务器,输出Hello World,并在地图上显示Hello World。同时,我们也可以使用高德地图API在地图上显示...

    Google_Map_API谷歌地图

    基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 ...Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图

    google map api地图

    亲自测试ok,下载下来直接点击 helloworld.html 即可。其他若无法访问,在div 加上 样式即可。简单易上手&lt;div id="map_canvas" style="height:90%;top:30px"&gt;&lt;/div&gt;

    Google Map API

    Google Map API 是一款由谷歌公司提供的开发者工具,它允许开发者在自己的网站或应用中集成谷歌地图功能。通过这个API,用户可以创建自定义的地图服务,包括显示地图、定位、路径规划、标注点以及各种交互式功能。...

    Hello World.rar_c++ hello world_world

    这将生成一个名为 "HelloWorld" 的可执行文件,运行它就会在终端看到 "Hello, World!"。 了解了基础的 "Hello, World!" 程序后,你可以逐步学习C++的其他核心概念,如变量、数据类型、运算符、流程控制(条件语句、...

    google map api 小列子

    谷歌地图API是一个强大的工具,允许开发者在网页或应用程序中集成地图功能。这篇博客"google map api 小列子"可能是作者分享的一个简单的示例,教读者如何使用Google Maps API进行基本操作。虽然没有具体的描述,...

    Google_Map_API谷歌地图.ppt

    2. **“Hello, World”**:加载API的基本步骤包括在HTML文件中引入API库,设置API密钥,并定义地图容器,初始化地图。 3. **地图DOM元素**:地图显示在HTML页面的一个特定元素(通常是div)中。 4. **GMap2**:这是...

    Hello_World.zip_hello world _world

    标题中的"Hello_World.zip_hello world _world"和描述中的"hello world prog for begginer"都指向了一个经典的编程入门示例——“Hello, World!”程序。这个简单的程序是许多编程语言教学的第一课,用于向初学者介绍...

Global site tag (gtag.js) - Google Analytics