您的位置：首页 > 编程语言 > Go语言

纯野：初学Google Maps API（一）

2011-05-17 12:44 218 查看

[b]1、 搭建Google Maps API开发环境[/b]

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

[b]2、 为php开发环境添加GD2图形库[/b]

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

[b]3、 配置客户端调试环境[/b]

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

[b]4、 申请一个Google Maps API Key[/b]

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

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

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

JavaScript 地图 API 示例

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

...  // 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>...

[/code]

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

Google Maps API（Flash 版）示例

在 Google Maps API（Flash 版）中，您可以将密钥放置在 MXML 声明中，也可以直接在代码中以

Map.key

属性的形式声明密钥，还可以在 HTML 容器中以

flashVars

属性的形式声明密钥。示例 MXML 声明如下所示。

...  <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 或地址解析服务）中，您可以直接将密钥放置在请求网址中：

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[/code] 
[b]5、  让地图跑起来！！！[/b]

编写如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Google Maps JavaScript API Example  谷¨¨歌¨¨地Ì?图ª?</title>

<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>

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

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

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

}

}

//]]>

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style=" width:500px; height:300px"></div>

</body>

</html>


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

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



纯野博客（http://www.chunye39.com）原创文章，转载请注明出处，谢谢合作。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航