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

uniapp接入高德地图

下面代码兼容安卓APP和H5 

高德地图官网:我的应用 | 高德控制台 ,绑定服务选择《Web端(JS API)》

/utils/map.js 需要设置你自己的key和安全密钥

export function myAMap() {return new Promise(function(resolve, reject) {if (typeof window.onLoadMyAMap === 'function') {resolve(window.onLoadMyAMap)return}window.onLoadMyAMap = function() {resolve(window.onLoadMyAMap)}window._AMapSecurityConfig = {securityJsCode: '你的安全密钥',};var script = document.createElement('script')script.type = 'text/javascript'script.src =`https://webapi.amap.com/maps?v=2.0&key=你的key&callback=onLoadMyAMap&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch`script.onerror = rejectdocument.head.appendChild(script)})
}

页面代码

<template><view class="gaodeMap"><view class="map" v-bind:style="{ height: windowHeight * 2 + 'rpx'}" id="container"></view></view>
</template><script>export default {data() {return {windowHeight: "",}},methods: {},mounted() {//默认高度uni.getSystemInfo({success: res => {this.windowHeight = res.windowHeight;}});}}
</script><script module="allmap" lang="renderjs">import {myAMap} from "@/utils/map.js";let amap;const _window = window;export default {data() {return {latitude: 22.543648,longitude: 114.057923,zoom: 5,}},methods: {//获取地图信息initMap() {myAMap().then(() => {// 创建地图实例amap = new AMap.Map('container', {zoom: 5, // 地图缩放比例zooms: [4, 20], // 地图缩放区间center: [114.057923, 22.543648], //设置经纬度为地图中心resizeEnable: true, // 开启地图缩放});//  设置个性化地图// var styleName = "amap://styles/" + 'darkblue'// amap.setMapStyle(styleName);// 地图缩放事件amap.on('zoomend', (e) => {});// 地图拖拽事件amap.on('dragend', (e) => {});})},},mounted() {this.initMap()},beforeDestroy() {// 离开页面销毁地图amap && amap.destroy();amap = null}}
</script><style lang="scss" scoped>
</style>

效果图

相关文章:

uniapp接入高德地图

下面代码兼容安卓APP和H5 高德地图官网&#xff1a;我的应用 | 高德控制台 &#xff0c;绑定服务选择《Web端(JS API)》 /utils/map.js 需要设置你自己的key和安全密钥 export function myAMap() {return new Promise(function(resolve, reject) {if (typeof window.onLoadM…...

(UI自动化测试)web自动化测试

web自动化测试 UI自动化测试介绍 自动化测试理论&#xff1a; 图片上的文字等等不能做测试&#xff0c;只能发现固定的bug 工具选择及介绍 浏览器驱动&#xff1a;找元素--核心&#xff1a;驱动&#xff08;操作元素&#xff09;--通过代码...

【es6进阶】如何使用Proxy实现自己的观察者模式

观察者模式&#xff08;Observer mode&#xff09;指的是函数自动观察数据对象&#xff0c;一旦对象有变化&#xff0c;函数就会自动执行。这里&#xff0c;我们是使用es6的proxy及reflect来实现这个效果。 实现效果 业务分析 源数据 const object2 {name: "张三"…...

住宅IP怎么在指纹浏览器设置运营矩阵账号

矩阵账号的运营已经成为了许多企业和个人推广策略中的重要一环。通过构建和管理多个社交媒体或电商平台的账号&#xff0c;可以有效地扩大品牌影响力&#xff0c;提高市场覆盖率。然而&#xff0c;随着平台对账号关联的限制越来越严格&#xff0c;如何安全、有效地运营这些矩阵…...

表格数据处理中大语言模型的微调优化策略研究

论文地址 Research on Fine-Tuning Optimization Strategies for Large Language Models in Tabular Data Processing 论文主要内容 这篇论文的主要内容是研究大型语言模型&#xff08;LLMs&#xff09;在处理表格数据时的微调优化策略。具体来说&#xff0c;论文探讨了以下…...

CentOS7 如何查看kafka topic中的数据

1. 确保 Kafka 服务运行 先检查 Kafka 和 Zookeeper 是否正在运行&#xff1a; systemctl status kafka systemctl status zookeeper 如果没有启动&#xff0c;先启动服务&#xff1a; systemctl start zookeeper systemctl start kafka 2. 进入 Kafka 安装目录 通常 …...

VRRP实现出口网关设备冗余备份

VRRP虚拟路由冗余 vrrp实现设备主备备份 Tips&#xff1a; VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的IP地址为默认网关&#xff0c;实现网关的备份。协议版本: VRRPV2 (常用)和VRRPV3:VRRPV2仅适用于IPv4…...

超详细:Redis分布式锁

如何基于 Redis 实现一个最简易的分布式锁&#xff1f; 不论是本地锁还是分布式锁&#xff0c;核心都在于“互斥”。 在 Redis 中&#xff0c; SETNX 命令是可以帮助我们实现互斥。SETNX 即 SET if Not eXists (对应 Java 中的 setIfAbsent 方法)&#xff0c;如果 key 不存在…...

Vue与React的Suspense组件对比

在Vue和React中都内置了Suspense组件&#xff0c;该组件用于处理异步组件加载。当Suspense包裹的实际组件内容尚未加载完成时会先展示后备内容&#xff0c;等待组件内容加载完成后再切换成实际组件内容。这可以显著提升用户体验&#xff0c;适用于大数据加载、组件懒加载等场景…...

Spring框架深度剖析:特性、安全与优化

文章目录 Spring框架简介主要特性1. 依赖注入&#xff08;Dependency Injection, DI&#xff09;2. 面向切面编程&#xff08;Aspect-Oriented Programming, AOP&#xff09;3. 声明式事务管理4. 强大的MVC框架5. 集成测试支持6. 多种数据访问技术的支持 安全性1. 认证&#xf…...

硬盘文件误删:全面解析、恢复方案与预防策略

一、硬盘文件误删现象概述 在日常使用电脑的过程中&#xff0c;硬盘文件误删是许多用户都曾遇到过的问题。这种意外的数据丢失&#xff0c;不仅可能让我们辛苦编辑的文档、珍贵的照片和视频等瞬间消失&#xff0c;还可能对工作和生活造成重大影响。硬盘文件误删&#xff0c;如…...

tcpdump抓包 wireShark

TCPdump抓包工具介绍 TCPdump&#xff0c;全称dump the traffic on anetwork&#xff0c;是一个运行在linux平台可以根据使用者需求对网络上传输的数据包进行捕获的抓包工具。 tcpdump可以支持的功能: 1、在Linux平台将网络中传输的数据包全部捕获过来进行分析 2、支持网络层…...

Android system_server进程

目录 一、system_server进程介绍 二、system_server进程启动流程 2.1 startBootstrapServices 2.2 startCoreServices 2.3 startOtherServices 2.4 startApexServices 三、如何使用系统服务 3.1 app进程调用系统服务 3.2 native进程调用系统服务 3.3 system_server进…...

Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)

1、前言 在 Vue 3 项目中结合 vue-i18n 和 Element Plus 实现中英文切换是一个常见的需求。下面是一个详细的步骤指南&#xff0c;帮助你完成这个任务。 安装引入 1. 安装依赖 首先&#xff0c;你需要安装 vue-i18n 和 Element Plus。 npm install vue-i18nnext element-p…...

python实现猜数字游戏( 可视化easygui窗口版本 )

1.先上源代码 import random import easygui as egdef guess_ordinary():answer random.randint(0, 11)user_answer int(eg.enterbox(msg "请在0-10中选择一个整数: ", title "猜数字"))if user_answer answer:eg.msgbox(msg "恭喜你&#xff…...

自由学习记录(23)

Lua的学习 table.concat(tb,";") 如果表里带表&#xff0c;则不能拼接&#xff0c;表里带nil也不能&#xff0c;都会报错 true和false也不可以&#xff0c;数字和字符串可以 if要和一个end配对&#xff0c;所以 if a>b then return true end end 两个end …...

Java语言程序设计 选填题知识点总结

第一章 javac.exe是JDK提供的编译器public static void main (String args[])是Java应用程序主类中正确的main方法Java源文件是由若干个书写形式互相独立的类组成的Java语言的名字是印度尼西亚一个盛产咖啡的岛名Java源文件中可以有一个或多个类Java源文件的扩展名是.java如果…...

鸿蒙生态:开发者的新蓝海与挑战

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

4.3 MySQL 存储函数

存储函数是一种数据库对象&#xff0c;允许用户将常用的 SQL 逻辑封装为可复用的函数&#xff0c;通过调用函数完成特定的计算或业务逻辑。 1. 简介 1.1 什么是存储函数 存储函数&#xff08;Stored Function&#xff09;是用户定义的一段 SQL 逻辑&#xff0c;返回一个值&am…...

【Python刷题】动态规划相关问题

动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种用于解决多阶段决策最优化问题的算法策略。它通过把原问题分解为相对简单的子问题&#xff0c;记录子问题的解&#xff08;通常使用表格等数据结构存储&#xff09;&#xff0c;避免重复计算&…...

ISO/SAE 21434:2021 逐条审核判定表

A 章节号&#xff5c;B 条款&#xff5c;C 要求内容&#xff5c;D 符合性&#xff5c;E 证据 / 说明&#xff5c;F&#xff1a;不符合整改项符合性选项&#xff1a;符合 / 部分符合 / 不符合 / 不适用章节号条款审核要求内容符合性证据 / 备注整改项44.1建立网络安全生命周…...

企业级OA系统高可用方案:泛微ecology+Nginx负载均衡最佳实践

企业级OA系统高可用架构设计与实践&#xff1a;泛微ecologyNginxResin全栈解决方案 在数字化转型浪潮中&#xff0c;办公自动化系统(OA)已成为企业核心IT基础设施。作为国内领先的协同管理平台&#xff0c;泛微ecology承载着企业关键业务流程&#xff0c;其稳定性直接影响组织运…...

使用MATLAB进行DeOldify结果的后处理与定量分析

使用MATLAB进行DeOldify结果的后处理与定量分析 如果你是一位习惯在MATLAB环境中工作的研究人员或工程师&#xff0c;当你想对DeOldify这类AI图像上色工具的输出结果进行更深入的评估时&#xff0c;可能会觉得缺少趁手的分析工具。直接看效果图固然直观&#xff0c;但如何量化…...

当openclaw遇见ai:借助快马平台打造能理解内容的智能抓取命令

最近在开发一个叫openclaw的网页抓取工具时&#xff0c;发现单纯抓取网页内容已经不能满足需求了。很多时候我们需要对抓取的内容进行二次处理&#xff0c;比如自动摘要、分类、去噪等。这时候就想到了借助AI来增强工具的能力&#xff0c;正好发现了InsCode(快马)平台这个好帮手…...

SEO_SEO数据监控与分析的关键指标介绍

SEO数据监控与分析的关键指标介绍 在当今数字营销的世界里&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为了每个网站运营者和数字营销人员必不可少的技能。SEO数据监控与分析是SEO工作的重要环节&#xff0c;通过对关键指标的监控和分析&#xff0c;我们可以更好…...

C++的std--allocator_traits分配器特性与自定义内存管理的适配

C标准库中的内存管理一直是个既基础又复杂的主题。std::allocator_traits作为C11引入的分配器特性模板&#xff0c;为自定义内存管理提供了统一的适配接口&#xff0c;让开发者能在不重写整套分配逻辑的情况下&#xff0c;灵活扩展内存管理策略。无论是实现高性能内存池&#x…...

【建议收藏】彻底剥离“机器味”:2026硬核横评10款降AI神器,实录97.98%极限降至7.46%

现在的知网、维普AIGC检测已经不同往日了&#xff0c;哪怕你逐字手打&#xff0c;只要句式稍显机械&#xff0c;系统就会判定疑似AI生成。很多同学为了降低ai率&#xff0c;把论文改成了毫无逻辑的口水话&#xff0c;结果AI率反而炸了。 别再盲目试错&#xff0c;为了帮大家在…...

错位排序算法

首先&#xff0c;让我们理解什么是错位排列&#xff1a;错位排列是指在排列中&#xff0c;任何一个元素都不在自己原来的位置上。比如&#xff0c;对于序列 {1,2,3}{1,2,3}&#xff0c;一个错位排列可能是 {3,1,2}{3,1,2}&#xff0c;因为 11 不在位置 11 上&#xff0c;22 不在…...

深入理解 MySQL 事务:从基础到实战,一篇吃透

在开发和运维 MySQL 数据库的过程中&#xff0c;事务&#xff08;Transaction&#xff09; 是绕不开的核心知识点&#xff0c;它是保证数据库数据安全、一致、可靠的基石。无论是电商下单、银行转账、支付结算&#xff0c;还是日常的业务数据操作&#xff0c;都离不开事务的支撑…...

Qwen3.5-2B镜像免配置部署:开箱即用WebUI(7860端口)快速上手教程

Qwen3.5-2B镜像免配置部署&#xff1a;开箱即用WebUI&#xff08;7860端口&#xff09;快速上手教程 1. 模型简介 Qwen3.5-2B是通义千问系列中的轻量化多模态基础模型&#xff0c;仅有20亿参数规模&#xff0c;专为低功耗、低门槛部署场景设计。这个版本特别适合在端侧设备和…...