Web端实现定位(使用腾讯地图实现)
程序员文章站
2022-04-30 22:13:56
...
1、腾讯地图提供定位服务的API,官方网址:
2、从腾讯地图API官网注册一个开发秘钥
3、根据官方文档引入js文件
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
4、定位代码
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
var positionNum = 0;
var options = {timeout: 8000};
function showPosition(position) {
var adCode = position.adCode;//邮政编码
var nation = position.nation;//中国
var city = position.city; //城市
var addr = position.addr; //详细地址
var lat = position.lat; //
var lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
};
function showErr() {
//TODO 如果出错了调用此方法
};
</script>
$(function(){ //定位
geolocation.getLocation(showPosition, showErr, options);
})
返回结果说明:
1
2
3
4
5
6
7
8
9
10
11
|
{ "module" : "geolocation" ,
"nation" : "中国" ,
"province" : "广州省" ,
"city" : "深圳市" ,
"district" : "南山区" ,
"adcode" : "440305" , //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区,比如深圳市ID为440300
"addr" : "深圳大学杜鹃山(白石路北250米)" ,
"lat" :22.530001, //火星坐标(gcj02),腾讯、Google、高德通用
"lng" :113.935364,
"accuracy" :13 //误差范围,以米为单位
} |
函数说明:
构造函数 | 说明 |
---|---|
qq.maps.Geolocation(key, referer) | 参数: key : 必填,开发**(key),申请地址 http://lbs.qq.com/console/mykey.html referer: 必填,调用来源,一般为您的应用名称,为了保障对您的服务,请务必填写!例如: referer=mapqq |
5、总结
按照官方文档操作可实现定位,这只是按照官方文档的调用方式一实现的,如果需要别的实现方式,可详细阅读官方文档。
上一篇: 0022. 运行scala的脚本
下一篇: 移动端兼容问题
推荐阅读
-
Java开发之使用websocket实现web客户端与服务器之间的实时通讯
-
web端百度地图API实现实时轨迹动态展现
-
vue 实现Web端的定位功能 获取经纬度
-
vue使用高德地图根据坐标定位点的实现代码
-
Android端使用HttpUrlConnection模仿Web浏览器实现文件上传
-
在安卓开发中,使用腾讯地图实现定位与导航功能
-
Android调用百度地图Web端接口,实现百度定位、导航
-
web端百度地图API实现实时轨迹动态展现
-
微网站-使用flexible.js实现移动端设备适配_html/css_WEB-ITnose
-
Java开发之使用websocket实现web客户端与服务器之间的实时通讯