《你站在桥上看风景 看风景的人在楼上看你 明月装饰了你的窗子 你装饰了别人的梦》
--------------卞之琳
首先介绍下Google Maps API ，它是 Google 自己推出编程 API ，可以让全世界对 Google Maps 有兴趣的程序设计师自行开发基于 Google Maps 的服务，建立自己的地图网站。以下是我在 Google Maps API 开发过程中找到的一些 API 的编程资源，包括中文文档，中文说明，示例等等，希望对 Google Maps 编程感兴趣的程序员有所帮助。
由于工作需要用到地图，我们项目组不约而同的想到Google Maps API ，就是在于它的方便，强大，直接调用接口，可是，对于一个从来没接触过的人来说，是有点困但的，不过，困难归困难，任务还是要完成的，于是通过网上学习，通过百度找google资料，现在想想也比较有趣，在网上找到的一些资料，慢慢的去学习，首先，使用谷歌地图 API 的第一步就是要 注册一个 API 密钥 ，
script src="http://ditu.google.com/maps?file=api&v=2&key= 你注册的 API 密钥 " type="text/javascript"></script>
我的API Key是：ABQIAAAAMWyR7XvYN8KE9N6m_jcU4BRlfWJrPzRGiYSzS4l55_z1ea3VShRolPwARGHvivnEFRLVGXyIlsrYpA
查找文档，迅速写出第一个地图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> 我的谷歌地图</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"
type="text/javascript"></script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<div id="mapContainer" style="height:400px; width:400px;"></div>
</body>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 3);
}
}
</script>
</html>
打开看的时候，感觉比较枯燥，十分的不美观，看看google官网的地图，有放的缩小，还有双击之类的调整的，于是，继续学习，去查看这些修饰的方法语句，经过一番努力，终于实现了漂亮的地图：
<!DOCTYPE html "-//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 </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(31.295310623919682,120.5486770248566), 8); //设置地图的中心点
map.addControl(new GLargeMapControl()); //添加地图组件 一个在Google Local之中使用的大的移动缩放控件，显示在地图的左上角
map.addControl(new GMapTypeControl()); //添加地图组件 让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)
map.addControl(new GScaleControl());//添加地图组件 地图比例尺控件
map.addControl(new GOverviewMapControl(new GSize(100, 100))); //添加地图组件 一个可折叠的鹰眼地图，在地图的角落
GEvent.addListener(map, "moveend", function () {
//捕捉 当地图上发生改变的时候调用
var center = map.getCenter(); //获得中心经纬
});
map.setMapType(G_HYBRID_MAP); //设置地图的类型 现在用的混合视图 (G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)
map.enableScrollWheelZoom(); //让地图启用鼠标滚轮
map.enableDoubleClickZoom();//让地图启用鼠标双击
map.enableContinuousZoom();//让地图启动滑动效果
} else {
alert("Your browser is not compatible with GoogleMap"); //您的浏览器不兼容
}
}
</script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<div id="map_canvas" style="width: 100%; height: 600px"></div>
</body>
</html>
看到上面那些注释没，这些就是一些地图的特效，使其更加的美观，但目前也只是看的过程，并没有实现功能，有点缺憾，不过得继续加代码，大家很容易想到查城市，于是就开始在网上去搜寻查找的接口 ，一般比较常用也是比较简单的就是通过经纬度查相应的位置
，这个要用到一个类
GClientGeocoder 类
GClientGeocoder.getLocations(address, callback)
给 Google 服务器发送请求，对指定的地址进行地址解析。包含状态代码的答复，如果答复成功，则向用户指定的回调函数传递一个或多个 Placemark 对象。与 GClientGeocoder.getLatLng 方法不同，回调函数可以通过检查 Status 字段的代码值确定失败原因。
通过使用 GStreetviewPanorama 对象可支持街道视图图像，该对象提供街道视图 Flash® 查看器的 API 接口。要将街道视图合并到地图 API 的应用程序中，您需要遵循以下较为简单的步骤：
1.创建一个容器（通常是 <div> 元素），用于存放街道视图 Flash® 查看器。
2.创建 GStreetviewPanorama 对象，并将其放置在容器内。
3.初始化 Street View 对象，以便引用特定的位置，并显示初始的“视点”(POV)。
4.通过检查 603 错误值来处理不支持的浏览器。
实现的demo如下：
<!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>我的api</title>
<link rel="shortcut icon" href="http://www.tucoo.com/icon/xtrd_iconset1/s/XTRD-heart.png"/> <!-- 随便连了个图标 -->
<style type="text/css">
body {
text-algin: center;
}
v\: * {
behavior: url(#default#VML);
}
#content{
height: 100%;
width: 100%;
}
#map{
widows: 100%;
height: 600px;
}
#message{
text-align: center;
}
#dosomething{
text-align: center;
}
#dosomething .button{
text-align: right;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"
type="text/javascript"></script><!-- 声明google key 请到http://www.google.com/apis/maps/signup.html申请 -->
<script type="text/javascript">
var map; // 定义地图
function load(){
if (GBrowserIsCompatible())//辨别浏览器是否兼容
{
map = new GMap2(document.getElementById("map"));//调用google函数画一个初图
map.addControl(new GLargeMapControl());//添加地图组件 一个在Google Local之中使用的大的移动缩放控件，显示在地图的左上角
map.addControl(new GMapTypeControl());//添加地图组件 让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)
map.addControl(new GScaleControl());//添加地图组件 地图比例尺控件
map.addControl(new GOverviewMapControl(new GSize(100, 100)));//添加地图组件 一个可折叠的鹰眼地图，在地图的角落
GEvent.addListener(map, "moveend", function () { //捕捉 当地图上发生改变的时候调用
var center = map.getCenter();
document.getElementById("message").innerHTML = "\u4e2d\u5fc3\u7ecf\u7eac" + center.toString();//转码：中心经纬
});
map.setCenter(new GLatLng(39.917, 116.397), 4);//设置地图的中心点
map.setMapType(G_HYBRID_MAP); //设置地图的类型 现在用的混合视图 (G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)
map.enableScrollWheelZoom(); //让地图启用鼠标滚轮
map.enableDoubleClickZoom(); //让地图启用鼠标双击
map.enableContinuousZoom(); //让地图启动滑动效果
}else {
alert("Your browser is not compatible with GoogleMap");//您的浏览器不兼容
}
}
function showme(){
var cityname = document.getElementById('remark').value;//获得 备注
var citylat = document.getElementById('lat').value; //获得 纬度
var citylon = document.getElementById('lon').value; //获得 经度
var citysize = document.getElementById('citysize').value; //获得 地图比例
if(citylat == '')
{
window.alert('没有纬度');
return;
}else if(citylon == '')
{
window.alert('没有经度');
return;
}
if(cityname == '')
{
cityname='没有备注';
}
var point = new GLatLng(citylat,citylon); //创建一个坐标
var marker = new GMarker(point, {draggable:true}); //创建一个标注 并启动它的拖拽功能
GEvent.addListener(marker, "dragstart", function () {//当标注开始拖拽时发生
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function () {//当标注完成拖拽时发生
document.getElementById('lat').value = marker.getPoint().lat();
document.getElementById('lon').value = marker.getPoint().lng();
marker.openInfoWindowHtml("\u786e\u5b9a\u597d\u81ea\u5df1\u7684\u4f4d\u7f6e\u54e6");
});
GEvent.addListener(marker, "mouseover", function () {//当鼠标经过标注时发生
marker.openInfoWindow("<span style='font-size:9pt;'>注释：</span><span style='color:green;'>"+cityname+"</span>");
});
GEvent.addListener(marker, "mouseout", function () {//当鼠标离开标注时发生
map.closeInfoWindow();
});
map.addOverlay(marker);//在地图上添加标注
document.getElementById('lat').value = marker.getPoint().lat();//修改纬度显示
document.getElementById('lon').value = marker.getPoint().lng();//修改经度显示
map.setCenter(point, parseFloat(citysize));//设置地图的中心点
}
window.οnlοad=load; //页面读取时开始加载
window.οnunlοad=GUnload; //一个内存销毁函数 防止内存泄露
</script>
</head>
<body>
<div id="content" style="">
<div id="map" style=""></div>
<div id="message"></div>
<div id="dosomething">
备注：<input type="text" id="remark" value="嘿嘿，好地方"/>
经度：<input type="text" id="lat" value="30.59273"/>
纬度：<input type="text" id="lon" value="114.30542"/>
大小：<select id="citysize" title="地图显示的比例" οnchange="showme();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="selected">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
<br />
<input type="button" value="显示位置" οnclick="showme();""/>
</div>
</div>
</body>
</html>
下接
google Map APi学习与总结（二）
如果转载或使用，希望标明本人地址。
当然我也是问好多人的，可是大家都没给我正确答案，很困惑哦我问了好多人啊。。。。。。。。。。。。。。
扫一扫
8214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
