<!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="//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>
<script src="//maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript">
<div id="map" style="width: 400px; height: 300px"></div><script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);
map.disableDragging();
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上找到相关介绍来深入学习。
联系客服