当前位置: 首页 > article >正文

uniapp 微信小程序开发使用高德地图定位SDK

1.注册高德地图开放平台账号

(1)创建应用

这个key 第3步骤,配置到项目中locationGps.js

2.下载高德地图微信小程序插件

(1)下载地址

高德地图API | 微信小程序插件

(2)引入项目中

3. 创建逆地理编码js文件

(1)locationGps.js

/** 使用第三方地图逆地址解析经纬度获取用户当前所在位置信息
 * @param {Number} lat
 * @param {Number} lng
 */
 
export const getUserCurrentLocationInfo = (lat, lng) => {
    var GDMapWX = require('../assets/GD/amap-wx.130.js');
    var GDMapSdk = new GDMapWX.AMapWX({
        key: '' // 必填  高德应用key
    });
    return new Promise((resolve, reject) => {
        GDMapSdk.getRegeo({
            location: lng + ',' + lat,
            success: res => {
                if (res && res.length > 0) {
                    resolve(res); // 确保返回的结果是一个数组
                } else {
                    reject('No data returned');
                }
            },
            fail: function(error) {
                reject(error);
            }
        });
    });
}

(2)存放位置

4. 前端代码

<script>
import {
	getUserCurrentLocationInfo
} from "@/utils/locationGps.js"; // 引入函数


data(){

    return {
    	    latitude: 0, // 纬度,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系
			longitude: 0, // 经度,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系
			city: '',
			address: '',

        }
    }


methods:{
        // 定位
		getLocation() {
			// 使用 uni.getLocation 获取经纬度
			uni.getLocation({
				type: 'gcj02', // 使用国测局坐标系 wgs84
				success: (res) => {
					console.log('经度:', res.longitude);
					console.log('纬度:', res.latitude);
					console.log('速度:', res.speed);
					console.log('精度:', res.accuracy);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.getLocationInfo(res.latitude, res.longitude); 
				},
				fail: (err) => {
					console.error('获取位置失败', err);
				}
			});
		},
		// 使用高德地图 API 进行逆地理编码
		getLocationInfo(lat, lng) {
			getUserCurrentLocationInfo(lat, lng)
				.then((res) => {
					this.city = res[0].regeocodeData.addressComponent.city || res[0].regeocodeData.addressComponent
						.province;
					this.address = res[0].regeocodeData.formatted_address;
					console.log('城市:', this.city);
					console.log('详细地址:', this.address);
				})
				.catch((error) => {
					console.error('逆地理编码失败', error);
				});
		},
	},
	mounted() {
		this.getLocation();
	},


http://www.kler.cn/a/458835.html

相关文章:

  • 计算机网络体系结构基础知识
  • 国产手机嘴上喊着挑战苹果,实际行动却已承认失败,真的干不过
  • OpenAI发布o3:圣诞前夜的AI惊喜,颠覆性突破还是技术焦虑?
  • 基本算法——分类
  • 【谷歌开发者月刊】十二月精彩资讯回顾,探索科技新可能
  • C#:多线程 简单示例
  • ZYQN MPSoc系列芯片综述
  • MOS管驱动方案汇总
  • WeNet:面向生产的流式和非流式端到端语音识别工具包
  • 下载mysql免安装版和配置
  • 计算机网络-L2TP VPN基础实验配置
  • LeetCode-正则表达式匹配(010)
  • 为什么C++支持函数重载而C语言不支持?
  • “技术学习”(Technical Learning)在英文中的多种表达方式
  • 第十六届蓝桥杯模拟赛(第一期)(C语言)
  • HarmonyOS NEXT 实战之元服务:静态案例效果---本地生活服务
  • SkyWalking Agent 配置 Spring Cloud Gateway 插件解决日志错误
  • Momentum Contrast for Unsupervised Visual Representation Learning论文笔记
  • Django多字段认证的实现
  • python脚本加载ui页面:PySide6设计的页面
  • SQL 实战:窗口函数进阶 – 实现复杂滑动窗口与动态累计计算
  • 大数据与机器学习(它们有何关系?)
  • Mac电脑python多版本环境安装与切换
  • Selenium之Web元素定位
  • Android笔试面试题AI答之Android基础(7)
  • hive-sql 连续登录五天的用户