微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置

主要实现功能：

a.进入地图界面，会自动获取当前位置（用户需授权地理位置权限），并显示省市区在左上角，根据个人需求，我只显示了区
b.大头针实现，拖动地图，大头针都能获取到位置
c.左下角定位当前位置实现，当移动地图到别的位置，点击左下角图标，会回归到当前位置

下面是代码的实现
1. app.json文件中

  "permission":{"scope.userLocation":{"desc":"授权当前位置"}}

效果图

弹出授权权限的框，让用户手动授权

2. map.wxml 布局文件

<view class='view-c'>
<view class='view-top'>
<text style="font-size: 24rpx;margin-top: 40rpx;  color: #b65151">当前：{{district}}</text>
<input placeholder="输入城市"  class='input-c' bindinput="getsuggest" value="{{backfill}}" />
</view>
<!-- 搜索 -->
<view wx:for="{{suggestion}}" wx:key="index" class="{{showview?'hidden':'view-center'}}"><!--绑定回填事件--><view ><!--根据需求渲染相应数据--><!--渲染地址title--><view class='item-title'  bindtap="backfill" id="{{index}}">{{item.title}}</view><!--渲染详细地址--><view class='item-details'>{{item.addr}}</view></view></view>
<map
id="ofoMap"
longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"
scale="{{scale}}"
covers="{{covers}}" show-locationclass="{{showview?'map-c':'hidden'}}"bindregionchange="bindregionchange"controls="{{controls}}"bindcontroltap='bindcontroltap'
>
</map>
</view>

可以根据自己的需求画布局，这里就不贴出wxss样式文件了

3. map.js

const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
var qqmapsdk;

// 实例化API核心类
var qqmapsdk = new QQMapWX({key: '开发密钥（key）' // 必填
});

关于jar包，我这里用的是腾讯地图的，可以去官网下

jar包下载地址：https://lbs.qq.com/qqmap_wx_jssdk/index.html

获取当前位置：

  onLoad: function () {qqmapsdk = new QQMapWX({key: 'CLTBZ-3GVWD-LZY4D-HCY2K-RK3EE-UDBWF' //这里自己的key秘钥进行填充});var that = thiswx.showLoading({title: "定位中",mask: true})wx.getSystemInfo({success: (res) => {this.setData({controls: [{id: 1,iconPath: '/images/marker.png',   //  大头针图片position: {left: res.windowWidth / 2 - 11,top: res.windowHeight / 2 - 70,width: 26,height: 45},clickable: true},{id: 2,iconPath: '/images/location.png', // 左下角定位图片position: {left: 20,top: res.windowHeight - 100,width: 40,height: 40},clickable: true},]})}})wx.getLocation({type: 'wgs84',//定位成功，更新定位结果success: function (res) {var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy//经纬度转化为地址that.getLocal(latitude, longitude)that.setData({longitude: longitude,latitude: latitude,speed: speed,accuracy: accuracy})},//定位失败回调fail: function () {wx.showToast({title: "定位失败",icon: "none"})},complete: function () {//隐藏定位中信息进度wx.hideLoading()}})}

经纬度转换为地址：

 getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(JSON.stringify(res));let province = res.result.ad_info.provincelet city = res.result.ad_info.citylet district = res.result.ad_info.districtvm.setData({province: province,//省city: city,//市district: district,//区})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}

实现大头针移动选点

  bindregionchange: function (e) {var that = thisif (e.type == "begin") {console.log("begin");} else if (e.type == "end") {var mapCtx = wx.createMapContext("ofoMap")mapCtx.getCenterLocation({success: function (res) {var latitude = res.latitudevar longitude = res.longitudethat.getLocal(latitude, longitude)}}) }}

点击icon回归当前位置

  bindcontroltap: function (e) {switch (e.controlId) {// 当点击图标location.png的图标，则触发事件movetoPositioon()case 2:this.movetoPosition();break;}}

移动定点

  movetoPosition: function () {this.mapCtx.moveToLocation();},

  onShow: function () {var that=this;console.log("onShow");that.mapCtx = wx.createMapContext("ofoMap");//this.movetoPosition();that.mapCtx.getCenterLocation({success: function (res) {var latitude = res.latitudevar longitude = res.longitudethat.getLocal(latitude, longitude)}}) },

ok，以上就是实现功能的核心代码块了
关于搜索关键字功能的实现，我会在下个博客中给出

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置相关推荐

微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图首先要在微信开放平台的小程序里添加插件具体配置,可以参考官方文档腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
【中级】微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析
1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...
php qcloud sdk weapp_微信小程序腾讯云php后台解决方案
微信小程序腾讯云php后台解决方案微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...
微信小程序源码推荐这个很实用学习地址
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
php小程序session取不到,微信小程序实现Session功能及无法获取session问题的解决方法...
因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的h ...

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置相关推荐

最新文章

热门文章

微信小程序 腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置

微信小程序 腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置相关推荐

最新文章

热门文章

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置

微信小程序腾讯地图大头针定位，获取当前地址，地图移动选点，定位当前位置相关推荐