当前位置: 首页 > news >正文

高德地图实现-微信小程序地图导航

效果图:

微信图片_20230806201545.png微信图片_20230806201628.png

一、准备阶段

  • 1、在高德开放平台注册成为开发者
  • 2、申请开发者密钥(key)。
  • 3、下载并解压高德地图微信小程序SDK

高德开放平台:

注册账号(https://lbs.amap.com/)) 申请小程序应用的 key
image.png

应用管理(https://console.amap.com/dev/key/app)) -> 我的应用 -> 创建新应用
image.png
生成的 key 即可用在程序中

  • 下载相关 sdk 文件,导入 amap-wx.js 到项目中:https://lbs.amap.com/api/wx/download

微信小程序:

1.在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js 从相关下载页面下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,如下图所示。
image.png

2.设置小程序安全通讯域名,为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。
登录微信公众平台,在 “设置”->“开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:

  1. app.json中加入
"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示","dowload": "您的文件访问权限用于打开文件"}},

在你需要引用地图的页面的js文件中引入 amap-wx.js 文件。

var amapFile = require('../../../libs/amap-wx.130'); //如:..­/..­/libs/amap-wx.js

完整代码


import {baipaoGps
} from "../../../utils/api/car.js";
var amapFile = require('../../../libs/amap-wx.130'); //如:..­/..­/libs/amap-wx.js
Page({data: {longitude: 117.3590007750093, //经度latitude: 22.846911841310202, //维度scale: 17, //地图默认缩放等级showModal: false, //弹框显隐modalData: {}, //详情信息G: {pi: 3.141592653589793,a: 6378245,ee: .006693421622965943,x_pi: 52.35987755982988},licence:'',//车牌号markers:[],//点位数据},onLoad: function (options) {if (options) {this.setData({licence:options.licence})//初始化地图this.mapCtx = wx.createMapContext('map');this.baipaoGps(options).then((res) => {if (res) {//加载点位数据this.loadMarkers();} })}else{wx.showToast({title:  '车牌号为空',icon: 'none'})}},/*** 请求数据*/baipaoGps(options){return new Promise((resolve, reject) => {console.log(options)baipaoGps(options).then(res => {if (res.data.success) {this.data.markers.push(res.data.result)resolve(res.data.result)} else {wx.showToast({title:  res.data.message,icon: 'none'})}})})},loadMarkers: function () {//生成 markers 列表,用于在地图上展示let markersData = this.data.markers.map(marker => {// console.log(marker)var a = this.transfor2Mars( Number(marker.baipaoGpsInfoBean.gps.lat),  Number(marker.baipaoGpsInfoBean.gps.lng));return {id: Number(marker.extra.id),longitude: a.Lng,latitude: a.Lat,vehNum: marker.extra.licenseName,location:marker.baipaoGpsInfoBean.location,iconPath: '../../../static/img/marker.png',width: 40,height: 40,};});this.setData({markers: markersData,longitude:markersData[0].longitude,latitude:markersData[0].latitude});},// 点击标记点时触发markertap(e) {//点击 marker 时触发,获取对应的点位信息并展示弹框// console.log(e.detail)let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);this.setData({showModal: true,modalData: markerData});},// 关闭弹框onClose() {this.setData({showModal: false});},navigateToMap() {const modalData = this.data.modalData;const { longitude, latitude } = modalData;// 调用小程序API打开高德地图并进行导航wx.openLocation({longitude,latitude,name: modalData.location, // 标记点名称,可根据实际情况设置scale: 18, // 地图缩放级别,可根据实际情况设置});},isOutOfChina(e, a) {return a < 72.004 || a > 137.8347 || (e < .8293 || e > 55.8271)},transforLat(e, a) {var t = 2 * e - 100 + 3 * a + .2 * a * a + .1 * e * a + .2 * Math.sqrt(Math.abs(e));return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,t += 2 * (20 * Math.sin(a * this.data.G.pi) + 40 * Math.sin(a / 3 * this.data.G.pi)) / 3,t += 2 * (160 * Math.sin(a / 12 * this.data.G.pi) + 320 * Math.sin(a * this.data.G.pi / 30)) / 3},transforLng(e, a) {var t = 300 + e + 2 * a + .1 * e * e + .1 * e * a + .1 * Math.sqrt(Math.abs(e));return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,t += 2 * (20 * Math.sin(e * this.data.G.pi) + 40 * Math.sin(e / 3 * this.data.G.pi)) / 3,t += 2 * (150 * Math.sin(e / 12 * this.data.G.pi) + 300 * Math.sin(e / 30 * this.data.G.pi)) / 3},transfor2Mars(e, a) {if (this.isOutOfChina(e, a))return {Lat: e,Lng: a};var t = this.transforLat(a - 105, e - 35),r = this.transforLng(a - 105, e - 35),n = e / 180 * this.data.G.pi,o = Math.sin(n);o = 1 - this.data.G.ee * o * o;var s = Math.sqrt(o);return {Lat: e + (t = 180 * t / (this.data.G.a * (1 - this.data.G.ee) / (o * s) * this.data.G.pi)),Lng: a + (r = 180 * r / (this.data.G.a / s * Math.cos(n) * this.data.G.pi))}},
})
<view><!-- 地图控件 --><view><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"bindmarkertap="markertap"></map></view><!-- 弹框 --><view><van-popup closeable bind:close="onClose" round custom-style="height: 30%" position="bottom" show="{{ showModal }}"bind:close="onClose"><view class="detailsBox"><view><text>车牌号码 :</text><text>{{modalData.vehNum}}</text></view><view><text>所在位置:</text><text>{{modalData.location}}</text><view class="dh" bindtap="navigateToMap">地图导航</view><image style="width:30px;height:30px;margin-top: 5px;position: absolute;"src="/static/img/map/daohang.png"></image></view></view></van-popup></view>
</view>
#map{width: 100%;height: 100vh;
}.detailsBox{padding: 20rpx 20rpx 0rpx 28rpx;font-size: 28rpx;
}
.detailsBox view:nth-child(n+2){margin-top: 20rpx;
}
view{font-size: 18px;
}
.dh {display: inline-block;/* padding: 10px 20px; */color: rgb(76, 36, 255);font-size: 15px;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;margin-left: 20px;
}.dh:hover {background-color: #0056b3;
}

相关文章:

高德地图实现-微信小程序地图导航

效果图&#xff1a; 一、准备阶段 1、在高德开放平台注册成为开发者2、申请开发者密钥&#xff08;key&#xff09;。3、下载并解压高德地图微信小程序SDK 高德开放平台&#xff1a; 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.ama…...

你已经应用了哪种服务注册和发现的模式呢?

前面历史文章中我们有说过关于微服务的注册和发现&#xff0c;并以 etcd 作为简单例子简单阐述了关于服务注册和发现的应用 那么日常工作中&#xff0c;你已经使用了服务注册和发现的哪些模式呢&#xff1f; 服务注册和发现的作用 首先&#xff0c;简单说明一下服务注册和发…...

Python爬虫技术在SEO优化中的关键应用和最佳实践

大家好&#xff01;今天我要和大家分享一个关于SEO优化的秘密武器&#xff1a;Python爬虫技术。在这篇文章中&#xff0c;我们将探讨Python爬虫在SEO优化中的关键应用和最佳实践。无论您是一名SEO专家、网站管理员&#xff0c;还是对优化网站曝光度感兴趣的初学者&#xff0c;都…...

基于支持向量机的试剂条图像识别,基于SVM的图像识别,SVM的详细原理,Libsvm工具箱使用注意事项

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 代码下载链接: 基于支持向量机SVM的试剂条图像自动识别,基于SVM的试剂条图像自动读取资源-CSDN文库 https://download.csdn.net/download/abc991835105/88215944 SVM应用实例…...

PbootCMS在搭建网站

1、打开网站 https://www.pbootcms.com/ 2、点击 “本站” 下载最新的网站代码 3、在本地laragon/www下创建目录&#xff08;hejuwuye&#xff09;&#xff0c;并将代码放进去 4、创建本地数据库&#xff0c;数据库名称为&#xff1a; hejuwuye&#xff0c;然后将static/bac…...

C语言经典100例题(56-60)--画圆;画方;画线

目录 【程序56】题目&#xff1a;画图&#xff0c;学用circle画圆形 【程序57】题目&#xff1a;画图&#xff0c;学用line画直线。 【程序58】题目&#xff1a;画图&#xff0c;学用rectangle画方形。 【程序59】题目&#xff1a;画图&#xff0c;综合例子。 【程序60】题…...

linux相关知识以及有关指令3

在linux的世界中我们首先要有万物皆文件的概念&#xff0c;那么在系统中有那么多的文件&#xff0c;我们该怎么区分呢&#xff1f;文章目录 1. 文件分类2. 文件的权限1). 拥有者和所属组以及other2). 文件的权限3). 粘滞位4). 对于权限修改的拓展知识点a.修改权限b.修改拥有者所…...

关于Synchronized

Synchronized用于实现线程间的同步。它可以被用于方法或代码块上&#xff0c;确保同一时间只有一个线程可以访问被 synchronized 修饰的代码&#xff0c;也就是常说的锁&#xff0c;synchronized有三点作用 1&#xff09;实现线程安全&#xff1a;通过使用 synchronized&#x…...

深度学习(Python)学习笔记2

第二章 感知机 2.1 感知机是什么 感知机接收多个输入信号,输出一个信号。 感知机的信号会形成流,向前方输送信息。 感知机的信号只有“流/不流”(1/0)两种取值。 本学习笔记中,0对应“不传递信号”,1对应“传递信号”。 图中、是输入信号,是输出信号,、是权重。图…...

gitlab操作

1. 配置ssh 点击访问 2. 创建新分支与切换新分支 git branch 新分支名 // 创建 git checkout 新分支名 // 切换到新分支3. 查看当前分支 git branch*所指的就是当前所在分支 4. 本地删除文件后与远程git同步 git add -A git commit -m "del" git push...

docker day04

Dockerfile: - FORM: 1.指定基础镜像&#xff0c;可以起别名&#xff0c;也可以指定多个FROM指令&#xff0c;用于多阶段构建; 2.加载触发器&#xff0c;加载ONBUILD指令; 3.不指定基础镜像&#xff0c;声明当前镜像不依赖任何镜像&#xff0c;官方…...

任意区域的色彩一致性处理方法

影像任意感兴趣区域的色彩一致性处理方法&#xff0c;主要是针对掩膜后的影像&#xff0c;类似下图&#xff0c;对非背景区域的像素进行处理 其中非黑色部分我们叫待匀色区域。 这种处理 对于wallis 和直方图匹配 很容易实现&#xff0c;但是颜色转移就相对而言 困难点。 颜…...

听GPT 讲Istio源代码--pilot

File: istio/operator/pkg/translate/translate.go 在Istio项目中&#xff0c;istio/operator/pkg/translate/translate.go文件的作用是处理Istio Operator的配置信息和Kubernetes的资源对象之间的翻译和转换。 首先&#xff0c;scope和componentToAutoScaleEnabledPath是用于记…...

pdfjs解决ie浏览器预览pdf问题

pdfjs是一个js库&#xff0c;可以将pdf文件用canvas重新绘制&#xff0c;从而无需借助pdf读取插件就可以直接预览。 目前chrome内核的浏览器已内置pdf读取插件&#xff0c;但ie浏览器还没有。而我们最近在做的一个项目使用对象是医院&#xff0c;使用的浏览器竟然还是ie。所以我…...

千里共婵娟 | 结合微信公众号用JavaScript完整开发实现换中秋头像的功能

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…...

pt26django教程

admin 后台数据库管理 django 提供了比较完善的后台管理数据库的接口&#xff0c;可供开发过程中调用和测试使用 django 会搜集所有已注册的模型类&#xff0c;为这些模型类提拱数据管理界面&#xff0c;供开发者使用 创建后台管理帐号: [rootvm mysite2]# python3 manage.…...

javabasic

计算机基础 一、学前知识 1. 计算机组成 2. 进制的概念 &#xff08;1&#xff09;二进制的存储 计算机不管是内存还是硬盘&#xff0c;都是以二进制的形式存储。如同一张巨大的表格&#xff0c;里面都是由0和1组成。 二进制&#xff1a;逢2进1 基数为2&#xff0c;数值部分…...

电子词典项目

目录 目录 头文件&#xff1a;dict.h: 源文件&#xff1a;dict.c: 服务器测试文件&#xff1a;serDict.c: 客户端测试文件&#xff1a;cliDict.c: 头文件&#xff1a;dict.h: #ifndef __DICT_H__ #define __DICT_H__ #include<myhead.h> #include<sqlite3.h>#de…...

SQL12 高级操作符练习(2)

描述 题目&#xff1a;现在运营想要找到学校为北大或GPA在3.7以上(不包括3.7)的用户进行调研&#xff0c;请你取出相关数据&#xff08;使用OR实现&#xff09; 示例&#xff1a;user_profile iddevice_idgenderageuniversitygpa12138male21北京大学3.423214male复旦大学4.03…...

python写代码过程中的坑230915

1.解释代码IndentationError: expected an indented block 这个错误通常是由于代码缩进错误导致的。 在Python中,代码块(如循环、条件语句、函数等)通常使用缩进来表示。因此,如果你在期望缩进的位置没有正确缩进代码,就会出现"IndentationError: expected an inden…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...