vue项目使用腾讯地图获取定位

一、注册成为腾讯地图开发者

https://lbs.qq.com/

创建新秘钥

https://lbs.qq.com/dev/console/key/manage

根据页面提示填写相关信息

复制你的秘钥

二、vue中index.html中里引入需要的js文件

注意填写你的密钥

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no" ><title>demo</title></head>  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的密钥"></script><script src="https://map.qq.com/api/gljs?v=1.exp&key=你的密钥"></script><script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script><body><div id="app" style="background-color: antiquewhite;">       </div>   </body>
</html><script>
</script>

三、在需要位置服务的页面初始化地图并获取位置

写到methods:{}里边，

 init() {//步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器//设置地图中心点let lat, lng;var that = this;var geolocation = new qq.maps.Geolocation("你的密钥","myapp");var myLatlng;var geoloc = geolocation.getLocation(function (position) {lat = position.lat;lng = position.lng;myLatlng = new qq.maps.LatLng(lat, lng);//定义工厂模式函数var myOptions = {zoom: 20, //设置地图缩放级别center: myLatlng, //设置中心点样式mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType};//获取dom元素添加地图信息var map = new qq.maps.Map(document.getElementById("container"),myOptions);var listener = qq.maps.event.addListener(map, "click", function (event) {console.info("mouseup", event);that.latLng = event.latLng;setTimeout(function () {var lat = parseFloat(that.latLng.lat);var lng = parseFloat(that.latLng.lng);var latLng = new qq.maps.LatLng(lat, lng);//对指定经纬度进行解析that.geocoder.getAddress(latLng);}, 50);});that.geocoder = new qq.maps.Geocoder();//设置服务请求成功的回调函数that.geocoder.setComplete(function (result) {console.info("result", result);that.positionName = result.detail.address;that.locationDetails.address = result.detail.address;that.locationDetails.addressComponents =result.detail.addressComponents;that.locationDetails.location = result.detail.location;that.locationDetails.nearPois = result.detail.nearPois;that.show = false;map.setCenter(result.detail.location);var marker = new qq.maps.Marker({map: map,position: result.detail.location,});//点击Marker会弹出反查结果qq.maps.event.addListener(marker, "click", function () {alert("坐标地址为： " + result.detail.location);that.$toast("result.detail.location");});});//若服务请求失败，则运行以下函数that.geocoder.setError(function () {alert("出错了，请输入正确的地址！！！");});},null,{ timeout: 500, failTipFlag: true });},

mounted() {this.init();},

 <div class="block" id="container" @ontouchend="choicemap"></div>

vue项目使用腾讯地图获取定位相关推荐

微信小程序+腾讯地图获取定位与地图选点插件
文章目录一.思路二.逆地址解析 2.1. app.json 2.2. 页面加入 2.3. 后台代码三.地图插件调用 3.1. app.json加入 3.2. js页面加入 3.3. wxml页面 ...
uni-app小程序结合腾讯地图获取定位以及地图选址
表单中的地址用地图的方式进行编辑与选址看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件 ...
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
目录第一步:登录小程序公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:使 ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
【uniapp小程序实战】—— 使用腾讯地图获取定位
文章目录
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用获取当前位置信息,逆解析地址路线规划,距离计算实时搜索 ...
android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...

vue项目使用腾讯地图获取定位

vue项目使用腾讯地图获取定位相关推荐

最新文章

热门文章