google地图功能扩展(google maps api)－－打造自己的地图系统 .: WEB开发技术知识库(www.cn-web.com)

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地图上标记出来即可。

演示地址：http://www.cn-web.com/cnwebFileVar/ys/google/1.html

代码（注释在代码中）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps JavaScript API Example</title>

body, html, #map{

margin:0px;

width: 100%;

height: 100%;

}

</style>

file=api&v=2&key=ABQIAAAA6P2e_esNOo8hL6rXE3qxshQRn0_SSIhdtQ52

4HUmPiyomYq2jBQusTzrPsMp5GowgnZTeWuvKw6Ytg"

type="text/javascript"></script>

//<![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 = "http://labs.google.com/ridefinder/images/mm_20_green.png";

myIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

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>

<!--

以下id为map的DIV元素即为Google地图的容器

因为已在CSS中定义该层宽、高均为100%，故此处不必重复定义

-->

</body>

</html>

google地图功能扩展(google maps api)－－打造自己的地图系统

相关文章

用户评论