今天SIP讨论会，大家又提到了如何引入Google MAP这一类型的API,看来以后引入这一类型的API是很有可能的了。
所以今天我自己先预研一下，顺便也了解一下google是如何OPEN它的API的，还是有所心得的。我们通过简单的例子
来实现一下google的MAP API。
首先我们需要访问http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html 来了解开发Map
API的基本知识，从这个网页中我们知道在开发地图web应用的时候，需要为这个web应用生成一个key。我们的web应用是
本地的测试应用。
生成的方法在http://code.google.com/intl/zh-CN/apis/maps/signup.html的页面中有详细的介绍。下面我们就介绍一下
我们例子的源码
源码1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<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>
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(30.39391, 120.32214), 9);
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
}
}
//]]>
</script>
</head>
<body onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
</body>
</html>
上面的例子我们运行之后效果如下图
图一
通过div控件包容了gmap的控件. GMap2将google地图对象实例化，这样开发者就可以使用GMap2中所有的方法.接着代码中通过 map.addControl(new GOverviewMapControl());添加了一个小地图放大镜在右下角。
我们也可以通过addcontrol添加其他的控件如：GSmallMapControl()。地图缩放工具。
下面我们介绍一个比较常用的例子，地图搜索。
源代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Coder Page</title>
type="text/javascript"></script>
<script language="'Javascript'" type='text/javascript'>
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(30.39391, 120.32214), 13);
geocoder = new GClientGeocoder();
}
}
function showAddres(address)
{
alert(address + " not found");
}
function showAddress() {
addressq = document.getElementById("addr").value;
if (geocoder) {
geocoder.getLatLng(
addressq,
function(point) {
if (!point) {
alert(addressq + " not found");
} else {
map.setCenter(point, 10);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(addressq);
}
}
);
}
}
</script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<Input type="text" size="60" name="address" id="addr" value="beijing" />
<input type="button" value="Go!" return false"/>
</body>
</html>
执行上面的应用，即访问
会得到下面效果
你可以在inputbox输入你想查找的城市的名称，来搜索地图。
在这里getLatLng这个函数是关键，他可以根据你的地址找到你的坐标。然后根据坐标你可以setCenter。
通过上面的两个例子我大致了解了google的openAPI。主要特点是除了提供API还提供和这个服务相关联的大量好用的辅助类，并把业务对象很好的封装。
本文转自elbertchen 51CTO博客，原文链接：http://blog.51cto.com/linkyou/283202，如需转载请自行联系原作者