10分钟学会Google Map API （一）
时间：2009-06-07 18:17:00
前几天玩了玩Google的Map API，感觉还不错，很简单。但凡有过任何编程经验的同学，看完以下的教程，都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子，有兴趣的话，请参见 http://sunjian100.googlepages.com/map.html ：]
第一步：
去 http://www.google.com/apis/maps/signup.html 申请一个KeyID
第二步：
在HTML的<title></title>之间加上对MapAPI函数库的引用，
<script src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>
第三步：
在HTML的<body></body>之间的任意位置加上一个名为map的DIV，
<div id="map" style="width: 700px; height: 560px" align="center"></div>
第四步：
在名为map的DIV后面，加上GMap类的实例，
<script type="text/javascript">
//创建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);
</script>
第五步：
随机增加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 #<b>" + number + "</b>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);});
return marker;
}
0
投稿猜你喜欢
统一的品牌设计
HTML5 第二份草案发布
数据库名词解释
SQL Server上进行表设计时表的主键设计问题
将Reporting services的RDL文件拷贝到另外一台机器时报Data at the root level is invalid的解决方法
五个常用MySQL图形化管理工具
IIS上设置301跳转,实现ASP带参数跳转
CSS中expression的用法
oracle数据库下统计专营店的男女数量的语句
用ASP实现Google在线文章翻译的功能
Microsoft JET Database Engine 错误 '80040e21' 所有记录中均未找到搜索关键字
Oracle 存储过程总结(一、基本应用)
字符，字节和编码
mysql数据库你需要特别注意的23个事项
asp如何同时处理数据库和页面错误？
电子商务网站评论设计探讨
网页设计配色色相之黄金分割
