利用腾讯位置服务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文件引入脚本

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

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

 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:10000adcode:330100addr:""city:"杭州市"lat:30.274085lng:120.15507module:"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代码：

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

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

<div id="map"></div>

别忘了给这个元素加上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都可以）或者多刷新几次。这个东西还是玄，我自己都经常时好时坏，还望有经验的开发者多多提点。