學習能定位访客位置的地图 (一)

现在，很多Blogger喜欢在自己的博客里嵌入一个小小的Google地图来标记自己的位置。这样一个简单的功能通常可以为自己的博客增色不少，吸引更多的访客。通过对上一章知识的学习，相信读者已经可以自己制作这样的Google地图了。本章将不对这一点进行过多介绍，而是介绍如何在地图上定位访客的位置，并记录访客的地域来源。
了解微软的IP定位接口

一：本节将介绍如何使用微软的开放接口获取访客位置。微软开放的这个接口非常简单，和上一章介绍的利用MaxMind^®的GeoIP^®数据库生成的loadGeoInfo()接口十分类似。相应的说明可参考微软官方网站的说明，见http://msdn2.microsoft.com/en-us/library/aa907670.aspx。

下面具体说明一下该接口。

在浏览器中输入“http://maps.live.com/WiFiIPService/locate.ashx”，正常情况下显示类似如下信息。

SetAutoLocateViewport(30.55397429, 114.289461, 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程序无用）。

以上介绍的是能够获取访客IP地理信息的显示。当然，还有无法正常获取访客IP地理信息的情况，具体分为两种。

第一种显示如下：

ShowMessage("Virtual Earth cannot determine your current location. Try again later.");

第二种也是类似的，如下：

AutoLocateUndetectable("%1 cannot determine your current location. Try again later.");

了解了这些信息就可以使用该免费接口了。

        二  使用微软的IP定位接口获取访客位置

本节将利用上一节中介绍的接口，完成访客定位。具体可分为创建基本的Google地图，完成接口和调用接口等几个步骤，下面一一介绍。

1．创建基本的Google地图

具体如何创建地图，前文中已经有详细介绍，在此不再赘述。与前文略有不同的是，为了使地图能够完美地嵌入BLOG页面，这里需对网页的CSS进行设定，使之符合要求。相应代码如下：

<style type="text/css">

body, html, #map{

    margin:0px;

    width: 100%;

    height: 100%;

}

</style>

这段代码的作用是使HTML页面的BODY部分和地图的容器（即#map，id为map的层）100%充满整个页面，不留任何空白。

2．实现接口部分

首先实现SetAutoLocateViewport()接口。该接口为本例中最重要的一个接口，用于实际的定位工作。这里只需要从中获取经纬度信息，并将访客的地理位置在Google地图上标记出来即可。具体代码如下：

//以下代码实现了SetAutoLocateViewport()接口

//作用是将地图中心设定为当前访客位置，并添加地标表明

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()和AutoLocateUndetectable()这两种无法正确获得数据的情况提供相应接口。为了简单起见，这里只使用window.alert()方法提示无法获取信息。读者如果有兴趣，可以尝试其他更友善的方式给出上述信息，此处不进行深入介绍。

ShowMessage()代码如下所示：

//ShowMessage()接口

function ShowMessage()

{

  alert("暂时无法提供你的地理位置，请稍候再试！");

}

AutoLocateUndetectable()代码如下所示：

//ShowMessage()接口

function AutoLocateUndetectable()

{

  alert("你的地理位置暂时无法被探测，请稍候再试！");

}

这样，接口部分就实现了，后面只需要调用即可。