手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)

news2024/11/25 10:42:28

文章目录

  • 1.导航菜单配置
    • 构建导航菜单容器
    • 设置取消事件
    • 调起菜单样式表
  • 2.地图调起事件
    • 导航到这里
    • 获取导航坐标
    • 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
  • 3.地图调起效果

在这里插入图片描述
地图调起功能,是地图URI API是为开发者提供直接调起地图产品(手机客户端)以满足特定业务场景下应用需求的程序接口,开发者只需按照接口规范构造一条标准的URI,便可在PC和移动端浏览器或移动开发应用中调起地图产品,进行地图展示和检索、线路查询、导航等功能,无需进行复杂的地图功能开发。

1.导航菜单配置

构建导航菜单容器

配置百度、高德和腾讯地图的容器,当唤起时,传递HTML内容至对应ID。

    <!--导航菜单-->
    <div class="navi">
        <p id="baidu"></p>
        <p id="gaode"></p>
        <p id="tengxun"></p>
        <p id="cancel">取消</p>
    </div>

设置取消事件

当单击取消时,隐藏底部弹出菜单。

    //导航菜单;
    $("#cancel").click(function () {
        $(".navi").css("display", "none")
    });

调起菜单样式表

默认为隐藏状态display: none;,调起时显示。

/*导航*/
.navi {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto 0;
    width: 100%;
    height: 200px;
    background-color: #FFF;
    border-radius: 10px 10px 0 0;
    z-index: 99999;
    display: none;/*默认隐藏*/
}

.navi > p {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid rgba(139, 145, 160, 0.1);
}

.navi > p:nth-child(4) {
    border-top: 1px solid rgba(139, 145, 160, 0.1);
}

2.地图调起事件

导航到这里

当用户单击导航到这里时,调用getNav(lng, lat, title, address)函数,传递当前POI点位的经纬度坐标、名称和地址,便于不同地图之间的函数使用

html.push('<div class="infoItems" style="float: right;">  <a href="' + pos.poi_order + '" target="_blank"><span class="layui-icon layui-icon-survey"> 立即预约</span></a> <a href="javascript:;" οnclick="getNav(\'' + pos.poi_lon + '\',\'' + pos.poi_lat + '\',\'' + pos.poi_name + '\',\'' + pos.poi_address + '\');"><span class="layui-icon layui-icon-find-fill"> 导航到这里</span></a></div>')

获取导航坐标

系统默认百度坐标系bd09格式,而高德和腾讯使用的是火星系坐标,为了能快速准确的使用同一个坐标实现不同地图APP的使用,需要对坐标进行格式转换。具体参加:《GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)》

  • 百度地图调起格式:http://api.map.baidu.com/geocoder?location=39.990912172420714,116.32715863448607&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo(官方文档:https://lbsyun.baidu.com/index.php?title=uri)
  • 高德地图调起格式:https://uri.amap.com/marker?position=116.473195,39.993253
    (官方文档:https://lbs.amap.com/api/uri-api/guide/mobile-web/point/)
  • 腾讯地图调起格式:https://apis.map.qq.com/uri/v1/marker?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口桥北铁路道口&referer=myapp(官方文档:https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker)

具体封装方法如下:

//获取导航坐标
function getNav(lng, lat, title, address) {
    var lnglat = bd09togcj02(lng, lat);
    //console.log(lnglat);
    //显示导航栏
    $(".navi").css("display", "block");
    //百度导航
    $("#baidu").html('<a href="//api.map.baidu.com/geocoder?location=' + lat + ',' + lng + '&coord_type=bd09ll&output=html&src=lockdatav">百度导航</a>');
    //高德导航
    $("#gaode").html('<a href="//uri.amap.com/marker?position=' + lnglat[0] + ',' + lnglat[1] + '&name=' + address + '">高德导航</a>');
    //腾讯导航
    $("#tengxun").html('<a href="https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lnglat[1] + ',' + lnglat[0] + ';title:' + title + ';addr:' + address + '&referer=myapp">腾讯导航</a>');
}

百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换

//定义一些常量
//var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
//var PI = 3.1415926535897932384626;
var x_PI = parseFloat(3.14159265358979323846264338327950288419716939937510582097494459 * parseFloat(3000.0) / parseFloat(180.0));

var PI = 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280;
var aa = parseFloat(6378245.0);
var ee = 0.00669342162296594323;
/**
 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
 * 即 百度 转 谷歌、高德
 * @param bd_lon
 * @param bd_lat
 * @returns {*[]}
 */
var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
    var bd_lon = +bd_lon;
    var bd_lat = +bd_lat;
    var x = bd_lon - 0.0065;
    var y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
    var gg_lng = z * Math.cos(theta);
    var gg_lat = z * Math.sin(theta);
    return [gg_lng, gg_lat]
};

3.地图调起效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
@漏刻有时

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

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

相关文章

nextjs13临时笔记

动态路由 文件夹以中括号命名[id] -pages: --list: ---[id]: ----index.jsx(访问路径/list/1 即这种形式/list/:id) ---index.jsx(访问路径/list)[...params]gpt接口分析 初始化项目 npm install next react react-dom # or yarn add next react react-dom # or pnpm add n…

WPF教程(六)--依赖属性(2)--属性值优先级与继承

一、 依赖属性的优先级 由于WPF 允许我们可以在多个地方设置依赖属性的值&#xff0c;所以我们就必须要用一个标准来保证值的优先级别。比如下面的例子中&#xff0c;我们在三个地方设置了按钮的背景颜色&#xff0c;那么哪一个设置才会是最终的结果呢&#xff1f;是Black、Re…

[oeasy]python0136_接收输入_input函数_字符串_str

输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a b 5a, b 7, 8 还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法用下划线 分隔开小写字母的 方法这样就可以 更合理地 命名变量了 变量变量 能变的量我可以 手工输入变量的值 吗&#xff1f;&#x1f9…

MongoDB 数据库数据导入 - 关于如何使用 csv 导入数据的命令方法、图形界面可视化导入方法

序言 兴趣使然&#xff0c;突发奇想&#xff0c;想到了就写&#xff0c;就当打发时间了。 一、使用 csv 导入数据的命令方法 csv文件路径问题&#xff0c;绝对路径和相对路径都可以 方法1 type 没有号&#xff0c;也是可以的&#xff0c;空格自动识别 将测试表.csv 文件导…

pikachu靶场-csrf

csrf 跨站请求伪造&#xff08;英语&#xff1a;Cross-site request forgery&#xff09;&#xff0c;也被称为 one-click attack 或者 session riding&#xff0c;通常缩写为 CSRF 或者 XSRF&#xff0c; 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方…

【C++ 六】内存分区、引用

内存分区、引用 文章目录 内存分区、引用前言1 内存分区模型1.1 程序运行前1.2 程序运行后1.3 new 操作符 2 引用2.1 引用基本使用2.2 引用注意事项2.3 引用做函数参数2.4 引用做函数返回值2.5 引用本质2.6 常量引用 总结 前言 本文包含内存分区、引用基本使用、引用注意事项、…

记一次完整的rc.local中启动python脚本报psutil找不到问题解决

文章目录 1&#xff0c;问题1.1&#xff0c;rc.local1.2&#xff0c;watchdog.py 2&#xff0c;问题排查2.1&#xff0c;手动执行start.sh后功能正常2.2&#xff0c;开机启动后rc.local加载start.sh&#xff0c;然后start.sh启动python脚本报错2.3&#xff0c;怀疑是rc.local加…

SAP S/4HANA不是ERP了?

今天浏览了一下SAP官方帮助&#xff08;Help&#xff09;网站&#xff0c;有一个意外的发现&#xff0c;如上图&#xff1a;SAP S/4HANA和SAP ERP是分别显示的&#xff0c;这让我想起了前段时间一个朋友和我说&#xff1a;“S/4HANA现在都不叫ERP了&#xff0c;因为里面包括了超…

【C++初阶】C++入门(一):命名空间C++的输入输出缺省参数函数重载

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 1.什么是C1.1 C的发…

最新Tuxera NTFS2023最新版Mac读写NTFS磁盘工具 更新详情介绍

Tuxera NTFS for Mac是一款Mac系统NTFS磁盘读写软件。在系统默认状态下&#xff0c;MacOSX只能实现对NTFS的读取功能&#xff0c;Tuxera NTFS可以帮助MacOS 系统的电脑顺利实现对NTFS分区的读/写功能。Tuxera NTFS 2023完美兼容最新版本的MacOS 11 Big Sur&#xff0c;在M1芯片…

Python统计学:如何理解样本统计量?

本期介绍样本统计量是怎么算的&#xff0c;并用Python来模拟随机抽样。用一个在鱼塘捞鱼的简单例子来理解样本均值的概念。 如何理解重复试验&#xff1f; 指能够在完全相同条件下进行多次的试验&#xff1b; 比如我们抛10枚硬币&#xff0c;用来计算正面出现的概率&#xff…

4.7 贝塞尔曲线

学习目标&#xff1a; 学习贝塞尔曲线可以遵循以下步骤&#xff1a; 1.了解基本概念和定义&#xff1a;学习贝塞尔曲线前需要了解贝塞尔曲线的基本概念和定义&#xff0c;如何定义一条贝塞尔曲线、控制点的概念以及贝塞尔曲线的几何性质等。 2.学习贝塞尔曲线的构造方法&…

Django搭建一个简易GPT网站

文章目录 环境安装创建主项目和应用程序在 settings.py 文件中注册应用程序在 views.py 文件中为应用程序创建视图配置应用程序的 URL创建和渲染模板KEY实现发送提示功能注意事项完整源码 环境安装 pip install django openai创建主项目和应用程序 处理完项目的环境后&#x…

第二个机器学习应用:乳腺癌数据集在决策树模型上的挖掘

目录 决策树优化与可视化 1 决策树分类 2 决策树可视化 3 显示树的特征重要性 特征重要性可视化 决策树回归 1 决策树回归 决策树优化与可视化 1 决策树分类 from sklearn.datasets import load_breast_cancer from sklearn.tree import DecisionTreeClassifier from sk…

基于C++开发的医院医学影像PACS 可二次开发,三维重建

医学影像PACS系统源码&#xff0c;集成三维影像后处理功能&#xff0c;包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分析等功能。系统功能强大&#xff0c;代码完整。有演示。 本套PACS系统专门针对医院工作流程设计的&am…

分布式ID生成策略总结

1、UUID 2、数据库自增ID 2.1、主键表 2.2、ID自增步长设置 3、号段模式 4、Redis INCR 5、雪花算法 6、美团(Leaf) 7、百度(Uidgenerator) 8、滴滴(TinyID) 总结比较 背景 在复杂的分布式系统中&#xff0c;往往需要对大量的数据进行唯一标识&#xff0c;比如在对…

springboot中的日志

作者&#xff1a;~小明学编程 文章专栏&#xff1a;spring框架 格言&#xff1a;热爱编程的&#xff0c;终将被编程所厚爱。 目录 为什么需要日志 如何使用日志功能 日志的打印 获取日志对象 使用日志对象打印日志 日志级别 为什么我们需要把日志分为如此多的种类呢&am…

今天面试招了个25K的测试员,从腾讯出来的果然都有两把刷子···

公司前段时间缺人&#xff0c;也面了不少测试&#xff0c;前面一开始瞄准的就是中级的水准&#xff0c;也没指望来大牛&#xff0c;提供的薪资在15-25k&#xff0c;面试的人很多&#xff0c;但平均水平很让人失望。看简历很多都是4年工作经验&#xff0c;但面试中&#xff0c;不…

《系统架构设计》-07-面向领域的技术设计

文章目录 1 实体与值对象1.1 实体对象1.1.1 唯一标识&#xff08;Identity&#xff09;1.1.2 可变性贫血模型充血模型 1.2 值对象1.3 示例&#xff08;识别实体和值对象&#xff09;1&#xff09;识别实体对象2&#xff09;提取值对象3&#xff09;挖掘实体的关键行为4&#xf…

solidworks2022 - feature works 变灰的解决方法

文章目录 solidworks2022 - feature works 变灰的解决方法概述实验feature works 变灰问题的重现备注END solidworks2022 - feature works 变灰的解决方法 概述 feature works 用于step文件转零件. 一般是不同版本的solidworks交换文件的方法. 今天突然发现, 我自己转出的ste…