一、基础   

利用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/tool/component-geolocation.html前端定位组件

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

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

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

<script src="https://3gimg.qq/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
:
10000
adcode
:
330100
addr
:
""
city
:
"杭州市"
lat
:
30.274085
lng
:
120.15507
module
:
"geolocation"
nation
:
"中国"
province
:
"浙江省"
type
:
"ip"
__proto__
:
Object


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


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


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

<script charset="utf-8" src="http://map.qq/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都可以)或者多刷新几次。这个东西还是玄,我自己都经常时好时坏,还望有经验的开发者多多提点。





更多推荐

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