使用hbuilder的maps模块调起百度地图导航

首先需要在百度地图开放平台,创建应用拿到appid,然后在hbuilder进行如下配置:

这里写图片描述
这里写图片描述
这里写图片描述

hbuilder的manifest.json的配置如下:

permissions下添加如下代码:

"Maps": {"description": "地图"}

然后引入百度地图的js:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='这里是访问应用的ak'"></script>

根据传入的起始位置和终点位置进行导航

                $.ajax({                type: "GET",timeout:50000,               url: 'http://api.map.baidu.com/geocoder/v2/?address='+terminal+'&output=json&coord_type=wgs84&ak=31hswa0Y8ZprG7ztIFTAuPon5x4pqBb3&callback=showLocation',dataType:"jsonp",async: false,     success: function(data){console.log(JSON.stringify(data));var lat = data['result']['location']['lat'];var lng = data['result']['location']['lng'];$.ajax({                type: "GET",timeout:50000,               url: 'http://api.map.baidu.com/geocoder/v2/?location='+lat+','+lng+'&output=json&coord_type=wgs84&ak=31hswa0Y8ZprG7ztIFTAuPon5x4pqBb3&callback=showLocation',dataType:"jsonp",async: false,    success: function(data){// console.dir(data['result']['addressComponent']['city']);city = data['result']['addressComponent']['city'];// alert(city);if(terminal != ''){var geolocation = new BMap.Geolocation();var gc = new BMap.Geocoder(); geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){// alert('您的位置:'+r.point.lng+','+r.point.lat);var pt = r.point; gc.getLocation(pt, function(rs){    var addComp = rs.addressComponents;    // location.href = 'http://api.map.baidu.com/direction?origin=latlng:'+r.point.lat+','+r.point.lng+'|name:我的位置&destination=latlng:'+lat+','+lng+'|name:'+terminal+'&mode=driving&origin_region='+addComp.city+'&destination_region='+city+'&output=html&src=yourCompanyName|yourAppName';function plusReady(){// 设置目标位置坐标点和起始位置坐标点var src = new plus.maps.Point(r.point.lng,r.point.lat); // 起始位置 var dst = new plus.maps.Point(lng,lat); //// 调用系统地图显示 plus.maps.openSysMap( dst, terminal, src );}if(window.plus){plusReady();}else{document.addEventListener("plusready",plusReady,false);}});  }else {alert('failed'+this.getStatus());}        },{enableHighAccuracy: true})}},error:function(){alert("网络异常");}});},error:function(){alert("网络异常");}});

备注:不是很了解maps模块的可以去html5+Dcloud:
(http://www.dcloud.io/runtime.html)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517114.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot2.x RabbitMQ Nacos Nacos-Config

文章目录一、依赖配置1. 引入依赖2. 配置文件3. 主配置二、生产者代码代码Conding2.1. 发送客户端2.2. 确认机制2.3. 消息 return机制2.4. controller2.5. MQ工具类2.6. 常量类三、消费端3.2. 消费者代码3.2. RabbitMQ常用命令一、依赖配置 1. 引入依赖 <!--服务注册发现--…

考拉海购技术支持的前世今生

本文来自考拉海购技术支持中心负责人--书渊的分享&#xff0c;想和大家聊一聊考拉技术支持的前世今生&#xff0c;在这个发展历程的介绍当中&#xff0c;大家也可以此对考拉窥一斑而知全豹。当然&#xff0c;既然是聊我们的家常(“黑历史”)&#xff0c;我会从这几年在考拉供应…

PHP 依赖镜像出问题后,阿里工程师的一顿“神操作“令人叫绝!

阿里妹导读&#xff1a;上个月&#xff0c;PHP开发者在网上纷纷反映出现 Composer 镜像无法访问的问题。阿里云内部一位 90 后工程师顾咏连夜开工排查&#xff0c;快速解决问题后&#xff0c;他在问题群里收到了一大波来自用户的红包。顾咏最后谢绝了红包&#xff0c;接受了阿里…

Elasticsearch SkyWalking 分布式链路追踪

文章目录1. 安装包下载2. 解压3. 修改配置文件4. 启动5. 测试验证1. 安装包下载 https://www.apache.org/dyn/closer.cgi/skywalking/8.8.0/apache-skywalking-apm-8.8.0.tar.gzhttps://archive.apache.org/dist/skywalking 2. 解压 tar -zxvf apache-skywalking-apm-8.8.0…

为什么HR 20分钟就淘汰了一个前端高级工程师?

最近HR小姐姐面了一个前端开发&#xff0c;4 年经验&#xff0c; 应聘的是前端高级开发工程师。他的简历中提到很多技术点&#xff0c;从 HTML、CSS、JavaScript 再到 Vue.js 和 React 一个都不缺&#xff0c;跨平台PC、移动端、小程序也都经历过&#xff0c;看着像个实战派。深…

angular图片上传

html代码&#xff1a; 当input出发change事件会调用touchUpdateImg方法&#xff0c;传入file对象和需要展示得到imgsmall属性&#xff0c;通过FileReader对象读取文件对象&#xff0c;我使用了apply进行了监听&#xff0c;之前不使用apply进行了监听&#xff0c;之前不使用app…

千万创业者的自白:踩过坑才明白这些真相!

“大众创业、万众创新”的浪潮正兴&#xff0c;随着国家对自主创业扶持力度的加强&#xff0c;中国的初创企业正在蓬勃发展&#xff0c;据统计&#xff0c;最近五年中国新注册的公司约有3000万家。 而另一方面&#xff0c;在轰轰烈烈的创业大潮中&#xff0c;市场竞争指数也急…

SpringBoot2 集成 skywalking 实现链路追踪

文章目录1. 启动skywalking2. 配置探针3. 启动项目4. 测试验证5. 效果图1. 启动skywalking cd D:\apache-skywalking-apm-bin\binwindows环境&#xff1a; 双击startup.bat linux环境&#xff1a; startup.sh2. 配置探针 -javaagent:D:\apache-skywalking-apm-bin\agen…

以“基”取胜:戴尔科技云平台 释放企业新动能

2020年春天&#xff0c;以云计算、5G、人工智能为代表的“新基建”蔚然成风&#xff0c;不仅助力中国产业智能化、信息化进入加速推进的快车道&#xff0c;促使全产业链迈开高质量发展的新步伐。更是面向长远&#xff0c;构筑数字经济创新发展之基。可以说&#xff0c;没有任何…

Nexus协议,闲鱼一体化开发的幕后玩家

Serverless是这几年兴起的一个概念&#xff0c;Serverless可以帮助开发者减轻甚至摆脱传统后端应用开发所需要的服务器设备的设置和运维工作&#xff0c;并以服务接口的方式为开发者提供所需要的功能。它希望开发者更加专注于应用逻辑本身&#xff0c;而不是被琐碎的基础设施细…

angular封装富文本编辑器指令

这个富文本编辑器的基本用法可以去该编辑器作者的github看下 (https://github.com/echosoar/medit) html代码和css 原版&#xff1a; 改版的&#xff1a; /*富文本编辑器*/#meditToolBar {position:fixed;z-index:100;width:100%;left: 0;bottom: 0;height:40px;background:…

日处理数据量超10亿:友信金服基于Flink构建实时用户画像系统的实践

导读&#xff1a;当今生活节奏日益加快&#xff0c;企业面对不断增加的海量信息&#xff0c;其信息筛选和处理效率低下的困扰与日俱增。由于用户营销不够细化&#xff0c;企业 App 中许多不合时宜或不合偏好的消息推送很大程度上影响了用户体验&#xff0c;甚至引发了用户流失。…

玛莎拉蒂“跨界”腾讯车联打造车载互联系统,新Ghibli “触电新生”

7月17日&#xff0c;玛莎拉蒂首款“触电”车型新Ghibli正式发布&#xff0c;与新亚太区代言人——锋芒玩家陈伟霆先生共同亮相&#xff0c;诠释年轻无畏的先锋态度。在创新科技方面&#xff0c;新Ghibli率先搭载了玛莎拉蒂与腾讯车联共同打造的全新车载互联系统。 【玛莎拉蒂新…

认识Java异步编程

一 、认识异步编程 通常Java开发人员喜欢使用同步代码编写程序,因为这种请求(request)/响应(response)的方式比较简单&#xff0c;并且比较符合编程人员的思维习惯;这种做法很好&#xff0c;直到系统出现性能瓶颈&#xff1b;在同步编程方式时由于每个线程同时只能发起一个请求…

云原生应用万节点分钟级分发协同实践

导读&#xff1a;2019 年天猫 双11&#xff0c;阿里巴巴核心系统首次实现 100% 上云。面对全球最大的交易洪峰&#xff0c;阿里云扛住了每秒 54.4 万笔的交易峰值&#xff0c;这是“云原生”与“天猫全球狂欢节”的一次完美联名。 &#xff08;图为 2019 年天猫 双11 成交额&am…

为啥Underlay才是容器网络的最佳落地选择

导语&#xff1a; 几年前&#xff0c;当博云启动自研容器网络研发的时候&#xff0c;除了技术选型的考虑&#xff0c;我们对于先做 Underlay 还是 Overlay 网络也有过深度的讨论。当时的开源社区以及主流容器厂商&#xff0c;多数还是以 Overlay 网络方案为主&#xff0c;但在我…

oracle用户编辑文件中文乱码

文章目录一、分析定位1. 现象2. 查看当前编码3. 配置文件现状二、解决方案2.1. 编辑配置文件2.2. 调整2.3. 刷新环境变量2.4. 效果图2.5. 配置文件源码一、分析定位 1. 现象 2. 查看当前编码 登录oracle用户&#xff0c;查看当前oracle用户下的编码 [oraclelocalhost ~]$ ec…

今年圣诞,麋鹿第一次请假

年末的圣诞节来啦~~&#xff01; 但我们的圣诞老人为什么有点低落&#xff1f;&#xff1f; 是在愁信太多&#xff1f;没地儿放&#xff1f; 不会是看不懂我信上的“鬼画符”吧.. 难道是在忌惮空中的雾霾&#xff1f;哈哈~ 圣诞老人&#xff1a;o(╥﹏╥)o 不不不&#xf…

高德网络定位算法的演进

1.导读 GPS定位精度高&#xff0c;且早已成为移动设备标配&#xff0c;但GPS也具有一些难以克服的缺陷&#xff0c;包括&#xff1a; 冷启动时间长。GPS启动时&#xff0c;需要进行搜星&#xff0c;锁定卫星信号&#xff0c;然后再进行位置技术&#xff0c;这个过程可能会达到…

疫情之下网络安全如何保障?Akamai防护方案前来“保驾护航”

2020年春天&#xff0c;以5G、人工智能、云计算为代表的“新基建”蔚然成风&#xff0c;着眼国家数字经济体系建设&#xff0c;打造数字经济体系底座的“新基建”&#xff0c;无疑成为中国经济整体应对未来发展的核心方案。然而&#xff0c;面临“新基建”与企业数字化进程的突…