Google地图API教程资源-CSDN文库

需积分: 10 146 浏览量 2011-01-11 22:05:00 上传评论收藏 1.36MB PDF 举报

### Google地图API教程知识点 #### 一、Google地图API概览 - **API用途与应用场景**：Google地图API是一套强大的工具集，旨在帮助开发者在网站或应用中集成Google地图功能，实现地理位置服务、路径规划等多种功能。适用于旅游、物流、房地产等众多行业。 - **API版本**：当前教程主要介绍的是V2版本，后续Google推出了更先进的V3版本，提供更多功能和优化。 #### 二、开发准备 - **API密钥获取**：开发者需要在Google Cloud Platform控制台注册并获取API密钥。注册时可能需要提供个人信息和项目信息。 - **兼容性检查**：通过`GBrowserIsCompatible()`函数检查浏览器是否支持Google地图API。 #### 三、创建第一个地图应用：“Hello, World” - **HTML结构**：页面中包含一个`<div>`元素作为地图容器，通过`id`属性指定，以便JavaScript可以找到它。 - 示例代码中`<div id="map_canvas" style="width:500px;height:300px"></div>`定义了一个宽500像素高300像素的地图容器。 - **JavaScript代码**： - 加载API：通过`<script>`标签加载Google地图API，需包含API密钥和传感器参数。 ```html <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false" type="text/javascript"></script> ``` - 创建地图对象：使用`GMap2`构造函数创建地图对象。 ```javascript var map = new GMap2(document.getElementById("map_canvas")); ``` - 设置地图中心点：调用`setCenter`方法设置地图的中心点。 ```javascript map.setCenter(new GLatLng(39.9493,116.3975), 13); ``` - 初始化地图：通过`onload`事件监听器调用`initialize`函数来加载地图。 ```html <body onload="initialize()" onunload="GUnload()"> ``` #### 四、深入理解关键概念 - **地图容器（DOM元素）**：必须为地图创建一个`<div>`元素，并设置宽度和高度，这决定了地图的大小。 - **地图对象（GMap2）**：表示地图的主要JavaScript对象，可以通过这个对象控制地图的各种行为，如缩放、移动等。 - **地理坐标（GLatLng）**：用于表示地球上的点，由纬度和经度组成。在示例中，`new GLatLng(39.9493,116.3975)`表示北京故宫的位置。 - **地图层级（Zoom Level）**：控制地图的放大级别，数值越大地图越放大，范围一般在1到20之间。 - **初始化与加载**：通过JavaScript函数初始化地图对象，并设置必要的属性，然后通过`onload`事件触发地图加载。 #### 五、进阶技巧 - **自定义样式**：可以自定义地图的样式，包括背景色、标记图标等。 - **地图事件处理**：利用JavaScript监听地图上的各种事件，如点击、拖拽等，实现交互式功能。 - **信息窗口**：向用户提供额外的信息，例如地点名称、描述等。 - **路径规划与方向指示**：根据起点和终点计算最优路径，并在地图上显示出来。 #### 六、注意事项 - **密钥安全**：确保在生产环境中不泄露API密钥，可以使用HTTPS协议提高安全性。 - **性能优化**：合理设置地图的初始状态（如层级、中心点），减少不必要的API请求。 - **用户体验**：考虑不同设备和屏幕尺寸，确保地图在各种情况下都能良好显示。通过以上知识点的学习，开发者可以更好地理解和掌握如何使用Google地图API构建功能丰富的地图应用。

资源推荐

资源详情

资源评论

开发人员指南

地图基础知识



简介



Google 地图的“Hello, World”



加载 Google 地图 API



地图 DOM 元素



GMap2 - 基本对象



初始化地图



加载地图



经度和纬度



地图属性



地图交互



信息窗口

简介

任何 Google 地图 API 应用程序中的基础元素都是“地图”本

身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知

识。

Google 地图的“Hello, World”

开始学习 Google 地图 API 最简单的方式是看一个简单的示

例。下面的网页显示以北京的故宫博物院为中心的 500x300 的

地图。

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

charset=utf-8"/>

<title>Google Maps JavaScript API Example</title>

<script

src="http://ditu.google.cn/maps?file=api&v=2&key=abcde

fg&sensor=

true_or_false

type="text/javascript"></script>

false。

地图 DOM 元素

要让地图在网页上显示，必须为其留出一个位置。通常，我们通

过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中

获取此元素的引用执行此操作。

在上述示例中，我们定义名为“map_canvas”的 div，并使用样

式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，

除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。

GMap2 - 基本对象

var map= new GMap2(document.getElementById("map_canvas"));

GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定

义单个地图。（可以创建此类的多个实例，每个对象将在页面上

定义一个不同的地图。）我们使用 JavaScript new 操作符创建此

类的一个新实例。

当创建新的地图实例时，在页面中指定一个 DOM 节点（通常

是 div 元素）作为地图的容器。HTML 节点是 JavaScript

document 对象的子对象，而且我们通过

document.getElementById() 方法获得该元素的引用。

此代码定义了一个变量（名为 map），并将新 GMap2 对象赋值

给该变量。函数 GMap2() 称为“构造函数”，其定义（在 Google

地图 API 参考中简述）如下所示：

构造函数说明

GMap2(contai

ner, opts?)

在通常是一个 DIV 元素的指定 HTML

container

内创建新地图。您也可以通过

opts

参

数传递 GMap2Options 类型的可选参数。

请注意因为 JavaScript 是松散类型的语言，我们可以不填写构造

函数的任何可选参数，此处也未这样做。

初始化地图

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

通过 GMap2 构造函数创建地图后，我们需要再做一件事：将其

初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方

法要求有 GLatLng 坐标和缩放级别，而且必须先发送此方法，

然后再在地图上执行其他任何操作，包括设置地图本身的其他任

何属性。

加载地图

当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收

其他外部图像和脚本并将其合并到 document 对象中。为确保我

们的地图仅放置在完全加载后的页面上，我们仅在 HTML 页面

的 <body> 元素收到 onload 事件后才执行构造 GMap2 对象

的函数。这样做可以避免出现不可预期的行为，并使我们可以对

地图绘制的方式和时间进行更多控制。

onload 属性是事件处理程序的示例。Google 地图 API 还提供了

大量事件可以用来“监听”状态变化。请参阅地图事件和事件监

听器以了解更多信息。

GUnload() 函数是用来防止内存泄漏的实用工具函数。

经度和纬度

既然现在已经有地图了，我们还需要一种方法来引用地图上的位

置。在 Google 地图 API 中，GLatLng 对象提供了此类机制。

可以构造一个 GLatLng 对象，按照制图学的惯例以 {经度, 纬

度} 的顺序传递参数：

var myGeographicCoordinates= new GLatLng(myLatitude,

myLongitude)

注意：将“地址”转变为地理点的过程称为“地址解析”，将在

“Google 地图 API 服务”部分中详细讨论。

就像它可用于轻松地引用地理点一样，它也可用于定义对象的地

理边界。例如，地图在称为视口的窗口内显示整个世界的当前“窗

口”。此视口可以通过四个角上的矩形点来定义。GLatLngBounds

对象提供了这个功能，通过使用分别表示边界框的西南角和东北

角的两个 GLatLng 对象定义一个矩形区域来实现。

GLatLng 对象在 Google 地图 API 中用途广泛。例如，GMarker

对象在其构造函数中具有 GLatLng，并在地图上的指定地理位置

放置标记“叠加层”。

下面的示例使用 getBounds() 返回当前视口，然后在地图上的这

些边界内随机放置 10 个标记：

function initialize() {

var map= new GMap2(document.getElementById("map_canvas"));

剩余114页未读，继续阅读

评论收藏

内容反馈

liugf1966

粉丝: 0
资源: 2

Google地图API教程

Google 地图 api教程

Google 地图API教程

google地图API教程

Google地图API教程.doc

Google地图API教程_超详细

Google地图API教程v2

Google地图Api教程

google地图api

Google 地图 API

Google 地图获取API Key详细教程

google地图应用实例

Google地图API教程.pdf

Google地图API教程借鉴.pdf

google map api v3.18.0 离线开发包

[免费]百度谷歌地图API学习链接网址.rar

Google 地图 google map api / 地图有关

Google Maps API编程资源大全

google的API接口

google 地图 实现讲解

Google地图调用

谷歌地图开发教程

Google 地图 API 参考

google map api 及范例

blueplaques:谷歌地图API教程

Google Map API Related

最新资源

google 地图实现讲解