學習能定位访客位置的地图 (二)
3．调用微软的IP定位接口
调用該接口的办法和调用自定义接口的方法不同。原因是出于浏览器安全性考虑，一般禁止了跨域的Ajax调用，因此GDownloadUrl()无法取得http://maps.live.com上的数据。解决这个问题的办法是动态地在网页的DOM里添加Script脚本。具体做法是在网页加载的onload事件函数里添加如下代码。
//动态创建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);
此例完整代码如下（blogmap.html）：
<!--此为完整的blogmap.html代码-->
<!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=ABQIAAAA1j 86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufjIAnGkUAnvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ" 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(37.4419, -122.1419), 1);
//动态创建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>
<!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄漏-->
<body onload="load()" onunload="GUnload()">
<!--
以下id为map的DIV元素即为Google地图的容器
因为已在CSS中定义该层宽、高均为100%，故此处不必重复定义
-->
<div id="map"></div>
</body>
</html>
显示效果如图4.1所示。
