利用腾讯位置服务API实现简单的网页地图显示

 一、基础   

利用HTML5（以及基于JS的地理定位api）可以很容易的在页面中访问位置信息。但这需要我们首先了解JS中的geolocation属性。

 if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayLocation, displayError);
            } else {
                alert('oops, not support')
            }

利用上述代码可以判断你的浏览器是否支持地理定位（基本上主流的浏览器都是支持的），navigator对象包含了有关浏览器的信息。

 navigator.geolocation.getCurrentPosition(displayLocation, displayError)

这条语句中 getCurrentPosition(succeHandler，errorHandler) 可以获取当前位置，若成功则得到position对象传给successHandler，否则将错误信息传给errorHandler。后续可以利用

 var latitude = position.coords.latitude;

 var longitude = position.coords.longitude;

来分别获得当前位置的经纬度。

二、正题

上述方法基本上可以很好地获取到你的当前地址，我是用PC端进行的测试。但在这方面chrome内核浏览器显然不如Firefox的表现，在360极速浏览器下测试时经常崩溃，会提示类似从谷歌域名下的某网站请求失败等等。所以我索性换火狐测试了

不过无论什么内核，这个方法都太慢了，于是我们要考虑站在巨人的肩膀上了，腾讯很良心地给了免费的前端定位组件和地图api，网址：

http://lbs.qq.com/tool/component-geolocation.html前端定位组件

http://lbs.qq.com/guides/startup.html地图api

利用腾讯的前端定位组件确实能够很快的获取到你的位置（然而还是容易崩溃），具体方法如下（大神也可移步官网查看）

首先，在你的html文件引入脚本

我们采用官网给出的方法一

 window.onload = getMyLocation;

        function getMyLocation() {
            var geolocation = new qq.maps.Geolocation("YOUR_KEY", "myapp");
            geolocation.getIpLocation(showPosition, showErr);
        }

        function showPosition(position) {
            var coords={
                latitude:position.lat,
                longitude:position.lng
            };
            showMap(coords);
        }

上述代码中的position应该是这么一个对象（有许多属性）

Object {module: "geolocation", type: "ip", adcode: 330100, nation: "中国", province: "浙江省"…}
accuracy
:
10000
adcode
:
330100
addr
:
""
city
:
"杭州市"
lat
:
30.274085
lng
:
120.15507
module
:
"geolocation"
nation
:
"中国"
province
:
"浙江省"
type
:
"ip"
__proto__
:
Object

所以可以直接将经纬度读取出来（如代码所示）并存入coords对象，该对象作为showMap函数的参数在后续需要展示地图的时候使用。

下面就来看看如何在你的页面上显示出地图，还是靠腾讯爸爸，http://lbs.qq.com/guides/startup.html在这个网址去注册好你的key（免费哟）

然后步骤正常人都会吧，申请key就好了，一步一步按照要求来做，接下来根据http://lbs.qq.com/javascript_v2/guide-start.html这个网址给出的教程，也很好学，这里我们向html页面引入js代码：

将上面代码中的YOUR_KEY换成你刚刚申请的。接着就可以成功的使用啦。首先写好html结构，

别忘了给这个元素加上css样式（设定好长宽）否则地图是显示不出来的。

然后利用下面这个代码片即可让地图出现在你的浏览器中

 function showMap(coords) {
            var myLatAndLong = new qq.maps.LatLng(coords.latitude, coords.longitude);
            map = new qq.maps.Map(
                document.getElementById('map'), {
                    center: myLatAndLong,
                    zoom: 13,
                    draggable: true,
                    scrollwheel: true,
                    disableDoubleClickZoom: false
                }
            )
        }

最终的效果应该如下图所示（似乎暴露了自己的位置=o=）

当然应该也有很大可能会出错，建议换浏览器（讲道理IE11都可以）或者多刷新几次。这个东西还是玄，我自己都经常时好时坏，还望有经验的开发者多多提点。