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

 1、基础   

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

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

 navigator.geolocation.getCurrentPosition(displayLocation, displayError)

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

 var latitude = position.coords.latitude;

 var longitude = position.coords.longitude;

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

2、正题

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

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

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

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

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

<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);
        }

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（免费哟）app

而后步骤正常人都会吧，申请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>

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

而后利用下面这个代码片便可让地图出如今你的浏览器中

 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均可以）或者多刷新几回。这个东西仍是玄，我本身都常常时好时坏，还望有经验的开发者多多提点。