html5唤醒百度高德地图,H5内唤醒百度、高德APP

前几天,联合黑卡反馈了一个需求,需要在H5中打开百度APP或者是高德APP,于是我在网上查了相关文档,下面放上链接: 1.高德地图 2.百度地图

具体思路就是点击选择地图的时候,先去请求APP链接,800毫秒后无响应,再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP,都会跳到H5的链接。有好的想法可以评论一下。

下面放相关代码:

function ToggleAppAndH5( AppUrl , AppCallback = () => {}){

// 先走APP

const ifr = document.createElement('iframe');

ifr.src = AppUrl;

ifr.style.display = 'none';

document.body.appendChild(ifr);

setTimeout(function(){

document.body.removeChild(ifr);

}, 3000);

// 800毫秒后调用H5链接

let timer = setTimeout(function () {

clearTimeout(timer);

AppCallback();

}, 800);

window.onblur = function () {

clearInterval(timer);

};

}

function Callback(){

// 这里放

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款基于Vue.js的跨平台应用框架,支持同时开发iOS、Android和H5等多个平台的应用程序。而高德地图App是一款地图应用程序,提供了地图、导航、定位等功能。本文将介绍如何在uniapp中使用高德地图App完成车辆轨迹动画。 1.安装高德地图插件 在uniapp项目中使用高德地图,需要先安装uni-app插件,可以在插件市场中搜索“高德地图插件”进行安装。 安装完成后,在项目中的manifest.json中添加以下配置: ``` "permissions":{ "scope.userLocation": { "desc": "获取当前位置信息及地图功能" } }, "sitemapLocation":"sitemap.json", "app-plus": { "modules": { "AMap": "uni-AMap", "AMapUI": "uni-AMapUI" }, "appid": "" } ``` 2.创建地图 在页面中创建地图组件,代码如下: ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers"></map> </view> </template> <script> export default { data() { return { longitude: 116.397428, latitude: 39.90923, markers: [{ id: 1, longitude: 116.397428, latitude: 39.90923, iconPath: '/static/location.png', width: 50, height: 50, title: '当前位置' }] } } } </script> ``` 3.添加动画 在页面中添加动画,代码如下: ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers"></map> <view class="button" @click="startAnimation">开始动画</view> </view> </template> <script> export default { data() { return { longitude: 116.397428, latitude: 39.90923, markers: [{ id: 1, longitude: 116.397428, latitude: 39.90923, iconPath: '/static/location.png', width: 50, height: 50, title: '当前位置' }], animation: null } }, methods:{ startAnimation(){ const animation = uni.createAnimation({ duration: 10000, timingFunction: 'linear' }) animation.translate(100, 100).step() this.markers[0].animation = animation.export() this.animation = animation } } } </script> ``` 4.运行程序 在HBuilder X中运行程序,点击“开始动画”按钮即可看到车辆轨迹动画。 以上就是在uniapp中使用高德地图App完成车辆轨迹动画的步骤。通过使用高德地图插件和uniapp框架,我们可以很方便地实现地图功能和动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值