移动web端使用腾讯地图实现定位功能
最近公司有个需求,让开发一个相对精确的定位功能,我们是微信二次开发,不像APP那种可以有专门的组件或插件来实现,使用腾讯地图API（支持HTTPS协议)提前准备:1: 先去腾讯地图API官网注册一个密匙.步骤很简单;
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>使用腾讯地图实现移动web定位</title><style type="text/css">*{margin:0px;padding:0px;}body, button, input, select, textarea {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}#container{min-width:600px;min-height:767px;}</style><!-- 腾讯获取坐标需要引入的 -->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<!-- 腾讯地图显示需要引入的 -->
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
</head><body onload="coordinate()"><div id="container"></div></body>
</html>
<script type="text/javascript">var cityLocation, map, marker = null;/**用腾讯获取坐标**/function coordinate(){方法和参数说明===========================================================/*** qq.maps.Geolocation(key, referer) 参数(官网提供)： * key ： 必填，开发密钥(key)，申请地址 http://lbs.qq.com/mykey.html;* referer： 必填，调用来源，一般为您的应用名称，为了保障对您的服务，请务必填写！ * 例如：referer=mapqq为了保障对您的服务，请务必填写！ ** sucCallback:定位成功的回调;** showErr:定位失败的回调;* options为定位选项，选填;* timeout:可以通过参数设置定位的超时时间，默认值为10s;*/代码实现部分===========================================================var geolocation = new qq.maps.Geolocation("腾讯注册的密匙", "mapqq");var options = {timeout: 8000};geolocation.getLocation(sucCallback, showErr, options);}//定位成功回调function sucCallback(position){var mapInfo = JSON.stringify(position, null, 4);var jsonMapInfo = eval('('+mapInfo+')');alert("腾讯经度为:"+jsonMapInfo.lng+",腾讯纬度为:"+jsonMapInfo.lat);init();var latLng = new qq.maps.LatLng(jsonMapInfo.lat, jsonMapInfo.lng);citylocation.searchCityByLatLng(latLng);}//定位失败回调function showErr(){alert("定位失败"); }//初始化地图function init(){var center = new qq.maps.LatLng(39.916527,116.397128);//设置中心点map = new qq.maps.Map(document.getElementById('container'),{//container:放置地图div的id属性center: center,zoom: 15 //地图缩放级别});//调用城市服务信息citylocation = new qq.maps.CityService({complete : function(results){map.setCenter(results.detail.latLng);if (marker != null) {marker.setMap(null);}//设置marker标记marker = new qq.maps.Marker({map: map,position: results.detail.latLng});}});}
</script> 本人亲测,Android和iPhone都可以注意获取到的经纬度信息是腾讯地图的经纬度信息，不同地图用的经纬度互相都不一样
如果要使用于其他地图的定位（如百度地图），要去找类似于:(腾讯经纬度转百度经纬度)的转化方法才能使用。欢迎大家提意见参考：
https://lbs.qq.com/javascript_v2/demo.html移动web端使用腾讯地图实现定位功能相关推荐
- html5腾讯地图自动定位,移动web端使用腾讯地图实现定位功能
var geolocation = new qq.maps.Geolocation("WYEBZ-3MMES-4D5OJ-6WOZH-WLSRZ-OEFTT", "mya ...
- web端使用腾讯地图
前端中使用第三方地图是比较常见的,现在国内提供接入的地图主要有腾讯,高德,百度等第三方.而腾讯地图则是用的比较多的,在移动端,web端,公众号或者小程序的支持度也比较高,提供的功能比较丰富也是大多数业 ...
- vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位 需求:希望网站显示当前城市 腾讯前端定位组件 解决的方法 定义一个文件,加载定位js 在vue页面中使用 需求:希望网站显示当前城市 腾讯前端定位组件 key的申请, ...
- 微信端唤起腾讯地图并进行导航
微信端唤起腾讯地图并进行导航 $('.companyAdress').on('click',function(){ window.location.href= 'http://apis.map. ...
- php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
- 微信小程序如何调用腾讯地图进行定位的简单方法
前言: 这是博主自己目前使用的方式,比较方便,直接调用,没有任何花里胡哨的操作,简约 简单,基于官方文档的说明可以很清楚的知道如何调用腾讯地图的api 具体操作如下 : 先在腾讯地图开放文档中获取到官 ...
- 在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用 获取当前位置信息,逆解析地址 路线规划,距离计算 实时搜索 ...
- android 通过scheme唤起百度、高德、腾讯地图路线规划功能，唤起滴滴出行打车功能
import android.content.Context; import android.content.Intent; import android.net.Uri;import java.ut ...
- uni-app 小程序使用腾讯地图完成搜索功能
前言 使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
最新文章
- Googlequot;员工quot;曝内幕:Google员工的17个秘密
- TCP连接的建立和终止
- centos7 卸载Qt5
- TMDS——最小化传输差分信号及其协议
- 深度学习技术在机器阅读理解应用的研究进展
- rocketMq双master集群模式下故障演练
- redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the pool
- linux打开mysql某张表_Linux——MySQL多表连接
- HTML+CSS制作3D旋转相册
- 过滤器如何配置(javax.servlet.Filter)？
- 科技爱好者周刊（第 149 期）：新能源汽车，谁会是赢家？
- Solidworks如何导入和使用模板文件
- lisp方格网法计算土方量_CAD计算土方方量插件
- Windows server2012R2 企业内部搭建虚拟专用网络服务
- 读书百客：《双双燕·咏燕》赏析
- elasticsearch基本使用
- 【统计分析系统--SAS介绍】
- 在CSDN中如何快速简单方便的免费下载资料
- python连接阿里云接口进行实名认证
- java反转字符串的方法