52Maps.com
“我爱地图” 在线电子地图(卫星地图、行政地图)
Google Maps和Web应用程序的整合
编辑日期：2005/9/12 10:58:00
目前，随着web平台的日渐成熟，越来越多的新技术如雨后春笋般出现，将我们的应用提升到新的高度。目前最吸引全世界web应用开发者眼球的技术就是AJAX模型，它是Asynchronous JavaScript + XML的缩写。它揭示了目前Web开发社区的目标是创造和基于桌面系统的应用一样丰富和相同响应方式的Web应用，却可以使用多种浏览器方便的访问。
AJAX模型的一个著名应用就是Google Maps。你可以在http://maps.google.com上充分的使用它，并且惊讶于它的快速缩放能力和拖动能力。那么能不能把它强大的能力结合到你自己的应用程序里呢，这样不但你可以使用到它那强大的数据库，也可以使用它非常cool的界面。
你也许会惊讶Google已经提供了一个免费的API，使得你很容易实现以上的想法。只要你同意使用规定，并且不要未经允许使得页面拥有超过每天50000的浏览量，你可以随意在自己的web站点使用Google的地图技术。本文将介绍如何实现这一点，尤其你将学会如何将地图集成到页面里，给用户标识出感兴趣的地点，甚至可以在点击某个关联的图标时给出一个地点相关的描述。目前使用Google这项技术的有http://www.chicagocrime.org/ ，http://www.housingmaps.com/ 等等。
系统需求
使用Google Map API，你无需其他特别的web开发工具，所需的仅是文本编辑器，Web浏览器，和一个保存写好的web页面和脚本的web服务器。注意这里必须使用公开的web服务器，你不能使用内部服务器，因为每个请求都必须和Google Map的服务器交互。你需要在Google上注册并获取一个API的Key来使用，注意先访问这个站点了解相关的使用规则和申请方式：
http://www.google.com/apis/maps/signup.html
你需要将key和你的脚本进行集成以正确创建和显示你所需要的地图。
第一个地图
使用Google Map非常简单，只需要短短几行代码即可。你可以将以下的代码存储为HTML文件，并且将ADD_YOUR_KEY_HERE替换成你得到的API的Key，然后上传到自己的web服务器上。＜!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＞
＜script src="http://maps.google.com/maps?file=api&v=1 &key=ADD_YOUR_KEY_HERE" type="text/javascript"＞
＜/script＞
＜/head＞
＜body＞
＜div id="map" style="width: 400px; height: 300px"＞＜/div＞
＜script type="text/javascript"＞
//＜![CDATA[ var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3); //]]＞
＜/script＞
＜/body＞
＜/html＞
访问web服务器上的这个html文件，你在浏览器中看到俄亥俄州立大学的地图：
在以上的脚本里有4个关键的地方，以下的代码片断是使得你可以使用Google Map服务的，但是你必须提供你自己的API Key：
＜script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript"＞下面一些代码规定了html页面中页面的显示大小：长度，宽度。你可以把它放置到页面文件中的任何一行，使用表格和CSS都可以：
＜div id="map" style="width: 400px; height: 300px"＞＜/div＞＜script type="text/javascript"＞下面的代码创建一个GMap的对象（从Goolge的JavaScript脚本中的一个类进行实例化），使用它操纵其他的显示和控制部分：
var map = new GMap(document.getElementById("map"));最后，显示的地图的中心的经度是-83.022206和纬度39.998264。Gpoint的构造器的第二个参数是表明地图的俯视高度，1是最低的高度，16是最高的高度。
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);如果要显示一个位置的地图，就必须知道其经纬度。目前Google还没有提供将某个地址转化为其经纬度的服务，你可以使用其他的一些网站的服务，比如http://geocoder.us/（美国的地址转经纬度服务网站）。
控制地图行为
如果你仔细研究一下上例里的地图，你会发现它是缺省可拖动的。如果你在地图上按下鼠标并且移动，会导致地图的重定位并刷新显示区域。使用如下代码可以关掉这一功能：
map.disableDragging();熟悉Goolge地图的你也许会发现Goolge提供的放大缩小调节杆和位置调节按钮不可用。这是缺省关闭的，你加上一句代码就可以添加上它了：
map.addControl(new GLargeMapControl());
这里还有其他的几个控制选项，我将列出：
·GMapTypeControl:提供Google地图和卫星图片的切换功能
·GLargeMapControl: 放大缩小调节杆和位置调节按钮
·GSmallMapControl: GLargeMapControl的精简版，去掉了缩放的调节杆保留了缩放按钮
·GSmallZoomControl:只包括缩放按钮，去掉了GLargeMapControl里其他的所有控制。
添加特殊地点标识
地图本身还是很有用的，但是是不是能加入一些地点标识以标识出感兴趣的特殊地点呢？是的。你可以先实例化一个包含经纬度信息的Gpoint()对象，然后创建一个基于它的GMarker对象，最后加入到地图上来。如下的代码把俄亥俄州州立大学的计算机科学与技术系标识出来了：
var point = new GPoint(-83.015522, 40.002068);
var marker = new GMarker(point);
map.addOverlay(marker);
注意你必须把以上代码加入到执行了居中和缩放的代码之后，否则就会出错。结果图如下：
增加好几个不同地点的标识也可以。比如一个学生想可视化的看一下上课的地点，下面的代码给出了校园里的Dreese实验室，Gerlach礼堂和学校礼堂：// Fisher Hall
var point = new GPoint(-83.014734, 40.005403);
var marker = new GMarker(point);
map.addOverlay(marker);
// Dreese Labs
var point = new GPoint(-83.015522, 40.002068);
var marker = new GMarker(point);
map.addOverlay(marker);
// University Hall
var point = new GPoint(-83.013307, 40.000610);
var marker = new GMarker(point);
map.addOverlay(marker);
结果如下：
加入控制缩放和位置的按钮和操纵杆之后，会更加的清楚和明晰：
加入地点说明
俄亥俄州立大学是全世界最大的校园之一，高年级的同学也许都需要经常问路。如果新生来得话，他到哪里去找具体一幢楼的信息呢？Google Map提供了信息提示的功能，只要你点击响应位置的图标，就会出现一个信息提示框，表明相关位置信息。下面就是一个例子：
代码看起来比上面的麻烦，但是也不是非常复杂。我创建了一个JavaScript函数createInfoMarker()，使用GMarker对象，和一个包含地点信息的HTML字符串作为两个参数。下面就是和上面3个位置相关的描述信息的代码：// Create the marker and corresponding information windowfunction createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(address);
} );
return marker;
}
// Gerlach Hallvar
point = new GPoint(-83.014734, 40.005403);
address = "Gerlach Hall＜br /＞2108 Neil Avenue ＜br /＞Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);
// Dreese Labsvar
point = new GPoint(-83.015522, 40.002068);
address = "Dreese Labs＜br /＞230 North Oval Mall ＜br /＞Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);
// University Hallvar
point = new GPoint(-83.013307, 40.000610);
address = "University Hall＜br /＞230 North Oval Mall ＜br /＞Columbus, Ohio 43210";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);
结束语
这篇短文简单介绍了使用Google Maps API的方法，建议你去看一下http://www.google.com/apis/maps/documentation/的相关文档，并且在网上和一些相关的Blog上找到相关介绍来深入学习。
转载：http://tech.163.com/05/0912/10/1TEOLV2G00091589.html
阅读次数：1686