GooglemapAPI教程.docx资源-CSDN文库

版权申诉

127 浏览量 2022-07-09 10:42:30 上传评论收藏 225KB DOCX 举报

《Google Maps API 教程详解》在Web开发中，集成地理位置信息是常见的需求，而Google Maps API提供了强大的工具，让开发者能够轻松地在网页上嵌入交互式地图。本教程将详细介绍如何使用Google Maps API，从基础概念到具体实践，帮助你构建属于自己的地图应用。让我们了解Google Maps API的“Hello, World”示例。这是一个简单的HTML页面，展示了如何在网页上加载以北京故宫博物院为中心的地图。核心代码如下： ```html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Google Maps JavaScript API Example</title> <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false" 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.9493, 116.3975), 13); map.enableScrollWheelZoom(); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html> ``` 1. **加载Google Maps API**：使用`<script>`标签引入API的JavaScript文件，其中`key`参数是开发者申请的API密钥，`sensor`参数表示应用是否使用传感器来定位。 2. **创建地图容器**：创建一个`<div>`元素，用于展示地图。`id`属性为"map_canvas"，并设定宽度和高度。 3. **初始化地图**：`initialize`函数中，创建`GMap2`对象，传入`document.getElementById("map_canvas")`作为参数，表示地图将在该`div`元素内显示。然后，`setCenter`方法设置地图的中心位置，参数为经纬度对（GLatLng对象）和缩放级别。 4. **地图交互**：`enableScrollWheelZoom`启用鼠标滚轮缩放地图功能。这个示例展示了使用Google Maps API的基本流程，但实际应用中，你还可以添加更多的交互特性，如标记、信息窗口、路线规划等。 **地图属性**： - **经纬度**：地图上的位置由经度和纬度坐标表示，如上述示例中的39.9493, 116.3975。 - **地图类型**：可以设置为卫星图、地形图或混合图等。 - **地图事件**：响应用户的点击、拖动等交互，可以绑定各种事件处理器。 - **覆盖物**：包括标记（Marker）、信息窗口（InfoWindow）等，可以添加自定义图标和内容。 **地图交互**： - **缩放**：可以通过鼠标滚轮、控制按钮或设定级别进行缩放。 - **平移**：用户可以拖动地图改变视角。 - **旋转**：某些版本的API支持地图的倾斜和旋转。 - **街景视图**：用户可以进入街景模式，查看360度全景。 **信息窗口**：信息窗口是一种在地图上显示附加信息的弹出框，常用于展示标记的详细信息。创建信息窗口通常需要创建InfoWindow对象，设置内容和位置，然后调用open方法使其可见。总结，Google Maps API提供了丰富的功能，允许开发者创建各种复杂的地图应用。通过深入学习和实践，你可以利用它实现动态定位、路径规划、地图标记等多种功能，为用户提供直观且富有互动性的地图体验。记得在使用API时，要遵守Google的使用条款，及时更新API版本，确保应用的稳定性和兼容性。

资源推荐

资源详情

资源评论

开发人员指南

地图基础知识

�

简介

�

Google 地图的“Hello,World ”

�

加载 Google 地图 API

�

地图 DOM 元素

�

GMap2- 基本对象

�

初始化地图

�

加载地图

�

经度和纬度

�

地图属性

�

地图交互

�

信息窗口

简介

任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础

对象的用法和地图操作的基础知识。

Google 地图的“Hello,World ”

开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的

故宫博物院为中心的 500x300 的地图。

<!DOCTYPEhtml"-//W3C//DTDXHTML1.0Strict//EN"

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

<head>

<title>GoogleMapsJavaScriptAPIExample </title>

<script

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

rue_or_false

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

<scripttype="text/ javascript">

function initialize() {

if (GBrowserIsCompatible()) {

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

要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为 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(container,

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 还提供了大量事件可以用来“监

地图属性

默认情况下，在 Google 地图 API 中，地图使用标准的“绘制”图块显示。但是，Google 地

图 API 也支持其他地图类型。以下是标准地图类型：

�

G_NORMAL_MAP- 默认视图

�

G_SATELLITE_MAP- 显示 Google 地球卫星图像

�

G_HYBRID_MAP- 混合显示普通视图和卫星视图

�

G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有

用

可以使用 GMap2 对象的 setMapType() 方法设置地图类型。例如，下面的代码将地图设置

为使用 Google 地球的卫星视图：

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

map.setMapType(G_SATELLITE_MAP);

地图还包含对了解情况非常有用的大量属性。例如，要了解当前视口的尺寸，可使用 GMap2

对象的 getBounds() 方法来返回 GLatLngBounds 值。

每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。在普通地图视图内，可以

使

用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立

建筑物）之间的缩放级别。缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地

区更详细。在卫星视图中可以使用多达 20 个缩放级别。

可以通过使用 GMap2 对象的 getZoom() 方法检索地图当前使用的缩放级别。

关于缩放级别、地图图块以及创建自己的自定义地图类型的更多信息，请参阅图块叠加层部分

。

地图交互

既然现在有了 GMap2 对象，就可以与之进行交互了。基本地图对象的外观和行为与您在

Google 地图网站上交互的地图非常相似，并带有大量内置行为。GMap2 对象还提供了大量

配置方法来改变地图对象本身的行为。

默认情况下，和在 http://ditu.google.cn 上一样，地图对象会对用户的活动做出反应。但您

可以使用大量实用工具方法改变此行为。例如，GMap2.disableDragging() 方法禁止了点击

并拖拽地图到新位置的功能。

您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如，

setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图，而不是通过用户交互来操作地

图。

下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。panTo 方法将地图中心设

置在指定点处。如果指定点位于地图的可见部分，则地图会平稳地平移到该点，否则会跳至该

点。

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

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

剩余57页未读，继续阅读

评论收藏

内容反馈

版权申诉

Cheng-Dashi

粉丝: 106
资源: 1万+

GooglemapAPI教程.docx

Google地图API教程.doc

Google地图API教程

Google地图Api教程

谷歌地图api

google map api

安卓Android源码——写的googlemapapi应用.zip

GoogleMapAPI在网络地图服务中的应用

GoogleMapAPI3.30版本离线开发包.rar

Googlemap_API教程

googlemapapi

google地图 API

Google 地图 API

GoogleMapAPI

googlemap教程说明

googleMapAPI v3离线版

GoogleMapApi_Line 画线

GoogleMapAPI3离线地图v3.30.4更新日期2017912

google maps api PHP版本

Google API文档

google map api 使用文档

Google Maps API.pdf

GoogleMapApi中文文档

google map api 最新参考文档

GoogleMapAPI3.8.6

一个简单的Android实现GoogleMapApi v2展示Demo

谷歌离线API 3.16.2包含实例

根据GoogleMapApi给出地名获取经纬度，给出经纬度获取地名（Java版本）

最新资源