如何使用快应用内置地图查看、导航位置

使用快应用内置地图查看、导航位置。仅限中国大陆使用，需要获取设备定位权限。

chooseLocation 可以选择地理位置，也可以搜索位置，确定选择的位置后会返回一个经纬度坐标，然后使用 openLocation 进行导航。

导航app中默认显示滴滴出行快应用，百度地图和高德地图如果手机安装了才会显示。

使用方法（此处以deeplink跳转为例）：

router.push({uri: 'pages/openLocation',  params: {    name: '故宫',    address: '北京市东城区景山街前街4号',    scale: 17,    latitude:116.397067,    longitude:39.917399  }})

快应用ux页面实现：

首先写好页面的布局模板，展示一个地图，一个地址展示栏，一个导航按钮，一个我的位置控制组件，代码如下：

<template><div class="container"><div class="page-title-wrap"><text class="page-title">{{componentName}}</text></div><div class="item-container"><div class="item-container"><div class="item-content"><text>{{$t('message.interface.system.geolocation.deviceInfo')}}</text><text>{{deviceInfo}}</text><text>{{$t('message.interface.system.geolocation.isHuawei')}}{{isHuawei}}</text></div><input type="button" class="btn" onclick="getDeviceInfo"value="{{$t('message.interface.system.geolocation.getDeviceInfo')}}" /></div><div class="item-content"><text class="txt">{{$t('message.interface.system.geolocation.getGeolocation')}}</text><text class="txt">latitude: {{geolocationGetData.latitude}}</text><text class="txt">longitude: {{geolocationGetData.longitude}}</text><text class="txt">altitude: {{geolocationGetData.altitude}}</text><text class="txt">accuracy: {{geolocationGetData.accuracy}}</text><text class="txt">heading: {{geolocationGetData.heading}}</text><text class="txt">speed: {{geolocationGetData.speed}}</text><text class="txt">time: {{geolocationGetData.time}}</text></div><input type="button" class="btn" onclick="getGeolocation"value="{{$t('message.interface.system.geolocation.getGeolocationBtn')}}" /><div class="item-content"><text class="txt">{{$t('message.interface.system.geolocation.geolocation')}}</text><text class="txt">latitude: {{geolocationListenData.latitude}}</text><text class="txt">longitude: {{geolocationListenData.longitude}}</text><text class="txt">accuracy: {{geolocationListenData.accuracy}}</text><text class="txt">time: {{geolocationListenData.time}}</text></div><input type="button" class="btn" onclick="listenGeolocation"value="{{$t('message.interface.system.geolocation.listenGeolocation')}}" /><input type="button" class="btn" onclick="cancelGeolocation"value="{{$t('message.interface.system.geolocation.cancelGeolocation')}}" /><div class="item-content"><text class="txt">{{$t('message.interface.system.geolocation.type')}}{{typeVaule}}</text></div><input type="button" class="btn" onclick="getLocationType"value="{{$t('message.interface.system.geolocation.getLocationType')}}" /><input type="button" class="btn" onclick="openLocation" value="openLocation" /><input type="button" class="btn" onclick="chooseLocation" value="chooseLocation" /><input type="button" class="btn" onclick="geocodeQuery" value="geocodeQuery" /><input type="button" class="btn" onclick="reverseGeocodeQuery" value="reverseGeocodeQuery" /></div></div>
</template>

样式如下，大家可以自定义

<style>@import '../../../Common/css/common.css';.item-container {margin-bottom: 50px;margin-right: 60px;margin-left: 60px;flex-direction: column;}.item-content {flex-direction: column;background-color: #ffffff;padding: 30px;margin-bottom: 100px;align-items: flex-start;}
</style>

页面js逻辑

<script>import geolocation from '@system.geolocation'import device from '@system.device'import prompt from '@system.prompt'export default {data: {componentName: 'geolocation',componentData: {},deviceInfo: '',isHuawei: false,geolocationGetData: {latitude: '',longitude: '',altitude: '',accuracy: '',heading: '',speed: '',time: ''},geolocationListenData: {latitude: '',longitude: '',time: '',accuracy: ''},typeVaule: '',latitude: 0,longitude: 0,},onInit: function () {this.$page.setTitleBar({ text: 'geolocation' })this.componentData = this.$t('message.interface.system.geolocation')},getDeviceInfo: function () {var that = thisdevice.getInfo({success: function (ret) {that.deviceInfo = JSON.stringify(ret)if (that.deviceInfo.indexOf('engineProvider') >= 0 && that.deviceInfo.indexOf('huawei') >= 0) {that.isHuawei = true} else {that.isHuawei = false}},fail: function (errorMsg, errorCode) {that.deviceInfo = errorCode + ': ' + errorMsg}})},getGeolocation: function () {var that = thisif (that.isHuawei) {prompt.showToast({message: this.componentData.baiduMap})geolocation.getLocation({coordType: 'gcj02',timeout: 2000,success: function (ret) {that.geolocationGetData = ret},fail: function (errorMsg, errorCode) {console.log('geolocation.getLocation----------' + errorCode + ': ' + errorMsg)},complete: function () {console.log('geolocation complete----------')}})} else {prompt.showToast({message: this.componentData.systemMap})geolocation.getLocation({timeout: 2000,success: function (ret) {that.geolocationGetData = ret},fail: function (errorMsg, errorCode) {console.log('geolocation.getLocation----------' + errorCode + ': ' + errorMsg)},complete: function () {console.log('geolocation complete----------')}})}},listenGeolocation: function () {var that = thisgeolocation.subscribe({callback: function (ret) {that.geolocationListenData = ret},fail: function (errorMsg, errorCode) {console.log('geolocation.subscribe----------' + errorCode + ': ' + errorMsg)}})},cancelGeolocation: function () {geolocation.unsubscribe()},getLocationType: function () {var that = thisgeolocation.getLocationType({success: function (data) {that.typeVaule = data.typesconsole.log('ret - ' + data.types)}})},openLocation: function () {geolocation.openLocation({latitude: 31.94830062319531,longitude: 118.84177933970965,coordType: 'gcj02',name: 'Zhushan Park',address: 'Zhushan Park',scale: 18,success: function () {console.log('openLocation success .')},fail: function (errorMsg, errorCode) {console.log('geolocation.openLocation----------' + errorCode + ': ' + errorMsg)},complete: function () {console.log('openLocation complete.')}})},chooseLocation: function () {console.log('chooseLocation')geolocation.chooseLocation({latitude: 31.948300696908,longitude: 118.84177721902,coordType: 'gcj02',success: function (data) {console.log('chooseLocation success : ' + JSON.stringify(data))},fail: function (errorMsg, errorCode) {console.log('chooseLocation fail : ' + errorCode + ': ' + errorMsg)},complete: function () {console.log('chooseLocation complete.')}})},geocodeQuery: function () {console.log('geocodeQuery')var that = thisgeolocation.geocodeQuery({// Parameters must be Chinesecity: '南京',address: '南京大学',success: function (ret) {that.latitude = ret.latitudethat.longitude = ret.longitudeconsole.info(`### geolocation.geocodeQuery ### ${ret.latitude}: ${ret.longitude}`)},fail: function (errorMsg, errorCode) {console.info(`### geolocation.geocodeQuery ### ${errorCode}: ${errorMsg}`)},complete: function () {console.log('geocodeQuery complete.')}})},reverseGeocodeQuery: function () {var that = thisconsole.log('reverseGeocodeQuery')geolocation.reverseGeocodeQuery({latitude: that.latitude,longitude: that.longitude,coordType: 'gcj02',includePoiInfo: true,success: function (ret) {console.info(`### geolocation.reverseGeocodeQuery ###` + JSON.stringify(ret))},fail: function (errorMsg, errorCode) {console.info(`### geolocation.reverseGeocodeQuery ### ${errorCode}: ${errorMsg}`)},complete: function () {console.log('reverseGeocodeQuery complete.')}})}}
</script>

效果图：

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0201422912819420605?fid=18
原作者：Mayism

如何使用快应用内置地图查看、导航位置相关推荐

微信小程序----使用微信内置地图查看位置wx.openLocation(Object object)
本博客为博主原创,若需转载请联系博主征得同意.有不当之处,敬请指出,共同进步,谢谢! 使用微信内置地图查看位置wx.openLocation(Object object) 1.官方文档 wx.open ...
微信JS-SDK 分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置
微信JS-SDK 分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置一.JS部分 wx.ready(function () {// 1 判 ...
微信JS接口分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置
微信JS接口微信JS接口分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1 ...
微信小程序----wx.openLocation(OBJECT) 使用微信内置地图查看位置
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 开发场景已知地点的经纬度,期望在打开的地图进行标注位置和进行开车.徒步.公交.骑行等的路线规 ...
微信小程序自带地图_微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml 定位 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, map:function() ...
微信公众号内置地图开发ios苹果不显示地图
在微信开发中遇到了安卓正常显示内置地图,但是ios苹果系统不显示,经过排查是因为ios系统调用网页时的经度和纬度必须使用Number类型的,但是安卓的可以. wx.config({debug: fal ...
微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml  <button bindtap="map">定位</button> //ind ...
weixin公众号页面返回上一层_微信公众号jssdk打开内置地图点击返回会回到之前页面，怎么退出页面...
问题描述在使用公众号jssdk过程中,用户需求点击公众号菜单微信内置地图打开指定地点. 暂用实现过程为用户打开空白页面空白页面wx.config wx.openLocation打开内置地图问题 ...
iOS内置地图导航开发指南
0.起步项目版本有内置地图的开发需求,因此做了一波技术预研. 0.1 MapKit MapKit是苹果的内置地图框架,目前在国内使用的是高德地图提供的服务,所以即便是内置地图,也能提供较为详细的地图 ...
微信公众号h5界面获取展示微信内置地图与地图坐标间的转换 — 微信地图（gcj02）转为百度地图
此文章中实例用测试号进行演示 .getLocation openLocation 主要运用微信JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信 ...

如何使用快应用内置地图查看、导航位置

如何使用快应用内置地图查看、导航位置相关推荐

最新文章

热门文章