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

article/2025/7/11 16:30:43

主要实现功能:

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,以上就是实现功能的核心代码块了
关于搜索关键字功能的实现,我会在下个博客中给出


 


http://chatgpt.dhexx.cn/article/LRn4BVr1.shtml

相关文章

[android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题

前一篇百度地图开发讲述"(二).定位城市位置和城市POI搜索"&#xff0c;主要通过监听对象MKSearchListener类实现城市兴趣点POI(Point of Interest)搜索。该篇讲述定位当前自己的位置及使用getLastKnownLocation获取location总时为空值的问题。 一. 定位当前位置的原…

Android进阶之路 - 定位当前位置、获取经纬度

最近又遇到定位场景&#xff0c;需要上传经纬度&#xff0c;正好同事写了&#xff0c;我就记录一下方便你我他 ~ ~ 今年开始用的kt比较多&#xff0c;所以篇内用的kt&#xff0c;见谅见谅 前情悉知 获取当前位置时&#xff0c;需要判断用户是否授权&#xff0c;这里用到的是 …

vue-amap实现实现初始化并定位当前位置,搜索,定位,增加点标记

实现如图展示&#xff0c;初始化并定位当前位置&#xff0c;搜索&#xff0c;定位&#xff0c;增加点标记 下载vue 1.vue页设置 如果是新版web-js的密钥&#xff0c;有配套的安全秘钥&#xff0c;则需要另外在created加入&#xff0c;否则会报undefined window._AMapSecurity…

vue3定位当前位置,获取当前位置的经纬度

vue3定位当前位置&#xff0c;获取当前位置的经纬度 注意事项&#xff08;访问地址必须是https&#xff09;获取当前位置经纬度 注意事项&#xff08;访问地址必须是https&#xff09; 在vue.config.js文件内设置https:true&#xff0c;然后重启一下项目 获取当前位置经纬度 …

新建文本文档

使用百度地图&#xff0c;定位你当前位置并显示 1、准备 注册百度开发者账号到百度地图开放平台创建应用&#xff08;as获取SHA1值&#xff09; 2、将sdk整到你的项目中去 - 在你app的gradle.build中添加 dependencies {...... compile files(libs/baidumapapi_base_v4_0…

web端定位:获取当前地理位置

2019独角兽企业重金招聘Python工程师标准>>> 方法一:html5原生提供的定位: 讲解:在支持HTML5的浏览器下,navigator对象下有一个属性----geolocation,而geolocation属性又有个方法getCurrentPosition(回调函数1,回调函数2)可以通过浏览器向设备发起定位请求,浏…

uniapp 之定位当前位置 (uni.getLocation,腾讯地图,javascript)

第一种 uniapp uniapp 封装的方法可以拿到城&#xff0c;市&#xff0c;县&#xff0c;经纬度。 实例&#xff1a; //获取位置GetLOcation: function() {var that this;uni.getLocation({type: gcj02,success: (res) > {console.log(res)var latitude parseFloat(res.la…

爆款专栏《Python 黑科技》目录导航丨进度:12/50

《Python 快速入门专栏丨掌握基础》和《Python 黑科技丨练习应用》由 CSDN 博客专家丨全站排名 Top 8 的硬核博主 不吃西红柿 倾力打造&#xff0c;旨在帮助大家快速入门掌握 Python。 更有学习资料&#xff0c;简历和 PPT 模板&#xff0c;微信公众号 【信息技术智库】关注我&…

安卓12解除进程限制方法汇总

一、关于安卓12 使用VMOS PRO 借助电脑激活步骤 第一步&#xff0c;使用usb线将手机连接至电脑。 第二步&#xff0c;打开手机的“开发者选项”&#xff0c;打开USB调试开关&#xff0c;确保手机已进入USB调试模式。 第三步&#xff0c;将激活程序包&#xff08;vmos_activa…

电脑技巧:推荐五款非常棒的小众软件,值得收藏

目录 1、Foodie&#xff08;美食相机&#xff09; 2、黑阈APP 3、Sleep Cycle 睡眠助手APP 4、烧杯——化验APP 5、123看图器 今天小编给大家分享五款非常棒的小众软件&#xff0c;生活中非常实用&#xff0c;感兴趣的朋友欢迎收藏&#xff01; 1、Foodie&#xff08;美食相…

永恒之黑漏洞复现

永痕之黑 1. 永恒之黑漏洞相关信息 漏洞介绍 https://nvd.nist.gov/vuln/detail/CVE-2020-0796 漏洞影响版本&#xff1a; Windows 10 Version 1903 for 32-bit Systems Windows 10 Version 1903 for x64-based Systems Windows 10 Version 1903 for ARM64-based Systems Wi…

手机技巧:推荐一款手机省电、提升流畅度APP

目录 软件详情 基本介绍 软件功能 软件特色 使用方法 软件对比 结论 今天给大家推荐一款手机省电、提升流畅度APP&#xff0c;感兴趣的朋友可以下载一下&#xff01; 软件详情 黑阈app是一款非常实用的系统优化类手机APP。使用它能够禁止软件后台运行耗电&#xff0c;既…

linux usb 黑 白 名单_安卓手机如何一键提升手机性能?用黑阈

安卓手机现状 安卓现在的旗舰机并不比苹果差&#xff0c;但是依然对手机小白很不友好&#xff0c;安卓属于开源&#xff0c;自由度较大&#xff0c;可供发挥的空间更高。需要一定基础才能充分利用安卓的性能。而苹果依然是针对小白的&#xff0c;系统会自行优化&#xff0c;自由…

如何root安卓手机_安卓手机如何一键提升手机性能?用黑阈

安卓手机现状 安卓现在的旗舰机并不比苹果差&#xff0c;但是依然对手机小白很不友好&#xff0c;安卓属于开源&#xff0c;自由度较大&#xff0c;可供发挥的空间更高。需要一定基础才能充分利用安卓的性能。而苹果依然是针对小白的&#xff0c;系统会自行优化&#xff0c;自由…

黑阈使用方法

一、从各大应用市场载「 黑阈 」。 二、切换到「 使用 」的页面&#xff0c;选择「 进入黑阈 」 三、打开「 开发者选项 」跟 「 USB调试 」 四、连接 USB &#xff0c;允许 USB 调试 五、电脑打开下面这个网页&#xff0c;下载相应的 SDK。 https://developer.android.goo…

使用树莓派3b+作为黑阈激活器

黑阈&#xff08;y&#xff09;不需要 root 就能待机&#xff08;App Standby&#xff0c;Android 6.0 引入&#xff0c;部分设备不支持&#xff09;或强行停止应用&#xff0c;防止应用持续运行。 黑阈不处理非“黑阈清单”内应用。当您启动应用&#xff0c;使用完退出&#x…

枚举类型是什么

C语言详解 - 枚举类型 注&#xff1a;以下全部代码的执行环境为VC 6.0 在程序中&#xff0c;可能需要为某些整数定义一个别名&#xff0c;我们可以利用预处理指令#define来完成这项工作&#xff0c;您的代码可能是&#xff1a; #define MON 1 #define TUE 2 #define WED 3 …

ts枚举类

参考官方文档:https://www.tslang.cn/docs/handbook/enums.html 理解:枚举是列举固定几个值,直接定义变量的话的话可以随意定义&#xff0c;枚举只能使用你定义好的几个值,枚举是个类&#xff0c;定义的值是基本类型,类能有更多操作 例如你定义一个方法接收一个参数&#xff0…

Java 枚举类型原理分析为什么枚举比用静态变量多消耗两倍的内存

一 起源&#xff1a;枚举是一种特殊的数据类型&#xff0c;一般用来列举有限个、同类型的常量。它能保证参数的安全性&#xff0c;如方法声明传入的参数&#xff0c;必须是指定枚举中的常量。但是Android开发文档指出&#xff0c;使用枚举会比使用静态变量多消耗2倍内存。为什么…

java枚举转json

1、背景 java后端的枚举类型&#xff0c;要展示到前端&#xff0c;提供给用户进行下拉选择&#xff0c;java后端需要封装enum为json字符串提供给前端&#xff0c;需要首先将枚举类型转为list&#xff0c;然后再转为json字符串。 2、方案 方案也很简单&#xff0c;使用EnumSe…