Google maps API开发（一）

一、加载Google maps API

<script type="text/javascript"

       src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></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 = '<div ><font color="blue">HelloWorld！</font></div>';

var marker = createMarker(icon, point, html);

map.addOverlay(marker);

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

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

最后看看我截得图：

 

源文件下载

每天进步一点点...

Tag标签: Google maps API开发