javascript调用地图导航

标签：无分类：未分类创建时间：2022-12-04 13:36:33 更新时间：2025-01-17 10:39:23

1.前言

在开发微信小程序、支付宝小程序，手机端网页应用的时候，有一个需求，需要调用系统安装的地图软件实现位置导航的功能。

参考文章:
1.有关在Vue中JS如何在H5移动端如何调起第三方地图软件(高德、腾讯、百度)
2.uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
3.uniapp 实现高德地图导航
4.js 调用百度/腾讯/高德地图app 导航初始位置为我的位置也是使用a链接的方式进行开发
5.JS怎么唤醒高德导航 JS通过链接的形式可以打开导航详情.
6.跳转到高德地图或百度地图或高德网页导航这里使用了安卓sdk代码的形式进行了调用。

2.微信

在微信中调用原生的地图接口，还是比较麻烦的，虽然可以使用 openLocation 接口，但是前提就是要配置 jssdk 的签名等内容。

wx.openLocation({
  latitude: 0, // 纬度，浮点数，范围为90 ~ -90
  longitude: 0, // 经度，浮点数，范围为180 ~ -180。
  name: '', // 位置名
  address: '', // 地址详情说明
  scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

参考文章:
1.微信内置地图如何直接唤起第三方App?如图
2.wx.openLocation 使用微信内置地图跳转地图app能设置起点么？
3.使用微信内置地图查看位置接口 wx.openLocation,infoUrl: ‘’ // 在查看位置界面底部显示的超链接,可点击跳转
4.打开 App
5.使用小程序内置地图wx.getLocation和wx.openLocation 这是小程序方面的内容，就是增加了一个去这里的显示按钮。

3.支付宝

支付宝中的程序，大部分都是这个样子的。

这里主要用了高德的api,点注记。我的问题是，当我打开这个应用的时候，点击marker,在支付宝上打开这个点注记点页面，会自动调用高德app进行导航，如何只停留在这个页面，而不用自动调用。只有当点击去这里当时候，才进行跳转呢？我看很多的应用都是停留在了这个页面。我查看了 markOnAMAP 功能，似乎没有参数阻止其打开高德app啊。

参考文章:
1.支付宝小程序map组件如何跳转到高德app中去进行导航
2.ap.openLocation 支付宝调用高德地图接口

4.高德

使用高德定义的协议规则，加上特定的方法，可以实现在浏览器中调用本地App实现导航、路径规划和poi搜索,具体的协议可以查看地图标注这几个页面中的安卓开发中的协议内容，还有ios的内容。

(1) 打开导航

1
2
3

<p><a href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;dev=1">安卓 打开app</a></p></p>
<p><a href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=36.547901&amp;lon=104.258354&amp;dev=1&amp;style=2">安卓 打开app 导航</a></p></p>
<p><a href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=39.980683&amp;lon=116.302&amp;dev=1&amp;style=2">安卓 打开app 输入终点，以用户当前位置为起点开始路线导航 V</a></p></p>

(2) 路径规划

1
2
3

<p><a href="androidamap://route/plan/?sid=&slat=39.92848272&slon=116.39560823&sname=A&did=&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0">安卓 打开app</a></p></p>
<p><a href="androidamap://route/plan/?sid=&slat=39.92848272&slon=116.39560823&sname=A&did=&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0">安卓 打开app 导航</a></p></p>
<p><a href="androidamap://route/plan/?sid=&slat=39.92848272&slon=116.39560823&sname=A&did=&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0">安卓 打开app 输入终点，以用户当前位置为起点开始路线导航 V</a></p></p>

(3) poi搜索

1
2
3

<p><a href="androidamap://viewMap?sourceApplication=appname&poiname=abc&lat=36.2&lon=116.1&dev=0">安卓 打开app</a></p></p>
<p><a href="androidamap://viewMap?sourceApplication=appname&poiname=abc&lat=36.2&lon=116.1&dev=0">安卓 打开app 导航</a></p></p>
<p><a href="androidamap://viewMap?sourceApplication=appname&poiname=abc&lat=36.2&lon=116.1&dev=0">安卓 打开app 输入终点，以用户当前位置为起点开始路线导航 V</a></p></p>

参考文章:
1.调起高德地图
2.高德地图info窗体中超链接点击跳转在app中的实现
3.路径规划

(4) 位置分享
还有一种打开导航的方法，那就是使用高德的位置分享功能，但是这个功能，我暂时没有找到出处，只是在别人的程序中找到了这么一个东西

https://m.amap.com/share/index/__q=39.993253,116.473188,%E6%9D%AD%E5%B7%9E%E7%A7%91%E6%8A%80&src=jsapi&callapp=0&lnglat=116.473188,39.993253&name=%E6%9D%AD%E5%B7%9E%E7%A7%91%E6%8A%80

// 解码后变成了这个样子
https://m.amap.com/share/index/__q=39.993253,116.473188,杭州科技&src=jsapi&callapp=0&lnglat=116.473188,39.993253&name=杭州科技

当在支付宝或者是手机浏览器中，打开这个地址，就变成了这个样子。

5.uniapp

参考文章:
1.uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
2.uniapp 实现高德地图导航

6.浙里办

参考文章:
1.H5接入浙里办导航功能适配三端实现方式

往期推荐

文章目录

1. 1.前言

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。