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

2022年05月13日 阅读数:1
这篇文章主要向大家介绍利用腾讯位置服务API实现简单的网页地图显示,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 1、基础   

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

 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。后续能够利用css


 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;

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

2、正题

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

不过不管什么内核,这个方法都太慢了,因而咱们要考虑站在巨人的肩膀上了,腾讯很良心地给了免费的前端定位组件和地图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);
        }

上述代码中的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(免费哟)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>

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