uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

这篇具有很好参考价值的文章主要介绍了uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

先上效果图:

uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android
uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,androiduni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android

1. 在封装方法的文件夹下新建一个js文件,然后把这些功能进行封装

// 点击按钮拨打电话
export function getActionSheet(phone) {
	uni.showActionSheet({
		itemList: [phone, '呼叫'],
		success: function(res) {
			console.log(res);
			if (res.tapIndex == 1) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('调用成功!')
					},
				})
			}
		}
	})
}

// 点击按钮进行地图导航
export function getMapAPP(lat, lng, address) {
	const latitude = Number(lat)
	const longitude = Number(lng)
	uni.openLocation({
		latitude: latitude,
		longitude: longitude,
		name: address,
		scale: 12,
		success() {
			console.log('打开成功!')
		}
	})
}

2.在需要的页面中进行调用

<u-icon name="phone" :color="color" size="22" @click="showActionSheet(item.tel)"></u-icon>

<u--image src="/static/image/frame.png" width="22" height="22" @click="toMapAPP(item.lat,item.lng,item.address+item.address_detail)"></u--image>
import {
		getActionSheet,
		getMapAPP
	} from '@/until/actSheet_mapAPP.js';
methods: {
	// 点击打电话
	showActionSheet(phone) {
		getActionSheet(phone)
	},
	//打开第三方地图
	toMapAPP(lat, lng, address) {
		getMapAPP(lat, lng, address)
	}
}

注意点:

1. 拨打电话需要进行app权限配置,设置完成后可以在正式版看到效果。(这几个最好都勾选上)
uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android

uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android

2. 配置高德地图的app模块设置,这里的appkey需要到高德地图网站申请。

uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android
uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】,uni-app,android文章来源地址https://www.toymoban.com/news/detail-742979.html

到了这里,关于uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

    uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

    学习目标如下所示: uni-app点击提交按钮后弹出提示框,(以弹窗的形式显示),提示用户是否确认提交(即确定和取消),点击确定后调用真正的提交方法,将数据传给后端,点击取消后,模态框自动消失,不请求后端接口。 内容如下所示: 显示用户需要确认的模态框 点击

    2024年02月15日
    浏览(16)
  • 微信小程序调用直接拨打电话功能

     我们在做小程序的时候,通常回显的电话号码,是要能调用拨打电话的接口,直接拨打电话的,那么如何调用直接拨打电话的接口呢,下面我就简单的记录一下。  1.index.wxml文件 2.index.js文件

    2024年02月12日
    浏览(17)
  • uniapp实现:点击拨打电话,弹出电话号码列表,可以选择其中一个进行拨打

    uniapp实现:点击拨打电话,弹出电话号码列表,可以选择其中一个进行拨打

    在uni-app中,使用 uni.showActionSheet 方法实现点击拨打电话的功能,并弹出相关的电话列表供用户选择。 当用户选择了其中一个电话后,会触发success回调函数,并通过res.tapIndex获取用户选择的电话的索引。然后,可以根据索引从电话号码数组中取出对应的电话号码,并使用 un

    2024年02月11日
    浏览(16)
  • uni-app - 实现多选功能,点击项目时选中并高亮显示(支持全选 / 反选,以及轻松的 “回显“ 数据)点击选中并改变样式,全端兼容 H5 App 小程序,代码高效简洁无 BUG

    uni-app - 实现多选功能,点击项目时选中并高亮显示(支持全选 / 反选,以及轻松的 “回显“ 数据)点击选中并改变样式,全端兼容 H5 App 小程序,代码高效简洁无 BUG

    网上的代码都太乱且实现代码太臃肿,各种样式、变量乱七八糟很难移植到自己的项目中。 本文实现了 灵活度极高的多选功能示例,支持全选和反选,代码干净整洁注释详细,无任何第三方依赖, 您只需要一键复制示例代码,几分钟快速完成并植入到您的项目中, 如下图所

    2024年02月09日
    浏览(121)
  • #Uniapp: uni.makePhoneCall(OBJECT) 拨打电话

    uni.makePhoneCall(OBJECT) 拨打电话 拨打电话。 OBJECT 参数说明 参数名 类型 必填 说明 phoneNumber String 是 需要拨打的电话号码 success Function 否 接口调用成功的回调 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行) 示例

    2024年01月25日
    浏览(15)
  • uni-app点击复制指定内容(点击复制)

    uni-app点击复制指定内容(点击复制)

    uni.setClipboardData(OBJECT)

    2024年02月09日
    浏览(15)
  • uni-app禁用返回按钮/返回键

    前言 使用uni-app开发原生应用时,遇到需求: 需要禁用物理返回按钮、手势返回。 uni.navigateBack仍可使用。 实现 当前页面的onBackPress()中,禁用物理返回 pages.json中,去除当前页面的返回按钮 当前页面的mounted()中,隐藏当前页面的返回按钮(针对pages.json中设置无效的情况)

    2024年02月08日
    浏览(12)
  • 《uni-app》表单组件-Button按钮

    《uni-app》表单组件-Button按钮

    本文分享的button组件为uni-app的内置组件button,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性更多…没有本质上的区别~ Button,按钮,图形化界面基础组件之一,常用于响应用户的点击事件、触发业务逻辑操作时使用; 按钮基础用法如下: 在基础用法下,

    2024年02月02日
    浏览(16)
  • uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮 1693289945724.png // 常用颜色 // d81e06 紅 // #f4ea2a 黃 // #1afa29 綠 // #1296db 藍 // #13227a 青 // #d4237a 紫 // #ffffff 白 // #2c2c2c 黑

    2024年02月09日
    浏览(48)
  • uni-app 客服按钮可上下拖动动

    uni-app 客服按钮可上下拖动动

    项目需求:                因为悬浮客服有时候会遮挡住界面内容,故需要对悬浮的气泡弹窗做可拖动操作         movable-area: 可拖动区域          movable-view: 可移动的视图容器,在页面中可以拖拽滑动或双指缩放。 属性说明 属性名 类型 默认值 说明 平台差异

    2024年02月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包