在学习google map之前,必须申请google map API密钥。一个地图 API 密钥只对一个“目录”或域有效。如果是用于在本地测试的须申请本地密钥,即http://localhost。如果是用于网站使用,则必须为网站域名申请专用API密钥。以下为申请google map API密钥地址:http://code.google.com/intl/zh-CN/apis/maps/signup.html
接下来看第一个地图:(注意替换key为申请的api key)
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//注意:在Javacript代码块里嵌入CDATA段可以防止不兼容Javacript的浏览器不产生错误信息
//这是一个编写网页的好习惯
var map; //全局GMap
//网页加载时用于初始化Google地图
function load()
{
if (GBrowserIsCompatible()) //检查浏览器兼容性
//如果浏览器无法满足加载Google地图的最低条件,则不进行进一步操作
//这是编写Google地图网页的一个值得推荐的做法
{
//创建GMap2对象
map = new GMap2(document.getElementById("map"));
//显示地图,并设置其中心,缩放值
//缩放级别设得比较小,这样就可以看到世界地图了
map.setCenter(new GLatLng(37.4419, -122.1419), 2);
}
}
//移动地图中心到北京
function moveMap()
{
//北京的经纬度分别为39.92, 116.46
map.panTo(new GLatLng(39.92, 116.46));
}
//改变地图类型为混合地图
function changeMapType()
{
map.setMapType(G_HYBRID_MAP);
}
//]]>
</script>
网页代码:
<!--加载时调用load()函数加载地图,注意加上οnunlοad="GUnload()"防止内存泄露-->
<body οnlοad="load()" οnunlοad="GUnload()">
<!--以下id为map的DIV元素即为Google地图的容器-->
<div id="map" style="width: 500px; height: 300px"></div>
<input type="button" value="移动地图中心" οnclick="moveMap()" />
<input type="button" value="改变地图类型" οnclick="changeMapType()" />
</body>
学习的最好资料是google map 的官方API文档,google map主要用JavaScript来进行开发,要注意浏览器的兼容性问题。测试可以在Firefox浏览器中用firebug进行调试。