uniapp调用第三方地图(使用应用内置地图查看位置 -- 已解决)

				let lat = this.listStr.latitude;  //经度
				let lon = this.listStr.longitude;  //  纬度
				let name = this.listStr.eaName;//  名字
				let address = this.listStr.eaAddressDetail//  地址
		
				const latitude = Number(lat)
				const longitude = Number(lon)
				wx.openLocation({
					latitude,
					longitude,
					name,
					address,
					scale:18
				})
### 如何在 UniApp集成高德地图 API #### 准备工作 为了能够在 UniApp 应用程序中成功集成高德地图 API,需完成如下准备工作: - **获取高德 Key** 需要前往高德开放平台注册账号并创建应用来获得专属的 key。对于 Android 平台的应用来说,确保申请的是适用于该环境下的密钥[^1]。 - **设置安全通信域名** 如果计划使用 H5 页面调用接口,则还需配置合法的安全域名以保障数据传输的安全性。这一步骤通常是在开发者后台完成设定[^3]。 #### 编写代码实现功能 ##### HTML 结构定义 首先,在页面模板文件 `.vue` 的 `<template>` 标签内构建基础布局结构: ```html <view class="container"> <!-- 地图容器 --> <map id="myMap"></map> </view> ``` ##### JavaScript 方法编写 接着,在同一文件中的 `<script setup lang="ts">` 或者普通的 `<script>` 节点下加入必要的逻辑处理函数: ```typescript import { onMounted } from 'vue'; onMounted(() => { const map = new AMap.Map('myMap', { zoom: 10, center: [116.397428, 39.90923], // 默认中心坐标设为北京天安门位置 }); function getLocation() { navigator.geolocation.getCurrentPosition( (position) => { console.log(`纬度:${position.coords.latitude}, 经度:${position.coords.longitude}`); // 更新地图视口到当前位置 map.setCenter([position.coords.longitude, position.coords.latitude]); }, () => alert('无法获取地理位置'), { enableHighAccuracy: true } ); } // 初始化时尝试自动定位用户所在地点 getLocation(); }); ``` 上述 TypeScript 代码片段展示了如何利用 `navigator.geolocation` 对象请求用户的地理信息,并据此调整显示的地图区域[^2]。 ##### 添加样式控制 最后别忘了给对应的元素加上 CSS 来美化界面效果: ```css <style scoped> .container { width: 100%; height: calc(100vh - var(--status-bar-height)); } #myMap { width: 100%; height: 100%; } </style> ``` 这样就完成了基本的地图展示以及基于浏览器内置能力的位置检索操作。如果想要进一步扩展更多高级特性比如路径规划、周边搜索等功能,则可以参照官方文档继续深入学习和实践[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮很忙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值