最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧

一、加载Google maps API

<script type="text/javascript" src="http://www.imacso.com/wp-content/uploads/auto_save_image/2010/06/025100F42.jpg"></script>

您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API

二、加载简单的Google地图

1、  加载Google地图

//声明一个GMap2全局变量
var map;
function load()
{
//检查浏览器的兼容性.
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map")); //加载地图
map.addControl(new GLargeMapControl()); //增加全功能控件
map.addControl(new GMapTypeControl()); //设置地图类型
map.enableScrollWheelZoom(); //设置地图支持滚轮
map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标
map.enableDoubleClickZoom(); //开启双击google map会自动放大.
map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.
//
}
}

2、  添加一个创建GMarker的方法

function createMarker(baseIcon, point, html)
{
var icon = new GIcon(baseIcon);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
return marker;
}

3、  调用这个GMarker方法

var icon = new GIcon(G_DEFAULT_ICON);
var point = new GPoint(116.429114, 39.934322);
var html = '
HelloWorld!
'; var marker = createMarker(icon, point, html); map.addOverlay(marker);

这样一个简单的HelloWorld就显示出来了

通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用

下载链接如果要求输入密码,默认是 5682 或者 778899,正常情况下,鼠标点击文本框也会自动填充。