Google Map Api文档,免费Google地图API使用说明

Google Maps API可以让你在自己的网页之中嵌入免费的Google电子地图. 在此之前,你只需要 申请一个API授权码,而这是免费的.

因为Google Maps API是还在测试之中的程序,可能有些Bug,并且功能上也有一些欠缺. 你可以到Google Maps API讨论组给出你的意见.

特别提示:如果您的英文还马虎,建议您直接看google官方最新的Google Maps API Documentation : The Google Maps API lets developers embed Google Maps in their own web pages with JavaScript. You can add overlays to the map (including markers and polylines) and display shadowed "info windows" just like Google Maps.

Google Maps API 中文使用说明文档

本文来源于GoogleStep1.cn翻译并整理

导言

Google Maps的"Hello World"

看简单的例子是开始学习API的最有效的方法,这个网页在层上居中显示了一个300x300的地图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
}

//]]>
</script>
</body>

</html>

你可以点这儿预览这个例子的效果,不过在你上传到自己的网站上运行之前,你必须把其中的"&key="之后的授权码换成自己在Maps API key申请的授权码,否则看不到效果.本网站使用的范例中的授权码只能在Step1.cn域名上使用。

你可以看到,Google Maps使用了一个JavaScript文件(http://maps.google.com/maps?file=api&v=1) 这个文件包含了你在自己的网页上显示Google地图的所有的函数和类. 想要在自己的网页上使用Google Maps API,你必须在网页上通过script标签连接一个包含你申请的授权码的URL:

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>

Google Maps API提供的最重要的类是GMap,它代表页面上的地图对象, 你可以根据需要在页面上使用多个GMap的实例 每个地图被包含在一个HTML的容器(container)里面,比如DIV标签.

下面会讲到如何给地图实例添加和操作标注.

浏览器兼容性

Google Maps并不是对每一个浏览器都兼容的, Google Maps 现在兼容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera,不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的, 所以Maps API提供了一个全局的方法(GBrowserIsCompatible())来检查浏览器兼容性, 但是并不自动检查. 引入的脚本http://maps.google.com/maps?file=api&v=1可以在几乎所有的浏览器中被正常解析, 所以你可以放心的在检查浏览器兼容性之前引入该脚本.

在本文的所有例子之中,除了上面的一篇之外,其他的既没有用GBrowserIsCompatible()检查浏览器兼容性,也没有给出任何错误信息 正式使用的程序上应该有更加友好的处理方法,这里为了让这些例子更加易懂,而忽略了浏览器检查.

XHTML和VML

建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在DOCTYPE标签时,浏览器会使用"标准兼容模式"来处理页面, 这将使页面能更好的跨越浏览器执行.

同样,如果你需要在地图上包含折线,你需要为IE浏览器在页面上引入VML命名空间 这样,你的文档开头就应该是这样的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
</head>

关于VML,你可以在Microsoft's VML workshop查找更多信息.

API更新

引入的JavaScript文件URLhttp://maps.google.com/maps?file=api&v=1指向到 API 的"版本1", 如果API出现了重要的升级,会增加这个版本号并且在Google CodeMaps API讨论组上面发布公告.

Google会同时运行新版和旧版一个月左右,随后旧版就会被关闭.

地图工作小组会在修复BUG或改善性能之后随时更新API,这些更新仅仅是为了改善性能和修复错误,不过在这个工程之中也可能发生影响API连接的情况 如果这样的事情发生,你可以到Maps API discussion group报告你遇到的情况

地理、行程和其他

Google Maps API现在并不包含地理和 行程服务,可在网上有许多关于free geocoders的相关内容.

应用范例

一个简单例子

创建一个在所在层中居中的地图

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(simple.html)

地图的移动和变换

recenterOrPanToLatLng 方法进行一个地图变换,目标点经/纬在当前视口之中时执行一个连续的动作,否则,执行不连续的变换动作

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);
查看范例(animate.html)

在地图上添加控件

addControl方法可以在地图上添加控件,并且集成了GSmallMapControl(用来缩放和移动图片)和GMapTypeControl(用来在地图和卫星图模式间切换)两个控件.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

加支付宝好友偷能量挖...


评论(0)网络
阅读(207)喜欢(0)Google Maps开发