纯野：初学Google Maps API（一）
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的目录底下去，访问它。效果如下图所示：
纯野博客（http://www.chunye39.com）原创文章，转载请注明出处，谢谢合作。
