简明现代魔法 -> 软件项目 -> 搭建简单的 Google Maps 应用框架

搭建简单的 Google Maps 应用框架

2010-01-05

代码演示

这是一个很简单的 Google Maps API 应用例子,但是我们可以从中学习到如何架构一个 Google Maps 应用。

Google Maps 应用的功能,是通过编写一个个 JavaScript 函数来实现。如这个例子所示,定义了5个函数,每个函数都实现了特定的功能,而且每个函数之间也有联系。

首先函数 load() 实现了地图的初始化,然后剩下的四个函数则实现了移除地图上的各种控件。

这个应用给我们介绍了搭建 Google Maps 应用的一个框架:编写各种函数来实现各种功能。但要注意一点,全局变量的定义,这里在函数定义之前就已经定义了一些全局变量,这些变量可以在以下的各个函数中方便地使用。

	var map;  //全局GMap
    var ctrl = new GSmallMapControl(); //全局GControl控件
    var markers = []; //一组GMarker()对象
    
//网页加载时用于初始化Google地图
function load()
{
	if (GBrowserIsCompatible())
	{
		//创建GMap2对象,添加GControl控件
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, 122.1419), 1);
        map.addControl(ctrl);
        
        //随机产生GMakers
        for(var i=0; i<5; i++)
        {
			markers[i] = new GMarker(new GLatLng(Math.floor(Math.random()*80+i), Math.floor(Math.random()*170+i)));
			map.addOverlay(markers[i]);
        }
        //为第一个marker打开一个信息窗口
        markers[0].openInfoWindowHtml("<div style='color:green;'>这是一个<strong>测试</strong></div>");
	}
}
    
//关闭信息窗口
function closeInfoWindow()
{
	map.closeInfoWindow();
}
    
//移除GControl控件
function removeControl()
{
	map.removeControl(ctrl);
}
    
//移除markers[0]
function removeMarker()
{
	map.removeOverlay(markers[0]);
}
    
//移除所有markers
function clearMarkers()
{
	map.clearOverlays();
}  

察看示例

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们