专业的WEB编程技术网站,提供技术手册、开发技巧、技术专题等功能,致力于为WEB开发人员提供动力
google已经为我们提供了很多实用的功能，如：搜索、字典、地图、翻译等等功能，而且这些功能全部免费，我们在使用google这些功能时，还可以利用google api来让google为我所用。
比如：
自驾车导航系统：将Google Maps API和道路数据结合，就可以构建自驾车导航系统。用户只要在“From”文本框中输入起始地点，在“To”文本框输入目的地点，就可以在地图上显示出具体的路线。
天气地图系统：将Google Maps API和气象数据结合，就可以构建直观的天气地图。用户可以在地图上很直观地看出每个城市的天气状况，了解每个区域的天气变化。
要使用Google Maps API，就必须到该API的主页申请一个相应的Key，申请地址为：
http://code.google.com/apis/maps/index.html，单击链接“Sign up for a Google Maps API key”进入申请页面，如下图所示：
接受协议并输入网址后，就可以得到获取相应的Key,如下图所示：
OK，单击generate api key按钮，我们就得到相关key和演示代码。
实例：简单的介绍下如何在网页中标识当前用户在地图的位置。
要实现在地图中标识用户的位置，我们肯定要获取客户的ip地址，这里我们可以直接调用微软开放的一个接口:http://maps.live.com/WiFiIPService/locate.ashx，使用方法：
在浏览器中输入“http://maps.live.com/WiFiIPService/locate.ashx”，正常情况下显示类似如下信息：
SetAutoLocateViewport(34.25532557, 108.9532059, 10, false, "%1 has determined your location by using your computer's IP address.");
其中的数据可能略有不同，但需要实现的接口是一致的，即SetAutoLocateViewport()，其函数原型如下：SetAutoLocateViewport(latitude, longitude, zoomlevel, unknown, message);
下面介绍其各个参数的意义。
— 第一个参数latitude——当前IP所在的纬度；
— 第二个参数longitude——当前IP所在的经度；
— 第三个参数zoomlevel——当前适合于微软Virtual Earth显示的缩放级别（对Google Maps API程序基本无用）；
— 第4个参数unknown——该接口无相应信息，可能为是否开启Virtual Earth地图的Virtual 3D功能（对Google Maps API程序无用）；
— 第5个参数message——应该显示消息（对Google Maps API程序无用）。
代码实现功能
首先实现SetAutoLocateViewport()接口。该接口为本例中最重要的一个接口，用于实际的定位工作。这里只需要从中获取经纬度信息，并将访客的地理位置在Google地图上标记出来即可。
代码（注释在代码中）：
<!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>
<style type="text/css">
body, html, #map{
margin:0px;
width: 100%;
height: 100%;
}
</style>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="
http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAA6P2e_esNOo8hL6rXE3qxshQRn0_SSIhdtQ52
4HUmPiyomYq2jBQusTzrPsMp5GowgnZTeWuvKw6Ytg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map; //全局GMap
//网页加载时用于初始化Google地图
function load()
{
if (GBrowserIsCompatible())
{
//创建GMap2对象
map = new GMap2(document.getElementById("map"));
//缩放级别设得比较小，如不合适可自行设定合适的级别
map.setCenter(new GLatLng(34.25532557, 108.9532059), 13);
//动态创建DOM节点
var ss = document.createElement("script");
//设定脚本的src
ss.src = "
http://maps.live.com/WiFiIPService/locate.ashx";
//设定脚本的type
ss.type="text/javascript";
//附加脚本到网页的DOM
//除了往下面document.documentElement元素appendChild外
//也可以在document.body或其他DOM元素中添加新的节点
document.documentElement.appendChild(ss);
}
}
//SetAutoLocateViewport()接口，移动到当前访客的位置
//第一个参数latitude——当前IP所在的纬度
//第二个参数longitude——当前IP所在的经度
//第三个参数zoomlevel——当前适合于微软Virtual Earth显示的缩放级别（对Google Maps API //程序基本无用）
//第4个参数unknown——该接口无相应信息，可能为是否开启Virtual Earth地图的Virtual 3D功//能（对Google Maps API程序无用）
//第5个参数message——应该显示消息（对Google Maps API程序无用）
function SetAutoLocateViewport(latitude, longitude, zoomlevel, unknown, message)
{
//访客所处位置
var point = new GLatLng(latitude, longitude);
//创建一个自定义的GIcon
var myIcon= new GIcon();
myIcon.image = "
/uploads/allimg/c090205/1233O433291L0-111c1.jpg";
myIcon.shadow = "
/uploads/allimg/c090205/1233O43333aF-12YH.jpg";
myIcon.iconSize = new GSize(12, 20);
myIcon.shadowSize = new GSize(22, 20);
myIcon.iconAnchor = new GPoint(6, 20);
myIcon.infoWindowAnchor = new GPoint(5, 1);
//标记访客位置
var marker = new GMarker(point,//创建自定义的GMarker
{icon: myIcon,
title: "绿色标记为您当前的位置"});
map.addOverlay(marker);
//移动到当前访客的位置
map.panTo(point);
}
//ShowMessage()接口
function ShowMessage()
{
alert("暂时无法提供你的地理位置，请稍候再试！");
}
//AutoLocateUndetectable()接口
function AutoLocateUndetectable()
{
alert("你的地理位置暂时无法被探测，请稍候再试！");
}
//]]>
</script>
</head>
<!--加载时调用load()函数加载地图，注意加上οnunlοad="GUnload()"防止内存泄漏-->
<body οnlοad="load()" οnunlοad="GUnload()">
<!--
以下id为map的DIV元素即为Google地图的容器
因为已在CSS中定义该层宽、高均为100%，故此处不必重复定义
-->
<div id="map"></div>
</body>
</html>
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
