1:第一步是申请api key.每个域名需要一个单独的key.地址:http://www.google.com/apis/maps/
2:创建基本地图。导入js,这里要用到第一步申请的key. 在页面加入id为map的DIV。创建地图对象:new GMap2(div容器ID,opts),
地图初始化,GMap2.setCenter(point,zoomlevel,opts),地图移动到指定地点GMap2.panTo(pint)
3:设定地图类型。在初始化setCenter时是基本类型。地图类型有三:G_NORMAL_MAP普通,G_SATELLITE_MAP卫星,G_HYBRID_MAP混合。通过GMap2.setMapType(type)来指定
1:第一步是申请api key.每个域名需要一个单独的key.地址:http://www.google.com/apis/maps/
2:创建基本地图。导入js,这里要用到第一步申请的key. 在页面加入id为map的DIV。创建地图对象:new GMap2(div容器ID,opts),
地图初始化,GMap2.setCenter(point,zoomlevel,opts),地图移动到指定地点GMap2.panTo(pint)
3:设定地图类型。在初始化setCenter时是基本类型。地图类型有三:G_NORMAL_MAP普通,G_SATELLITE_MAP卫星,G_HYBRID_MAP混合。通过GMap2.setMapType(type)来指定
4:添加API内置GControl控件,使用GMap2.addControl(control,position)方法,control建立方法:new control类型(anchor,offset),可添加的控件有GSmallMapControl精简,GLargeMapControl完整地图,GSmallZoomControl精简缩放控件,GScaleControl比例尺控件,GMapTypeControl地图类型控件
![]()
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//注意:在Javacript代码块里嵌入CDATA段可以防止不兼容Javacript的浏览器不产生错误信息
//这是一个编写网页的好习惯
var map; //全局GMap
//网页加载时用于初始化Google地图
function load()
{
if (GBrowserIsCompatible()) //检查浏览器兼容性
//如果浏览器无法满足加载Google地图的最低条件,则不进行进一步操作
//这是编写Google地图网页的一个值得推荐的做法
{
//创建GMap2对象
map = new GMap2(document.getElementById("map"));
//显示地图,并设置其中心,缩放值
//缩放级别设得比较小,这样就可以看到世界地图了
map.setCenter(new GLatLng(37.4419, -122.1419), 2);
}
}
//移动地图中心到北京
function moveMap()
{
//北京的经纬度分别为39.92, 116.46
map.panTo(new GLatLng(39.92, 116.46));
}
//改变地图类型为混合地图
function changeMapType()
{
map.setMapType(G_HYBRID_MAP);
}
//]]>
</script>
</head>
<!--加载时调用load()函数加载地图,注意加上onunload="GUnload()"防止内存泄露-->
<body onload="load()" onunload="GUnload()">
<!--以下id为map的DIV元素即为Google地图的容器-->
<div id="map" style="width: 500px; height: 300px"></div>
<input type="button" value="移动地图中心" onclick="moveMap()" />
<input type="button" value="改变地图类型" onclick="changeMapType()" />
</body>
</html>