网页中使用Google地图

2009年11月3日

通过Google地图API您可以在您的网页中非常容易的嵌入一幅地图。只要申请一个地图API密钥就可以操作了，每天可使用地图页面展示次数是没有限制的，甚至还可以地图上使用Google AdSense for Maps来产生广告收入。

1、首先用您的网站域名去申请一个API密钥(KEY)，这个KEY只能用于该域名下的网页。申请的地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html

2、地图的坐标是用代表经度和纬度的两个浮点数的确定的，还有一个深度值用来表示地图的缩放级数，范围是1~19。以下是一段完整的网页代码：

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--
下面的 Script 加载GMap API
必须在所有的应用前加载，否则可能会出现隐含错误
使用你自己的API Key替换掉 key=abcdefg 中的 abcdefg
PS:GMaps 兼容大部分浏览器 可以在使用 GMaps前, 可以先用 GBrowserIsCompatible() 函数检查是否支持。 
-->
<script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
// CDATA 标签说明：CDATA 是XML格式中表示文本段的，当你的网页使用 XHTML 编写时候，就需要加 CDATA 标签.
// 因为注释标签 "< ! -- " 只能注释掉部分内容, 容易导致 XML 解析器分析失败.
//<![CDATA[
// 函数:创建标记点
function createMarker(point, infomation) {
	  var marker = new GMarker(point);
	  GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("<b>" + infomation + "</b>");
	  });
	  return marker;
}
// 函数:显示一个 GMAP 实例
function load(){
    //检查浏览器是否支持
    if (GBrowserIsCompatible()){
        //声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中.
        var map = new GMap2(document.getElementById("map"));
        //添加地图控制器, 下面3个模式定义控制器的大小,可选一个
        //紧凑模式 
        //map.addControl(new GSmallMapControl());
        //完全模式
        map.addControl(new GLargeMapControl());
        //只有放大和缩小的模式
        //map.addControl(new GSmallZoomControl());
        //添加地图比例尺的显示
        //map.addControl(new GScaleControl());
        //添加地图类型控制器 允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换
        map.addControl(new GMapTypeControl());
        //可以通过GMap2.setMapType()方法修改地图的显示模式
        //内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式:
        map.setMapType(G_HYBRID_MAP);
        //地图加载后必须设置中心点, 否则将出现错误警告.
        //GLatLng(Lat,Lng) 是一个坐标, Lat:纬度,Lng:经度, 假如你使用变量请使用 Number 对象
        //这是个变量精度问题在16级深度下将可能产生超过18位小数的数字.
        map.setCenter(new GLatLng(23.118912,113.26143), 15);
 
	var point = new GLatLng(23.118912,113.26143);
	map.addOverlay(createMarker(point, "广州"));
    }
}
//]]>
</script>
</head>
<!--
在页面加载完毕后, 显示 GMAP 实例，GUnload()主要目的是为了避免浏览器的内存泄露
-->
<body onload="load()" onunload="GUnload()">
<!--
GMaps 显示容器,需要在创建 GMaps 对象前创建
GMaps 的大小通过容器的属性获取, 修改容器的大小后需要调用 GMap2.checkResize() 使 GMaps 适应容器的大小
-->
<div id="map" style="width: 500px; height: 300px"> </div>
</body>
</html>

以上代码所产生的效果如下：

蓝天博客

网页中使用Google地图

相关日志:

评论暂缺