纯野：初学Google Maps API（一）

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chunye39/archive/2011/05/17/2048729.html

文章标签：

#javascript #php #xhtml #ViewUI

1、搭建Google Maps API开发环境

安装php集成开发环境WAMP5，这个在这里就不多做介绍了。大家按照“下一步”装上了就行。

2、为php开发环境添加GD2图形库

这里简要介绍一下：点击WAMP5在状态栏上的图标，一个仪表盘样的图标，然后在菜单中选择“PHP设置（H）”——》“PHP扩展（P）”——》“php_gd2”。选中以后，再“重新启动所有服务（Y）”就好。

3、配置客户端调试环境

这里也不多作介绍了，有一个能用的浏览器就成。

4、申请一个Google Maps API Key

申请的地址是：http://code.google.com/intl/zh-CN/apis/maps/signup.html

直接按照要求申请即可，一般地址为：http://localhost，这样便于在本地进行调试。

这里有三种API，一般使用第一个JavaScript的普通版本即可。三种申请到的API如下所示：

JavaScript 地图 API 示例

在 JavaScript 地图 API 中，您可以在载入 API 时将密钥放置在脚本标签中：

1 ... // Note: you will need to replace the sensor parameter below with either an explicit true or false value. <script src=" http://maps.google.com/maps?file=api &v=2&sensor=true_or_false&key=ABQIAAAA7WCoFy_M69l8GBPvx75XfRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRSx2gJ2-wGY6EGEv2vPR2sMTZDiw" type="text/javascript"></script>...

有关详细信息，请参见 JavaScript 地图 API 文档中的加载 Google Maps API。

Google Maps API（Flash 版）示例

在 Google Maps API（Flash 版）中，您可以将密钥放置在 MXML 声明中，也可以直接在代码中以 Map.key 属性的形式声明密钥，还可以在 HTML 容器中以 flashVars 属性的形式声明密钥。示例 MXML 声明如下所示。

1 ... < maps:Map xmlns:maps = " com.google.maps.* " id = " map " mapevent_mapready = " onMapReady(event) " width = " 100% " height = " 100% " key = " ABQIAAAA7WCoFy_M69l8GBPvx75XfRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRSx2gJ2-wGY6EGEv2vPR2sMTZDiw " /> ...

有关详细信息，请参见 Google Maps API（Flash 版）文档中的声明地图。

HTTP 服务示例

在 Google Maps API HTTP 服务（例如静态 Google Maps API 或地址解析服务）中，您可以直接将密钥放置在请求网址中：

1 http: // maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&oe=utf8\&sensor=true_or_false&key=ABQIAAAA7WCoFy_M69l8GBPvx75XfRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRSx2gJ2-wGY6EGEv2vPR2sMTZDiw

5、让地图跑起来！！！

编写如下代码：

1 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
2
3 < html xmlns = " http://www.w3.org/1999/xhtml " >
4
5 < head >
6
7 < meta http - equiv = " content-type " content = " text/html; charset=utf-8 " />
8
9 < title > Google Maps JavaScript API Example 谷¨¨歌¨¨地Ì ? 图ª ?</ title >
10
11 < script src = " http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAA7WCoFy_M69l8GBPvx75XfRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRSx2gJ2-wGY6EGEv2vPR2sMTZDiw " type = " text/javascript " ></ script >
12
13 < script type = " text/javascript " >
14
15 // <![CDATA[
16
17
18
19 function load() {
20
21 if (GBrowserIsCompatible()) {
22
23 var map = new GMap2(document.getElementById( " map " ));
24
25 map.setCenter( new GLatLng( 37.4419 , - 122.1419 ), 13 );
26
27 }
28
29 }
30
31 // ]]>
32
33 </ script >
34
35 </ head >
36
37 < body onload = " load() " onunload = " GUnload() " >
38
39
40
41 < div id = " map " style = " width:500px; height:300px " ></ div >
42
43
44
45 </ body >
46
47 </ html >

存为.html文件。我是在VS开发环境下写的，方便一些。

最后放到wamp的php的www的目录底下去，访问它。效果如下图所示：