uniapp 微信小程序导航功能(单个地址)

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序导航功能(单个地址)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp 微信小程序导航功能(单个地址),uni-app,微信小程序,小程序

获取终点的坐标,根据终点的坐标,终点名称,终点详细地址,调起地图导航到第三方APP

1、针对单个地址导航文章来源地址https://www.toymoban.com/news/detail-529787.html

<template>
	<view @click="toGetLocation"></view>
	<view @click="toNavigation"></view>
</template>
data() {
	return {
		endLongitude: '', // 经度(终点位置)
		endLatitude: '',// 纬度(终点位置)
		endName: '',// 终点名称
		endAddress: '',// 终点详细地址
	}
},
toGetLocation: function() {
	//请求自己项目中的接口返回终点的坐标信息
	console.log("返回的坐标:",res.endLongitude,res.endLatitude)
	this.endLongitude = res.endLongitude// 经度(终点位置)
	this.endLatitude = res.endLatitude// 纬度(终点位置)
	this.endName = res.endName // 终点名称
	this.endAddress = res.endAddress // 终点详细地址
},
//导航--传终点的坐标即可
	toNavigation: function() {
		//根据终点地址调起地图导航
		uni.openLocation({
			longitude: parseFloat(this.endLongitude),// 经度,范围为-180~180,负数表示西经
			latitude: parseFloat(this.endLatitude),// 纬度,范围为-90~90,负数表示南纬
			scale: 28, // 缩放比例
			name:this.endName,//终点名称
		    address:this.endAddress,//终点详细地址
			success: function (res) {
				console.log('success:',res);
			}
		});
	},

到了这里,关于uniapp 微信小程序导航功能(单个地址)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uni-app自定义微信小程序头部导航栏

    目录 一、子组件代码 1、完整子组件代码  2、子组件配置项Props  二、父组件引用代码  1 、将头部导航注册成全局组件(main.js) 2、获取设备信息(App.vue) 3、页面导入自定义导航组件 (3-1)、默认配置效果图例 (3-2)、更改配置效果图例  1、完整子组件代码  2、子组件

    2024年02月03日
    浏览(61)
  • uni-app微信小程序,APP都适用自定义顶部导航

    *使用自定义的导航样式,首先需要把原生的顶部的导航方式给隐藏掉(\\\"navigationStyle\\\": \\\"custom\\\") *手机顶部手机状态栏的高度 *微信小程序中胶囊的位置信息存储(使用store存储) *由于微信小程序中带有导航胶囊,所以需要根据胶囊去获取一定的参数信息 在微信小程序中,我们只需要获

    2024年02月06日
    浏览(65)
  • 微信小程序(uniapp)自定义导航栏

    微信小程序原生页面导航栏,无法进行自定义交互,如想实现类似下图的效果,就得使用自定义导航栏 这里使用到uView的组件u-navbar 。 提示:以下是本篇文章正文内容,下面案例可供参考 导航栏样式分为两种 default/custom,custom即取消默认的原生导航,默认为default。 原生导航

    2024年04月27日
    浏览(37)
  • uni-app实现自定义导航栏,兼容H5、App、微信小程序

    很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下: 一、H5、App、微信小程序的区别 1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览

    2024年04月13日
    浏览(76)
  • uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

    目录 第一步:登录小程序公众平台==设置==第三方设置  第二步:登录腾讯地图申请属于自己小程序的key  第三步:找到腾讯地图的插件​​​​​​​  第四步:添加插件与允许授权  第五步:使用    腾讯地图后台:https://lbs.qq.com/dev/console/application/mine    添加key,授权使

    2023年04月12日
    浏览(92)
  • Uniapp,vue拉起地图导航(微信小程序)

    wx.getLocation()方法 这个方法需要在首页调用一下 还需要再 app.json 里面加入 不然上线的时候审核不过 然后在你点击拉起按钮方法里面写入这个wx.openLocation()方法 切记里面的经纬度需要转成数字( Number 类型)例如: 按钮 方法 Markdown 图标 快捷键 撤销 Ctrl /⌘+Z 重做 Ctrl /⌘+Y 加

    2024年02月10日
    浏览(63)
  • 微信小程序、uniapp自定义底部导航栏(附源码)

    需求分析 目前开发一套“同城跑腿平台”小程序,面向用户和骑手,需要两个不同的底部导航,uniapp原生导航不满足要求。所以需要自定义导航栏。 随着自定义导航卡完成,切换选项卡页面总是闪烁,在网上也没有搜到完整的解决方法,总不能完美解决。现在我有一个方法

    2024年02月04日
    浏览(64)
  • 微信小程序:简单实现地图导航功能实现

    里面的小图片需要自己找,真机调试时,点击导航即可进入地图,可导航,规划路线… 效果图 代码: wxml js wxss

    2024年02月11日
    浏览(66)
  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(79)
  • uniapp微信小程序自定义导航,标题和小胶囊平行

    uniapp有自带的自定义头部导航,但是又是满足不了我们的需求,就需要我们去自定义导航。 首先要把原来的navigationStyle设置为custom,去除自带的头部导航。在pages.json文件里, 创建一个组件,在需要的页面进行引用, 我是在components文件里创建了navBar文件。  下面是navBar的代

    2024年02月03日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包