开发人员指南
地图基础知识
简介
Google 地图的“Hello, World”
加载 Google 地图 API
地图 DOM 元素
GMap2 - 基本对象
初始化地图
加载地图
经度和纬度
地图属性
地图交互
信息窗口
简介
任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。
Google 地图的“Hello, World”
开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。
<!DOCTYPE html "-//W3C//DTD XHTML Strict//EN"
"/xhtml1/DTD/xhtml1-">
<html xmlns="9/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://ditu./maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/
javascript">
function initialize() {
if (patible()) {
var map= new GMap2(("map_canvas"));
(new GLatLng(, ), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
您可以查看此示例及下载、编辑和调试该示例,但必须将该文件中的密钥替换为您自己的 Google 地图 API 密钥。(如果注册了特定目录的密钥,也可以将其用于所有子目录。)
即使在此简单的示例中,也需要注意五点:
使用 script 标签包含 Google 地图 API JavaScript。
创建名为“map_canvas”的 div 元素来包含地图。
编写 JavaScript 函数创建“map”对象。
将地图的中心设置为指定的地理点。
从 body 标签的 onLoad 事件初始化地图对象。
下面说明了这些步骤。
加载 Google 地图 API
<script src="http://ditu./maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript">
</script>
http://ditu./maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“abcdefg”。
请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。
地图 DOM 元素
<div id="map_canvas" style="width: 500px; height: 300px"></div>
要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型(DOM) 中获取此元素的引用执行此操作。
在上述示例中,我们定义名为“map_canvas”的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。
GMap2 - 基本对象
var map= new GMap2(("map_
Google地图API教程 来自淘豆网www.taodocs.com转载请标明出处.