Google maps API开发(一) | NeatCN(NeatStudio工作室)

由于自己想在mzditu.com上运用google maps api进行开发，在看到这篇相对比较简单的介绍文章时，就下载下来进行了学习，现在贴上分析代码。

一、加载 Google maps API的JS文件

很明显的，你可以看到，我们加载的JS文件来自于http://ditu.google.com，而后面的apikey则需要到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请。（因为，它需要绑定自己的域名，否则不能被正确使用）

二、创建一个简单的应用

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这几个核心类的基本应用，现在让我们运行一下这段代码看看实际效果先。

【由于我的runcode插件有问题，请直接到这里下载并测试吧：http://files.cnblogs.com/cyan/01.rar】
原文请参考：http://www.cnblogs.com/cyan/archive/2010/03/15/1685867.html

Leave a Reply Cancel reply