H5如何实现app的leaflet实现 运动轨迹迹功能

app内h5页面调用app功能
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') & -1 || u.indexOf('Adr') & -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
*调用ios jsInteractionApp方法 , 调用android jsInteractionApp并传参
function jsInteractionApp(code, obj,url){
var param = {"code": code, "obj": obj,callBackURL:url};
if(isiOS){
window.webkit.messageHandlers.jsInteractionApp.postMessage(param);
window.jsObj.jsInteractionApp(JSON.stringify(param));
window.bridge.callRouter;
为和app端约定的唯一标识,obj为传惨,url为回调地址
没有更多推荐了,
加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划。适合有定位的移动设备,可以查询到从&我的位置&到目的地的路径规划,并直接导航。
场景二、调起高德地图的路线规划功能
导航是目前JSAPI无法覆盖到的高德地图客户端的重要功能,目前高德地图提供了驾车、公交、步行三种方式的导航服务,JSAPI在Driving、Transfer、Walking三个路线规划插件类中提供了相关功能调起接口,使用这些接口开发者可以在Web页面中直接打开客户端的路线规划结果界面,也可以看到客户端提供的策略更丰富的路线规划结果,只需要点击一下便可以开始导航。想要实现这个功能只需要两步:
加载路线规划插件并创建对象
这里我们以驾车路线规划为例,加载Driving插件,创建Driving对象,同时设置驾车策略为最短时间:
AMap.plugin(["AMap.Driving"], function() {
var drivingOption = {
policy:AMap.DrivingPolicy.LEAST_TIME,
var driving = new AMap.Driving(drivingOption); //构造驾车导航类
调用searchOnAMAP方法
Driving对象创建完毕之后,只需要在需要的地方调用searchOnAMAP方法就可以了,下面代码中是在button的点击事件中调用的。searchOnAMAP方法接收一个JSON对象参数,对象中需要指定路线规划的起终点坐标,同时也可以设定起终点名称,示例代码中我们利用了JSAPI路线规划的结果数据中的起终点坐标。调起高德地图客户端之后,只要点击&开始导航&就可以使用导航功能了:
//根据起终点坐标规划驾车路线
driving.search(
[{keyword:'北京站'},{keyword:'北京大学'}],
function(status,result){
button.onclick = function(){
driving.searchOnAMAP({
origin:result.origin,
destination:result.destination
查看全部源代码
&!DOCTYPE html&
&head lang="en"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"&
&title&&/title&
body,#mapContainer{
height:<span style="background-color: #f5f5f5; color: #%;
width:<span style="background-color: #f5f5f5; color: #%;
text-align: center;
font-size:12px;
position: absolute;
right: 15px;
.qrcodetxt{
background-color: #0D9BF2;
padding: 6px;
color: white;
position: absolute;
width: 100%;
bottom: 24px;
cursor: pointer;
border-radius: 5px;
background-color: #0D9BF2;
padding: 6px;
width: 160px;
color: white;
margin: 0 auto;
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" /&
&script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.ToolBar"&&/script&
function init() {
var button = document.getElementById('bt');
map = new AMap.Map("mapContainer");
AMap.plugin(["AMap.Driving"], function() {
var drivingOption = {
policy:AMap.DrivingPolicy.LEAST_TIME,
var driving = new AMap.Driving(drivingOption); //构造驾车导航类
//根据起终点坐标规划驾车路线
driving.search([{keyword:'北京站'},{keyword:'北京大学'}],function(status,result){
button.onclick = function(){
driving.searchOnAMAP({
origin:result.origin,
destination:result.destination
map.addControl(new AMap.ToolBar());
if(AMap.UA.mobile){
document.getElementById('bitmap').style.display='none';
bt.style.fontSize = '16px';
bt.style.marginRight = '10px';
&body onload="init()"&
&div id="mapContainer" &&/div&
&div class='center'&
&div id='bt' class="btmtip"&点击去高德地图&/div&
&div class="panel" id='bitmap' style='top:15px'&
&img src="http://a.amap.com/lbs/static/img/drivingonapp.png" style='width:120height:120px'&
&div class='qrcodetxt' style='text-align: center'&手机扫码打开demo&/div&
---------------------------------------------------------------------------------------------------------------
止,凡注册成为高德开发者的新用户,即可获赠 1 张阿里云优惠券,可享受最低 6 折购买阿里云产品。数量有限,发完即止。详情点击:&
阅读(...) 评论()iH5高级教程:H5创意展示,背景移动特效_百度文库
您的浏览器Javascript被禁用,需开启后体验完整功能,
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
iH5高级教程:H5创意展示,背景移动特效
iH5,一个专业的HTML5工具及创作服务平台,...|
总评分0.0|
&&利用iH5工具,实现背景移动特效
阅读已结束,下载本文需要
想免费下载更多文档?
定制HR最喜欢的简历
下载文档到电脑,同时保存到云知识,更方便管理
&#xe64e;加入VIP
还剩9页未读,
定制HR最喜欢的简历
你可能喜欢六边形运动轨迹_六边形运动轨迹html5游戏_4399h5游戏-h.4399.com
Hexagons Moving
分类:&&|&&大小:1.18M&&|&&日期:
请记住本站网址 ,点击,方便下次再玩。
电脑上玩HTML5游戏建议使用360极速、搜狗高速、谷歌、火狐等浏览器
此游戏适合设备:iPhone&nbsp&nbspiPad&nbsp&nbsp安卓
操作指南 (本游戏合适16岁以上用户)
鼠标点击,合理操作。
游戏加载完毕点击播放按钮 - 选择关卡1即可开始游戏
成功闯过关卡。
请记住本站网址 ,点击,方便下次再玩。 《六边形运动轨迹》小游戏由4399用户提供。
相关游戏推荐
精彩专题推荐
12345678910
12345678910
文明办网文明上网举报、纠纷处理及不良内容举报电话:(转6) |举报邮箱:&|
Copyright & 2004 -
4399.com All Rights Reserved. 四三九九网络股份有限公司&版权所有
微信扫一扫关注4399小游戏如何玩转H5网站,实现快速转换成APP?
将 H5 网站转换成 App,不是简单套个 WebView 壳完事,关键是达到原生版的功能和体验。
wap2app 是一款将 H5 网站转换成 App 的前端开发框架,底层基于 HTML5 PLUS 引擎,可以调用几十万原生 API,实现更强大的推送、支付、分享、定位等能力,解决 M 站因 API 不足而导致的功能缺失。
wap2app 同时提供 subNView 技术,实现原生 View 渲染,可实现窗口动画期间完成页面渲染,达到原生版的流畅体验。
那么,将 M 站快速转换成 App 的前端开发框架如何实现呢?我们特此邀请到 DCloud 公司 CTO 崔红保老师做直播分享。
小板凳已备好,开始学习啦~
一款将 M 站快速转换成 App 的前端开发框架
Web App 和原生 App 的体验差距
wap2app 的设计理念
wap2app 开发方案简介
利用 subNView 加速 Web 页面渲染
利用 Plus API 增强更多原生能力
前端开发工程师、Android 开发工程师、iOS 开发工程师、Java 开发工程师、系统架构师等
51CTO 开发者 QQ 交流群:
16:00-17:00(PS:预计讲解用时 45 分钟,然后是 15 分钟 QA 互动环节)
图文结合,讲解结束统一提问
本次直播特邀专家:崔红保 DCloud 公司 CTO
崔红保,DCloud 公司 CTO,mui 前端开源框架负责人,十年手机跨平台中间件研发管理经验,近年专注前端性能优化及 HTML5 增强实现,希望在 HTML5 跨平台、快迭代的先天优势下,解决其部分能力缺失、性能较弱的短板,从而达到原生体验。
欢迎有需求的 IT 技术人员扫描加群学习
责任编辑:
声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。
今日搜狐热点

我要回帖

更多关于 记录运动轨迹的app 的文章

 

随机推荐