10分钟学会Google Map API （一） - Google观察者 - ITPUB个...

空间管理 您的位置:ITPUB个人空间 »Google观察者 »日志
10分钟学会Google Map API （一）
上一篇 /下一篇  2008-07-09 23:34:10 / 个人分类：API
查看( 2081 ) /评论( 39 ) /评分( 84 / 67 )
前几天玩了玩Google的MapAPI，感觉还不错，很简单。但凡有过任何编程经验的同学，看完以下的教程，都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子，有兴趣的话，请参见http://sunjian100.googlepages.com/map.html ：]
第一步：
去http://www.google.com/apis/maps/signup.html 申请一个KeyID
第二步：
在HTML的之间加上对MapAPI函数库的引用，

第三步：
在HTML的之间的任意位置加上一个名为map的DIV，

第四步：
在名为map的DIV后面，加上GMap类的实例，

//创建GMap类的实例
var map = new GMap(document.getElementById("map"));
//添加一个控制条
map.addControl(new GSmallMapControl());
//设置显示模式为卫星影像
map.setMapType(G_SATELLITE_TYPE);
//设置中心点经纬度（上海）和缩放系数，并显示
map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);

第五步：
随机增加10个标记点，
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = createMarker(point, i + 1);
//添加标记点
map.addOverlay(marker);
}
第六步：
添加事件响应，
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this marker's index in the info window when it is clicked.
var html = "Marker #" + number + "";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);});
return marker;
}