uniapp H5 打开地图 并选中标记点

ops/2024/11/13 5:31:50/

uniapp H5 打开地图 并选中标记点

  1. 先上代码
			//打开地图 显示景区位置openMap() {// 支付宝// #ifdef MP-ALIPAYmy.openLocation({longitude: Number(this.detailObj.longitude), // 经度latitude: Number(this.detailObj.latitude), // 纬度name: this.detailObj.scenicName, // 标点名称address: this.detailObj.address, // 标点地址success: res => {// console.log(res);},fail: res => {// console.log(res);},});// #endif// 小程序// #ifdef MP-WEIXINuni.openLocation({latitude: Number(this.detailObj.latitude), // 纬度longitude: Number(this.detailObj.longitude), // 经度name: this.detailObj.scenicName, // 标点名称success: function() {}});// #endif// H5------------------------------------------------------------------------------// this.detailObj.latitude // 纬度// this.detailObj.longitude // 经度// this.detailObj.scenicName // 标点名称// #ifdef H5uni.navigateTo({url:'/pages/webpage/webpage?urlEncode='+ encodeURIComponent(`https://uri.amap.com/marker?position=${this.detailObj.longitude},${this.detailObj.latitude}&name=${this.detailObj.scenicName}`)})// #endif},
  1. webview 页面/pages/webpage/webpage
<template><view><web-view :webview-styles="webviewStyles" :src="urlSrc"></web-view></view>
</template><script>export default {data() {return {urlSrc:'',webviewStyles: {progress: {color: '#ff4643'}},};},onLoad(options) {if(options.urlEncode){this.urlSrc = decodeURIComponent(options.urlEncode)return}}}
</script>
  1. 这是高德提供的免费地址https://uri.amap.com/marker 高德官网

  2. 更多参数
    ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/35dcf64d9be8440191957efe1ee1f83b.p
    在这里插入图片描述

  3. 搞定 复制可用!感谢您的浏览!


http://www.ppmy.cn/ops/111735.html

相关文章

PHP全程可视化防伪溯源一体化管理系统小程序源码

全程可视化&#xff0c;防伪溯源新篇章 —— 揭秘一体化管理系统的力量 &#x1f50d; 开篇&#xff1a;透视未来&#xff0c;从源头到终端的安心之旅 在这个信息透明化时代&#xff0c;每一件商品都承载着消费者的信任与期待。而“全程可视化防伪溯源一体化管理系统”&#x…

STM32获取系统运行时间

获取系统运行时间—us计数值 uint32_t getCurrentMicros(void) {uint32_t m0 HAL_GetTick();__IO uint32_t u0 SysTick->VAL;uint32_t m1 HAL_GetTick();__IO uint32_t u1 SysTick->VAL;const uint32_t tms SysTick->LOAD 1;if (m1 ! m0) {return (m1 * 1000 …

Android JobScheduler介绍

Android JobScheduler介绍 介绍 JobScheduler是在Android 5.0添加的&#xff0c;它可以检测网络状态、设备是否充电中、低电量、低存储等状态&#xff0c;当所有条件都满足时就会触发执行对应的JobService来完成任务。同时具备了重试、定时执行、持久化任务(设备重启后可恢复…

图新地球-将地图上大量的地标点批量输出坐标到csv文件【kml转excel】

0.序 有很多用户需要在卫星影像、或者无人机航测影像、倾斜模型上去标记一些地物的位置&#xff08;如电线杆塔、重点单位、下水盖等&#xff09; 标记的位置最终又需要提交坐标文本文件给上级单位或者其他部门使用&#xff0c;甚至需要转为平面直角坐标。 本文的重点是通过of…

ROS CDK魔法书:建立你的游戏王国(Csharp篇)

引言 在虚拟游戏的世界里&#xff0c;数字化的乐趣如同流动的音符&#xff0c;谱写着无数玩家的共同回忆。而在这片充满创意与冒险的乐园中&#xff0c;您的使命就是将独特的游戏体验与丰富的技术知识相结合&#xff0c;打造出令人难以忘怀的作品。当面对如何实现这一宏伟蓝图…

几种手段mfc140u.dll丢失的解决方法,了解mfc140u.dll

在使用Windows操作系统时&#xff0c;许多用户可能会遇到“找不到mfc140u.dll”或“mfc140u.dll未找到”的错误提示。这个错误通常是由于该文件丢失或损坏所致。本文将详细介绍mfc140u.dll文件的作用、丢失的原因及其解决方法&#xff0c;帮助您快速恢复系统的正常运行。 一、m…

spring项目中如何通过redis的setnx实现互斥锁解决缓存缓存击穿问题

通tryLock尝试去获取锁&#xff0c;如果获取到返回true&#xff0c;没有获取到则返回false private boolean tryLock(String key){Boolean result redisTemplate.opsForValue().setIfAbsent(key, "1", 10L, TimeUnit.SECONDS);return BooleanUtil.isTrue(resul…

如何管理付费媒体预算:分配、风险与扩展

对于优先考虑利润率和现金流的企业而言&#xff0c;管理广告预算是一项基本技能。由于人为错误导致的超支几乎总是意味着与客户和利益相关者的艰难对话。这时候&#xff0c;借助光年AI智能平台可以极大程度地降低这种风险&#xff0c;通过AI驱动的全面流量和增长服务&#xff0…