说明

1. 该方法依赖 map组件，如果页面不需要展示地图可直接将地图隐藏 display:none; 即可。

2. 如需展示则赋值给 map组件 属性id即可。只是调用组件内的 openMapApp 方法，不影响组件本身。

3. 参数说明参考 MapContext.openMapApp

效果图

代码块

<template><view class="content"><map id="myMap" style="display: none;"/><view class="input-box"><text>经度：</text><input type="number" v-model="longitude" /></view><view class="input-box"><text>纬度：</text><input type="number" v-model="latitude" /></view><view class="input-box"><text>名字：</text><input type="text" v-model="destination" /></view><button type="default" @click="openMap">打开地图App</button></view>
</template><script>export default {data() {return {longitude:0,latitude:0,destination:'目的地目的地'}},mounted() {let _this = this;uni.getLocation({success(res) {_this.latitude = res.latitude;_this.longitude = res.longitude;}})},methods: {openMap(){let mapContext = uni.createMapContext("myMap");mapContext.openMapApp({latitude: Number(this.latitude),longitude: Number(this.longitude),destination: this.destination,success() {console.log('success!!');},fail() {console.log('fail!!');},complete() {console.log('complete!!');}})}}}
</script><style scoped lang="scss">.input-box{display: flex;align-items: center;input{flex: 1;display: inline-block;border: 1rpx solid rgba(0,0,0,.2);border-radius: 8rpx;}margin: 30rpx;}</style>

Uniapp 微信小程序直接打开地图App （不经过内置地图页）相关推荐

在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
uni微信小程序，打开地图，跳转第三方
一.需求微信小程序需要点击并跳转第三方地图软件导航,并计算到目标位置距离二.思路思路: 1.接口返回需要有位置的经纬度,这个自行在后台编辑获取 2.需要获取用户的位置权限我这边使用的是uni ...
uni-app 微信小程序腾讯地图选点插件
微信小程序插件 | 腾讯位置服务https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker 引入插件包和定位授权: "p ...
微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；
1.首先需要在小程序后台-开发设置-服务器域名配置好下载的域名.不配置:会导致下载失败和打开文件失败: 2.pdf文件的url要确保可以浏览器直接打开. <template><vi ...
uniapp 微信小程序调用手机地图导航到目标点
如果你的页面已经获取过用户的定位权限,这么写 toAddress(position,positionAddress){let arr = position.split(',')const latitu ...
uniapp 微信小程序获取map地图中心的经纬度地理位置
在页面上放置一个map组件 <map id="mapId" ref="mapId" style="width: 750rpx; height:c ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...

Uniapp 微信小程序直接打开地图App （不经过内置地图页）

说明

效果图

代码块

Uniapp 微信小程序直接打开地图App （不经过内置地图页）相关推荐

最新文章

热门文章