当前位置: 首页 > 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;避免重复计算&…...

用8086和蜂鸣器DIY音乐盒:手把手教你复刻童年旋律(附完整汇编代码)

用8086和蜂鸣器DIY音乐盒&#xff1a;手把手教你复刻童年旋律&#xff08;附完整汇编代码&#xff09; 记得小时候第一次听到电子贺卡发出《生日快乐》的单调旋律时&#xff0c;那种机械却又神奇的"音乐"让我盯着电路板研究了半天。现在想来&#xff0c;那些简单的方…...

利用快马AI一键生成vmware虚拟机下载与配置脚本,快速搭建开发原型环境

今天想和大家分享一个快速搭建开发环境的实用技巧——利用AI工具自动生成VMware虚拟机下载与配置脚本。作为一个经常需要测试不同开发环境的程序员&#xff0c;我发现手动配置虚拟机实在太费时间了&#xff0c;直到尝试了InsCode(快马)平台的AI生成功能&#xff0c;整个过程变得…...

ClaudeCode 入门详细教程,手把手带你Vibe Coding

本文使用 Mac 进行演示。主要是在安装环节有环境差异。 1. Claude Code 简介 Claude Code 是 Anthropic 推出的面向开发者的 AI 编程协作工具。Claude Code 的核心目标是理解你的整个项目&#xff0c;并参与到真实的编码、修改和重构过程中。Claude Code 不是一个代码生成器&…...

告别玄学调参:手把手教你用STM32F103和MPU9250实现稳定的EKF姿态解算(附源码)

从理论到实战&#xff1a;STM32F103与MPU9250的EKF姿态解算调参全指南 在嵌入式姿态解算领域&#xff0c;扩展卡尔曼滤波&#xff08;EKF&#xff09;算法因其优异的噪声抑制能力而广受青睐。然而&#xff0c;许多开发者在STM32F103等资源受限平台上实现MPU9250的EKF姿态解算时…...

【Typst源文件】Typst 纸张定义完全指南

Typst 通过 page 函数来定义纸张的尺寸、边距、方向等属性。通常使用 #set page() 规则在文档开头进行全局设置。 1. 基础纸张设置 1.1 使用标准纸张尺寸 Typst 支持丰富的标准纸张尺寸&#xff0c;只需传入纸张名称字符串即可&#xff1a; // 设置为 A4 纸张&#xff08;默…...

Qwen3-14B中文大模型部署教程:token处理优化与生成质量调优

Qwen3-14B中文大模型部署教程&#xff1a;token处理优化与生成质量调优 1. 镜像概述与环境准备 Qwen3-14B是由通义千问团队开发的中文大语言模型&#xff0c;在各类自然语言处理任务中表现出色。本教程将详细介绍如何基于优化定制的私有部署镜像&#xff0c;快速搭建Qwen3-14…...

肿瘤免疫微环境解析:8大免疫浸润工具实战指南

1. 肿瘤免疫微环境分析的核心价值 当你拿到一份肿瘤样本的转录组数据时&#xff0c;最令人兴奋的莫过于揭开它的免疫面纱——那些隐藏在肿瘤组织中的免疫细胞究竟在做什么&#xff1f;这就是免疫浸润分析的价值所在。想象一下&#xff0c;肿瘤组织就像一座复杂的城市&#xff0…...

Phi-4-mini-reasoning快速部署:Conda环境+PyTorch2.8适配避坑指南

Phi-4-mini-reasoning快速部署&#xff1a;Conda环境PyTorch2.8适配避坑指南 1. 项目概述 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟&quo…...

深入浅出:从原理到实践,手把手教你理解并校准RV1126 ISP的黑电平(BLC)

深入浅出&#xff1a;从原理到实践&#xff0c;手把手教你理解并校准RV1126 ISP的黑电平(BLC) 在数字图像处理领域&#xff0c;黑电平校准&#xff08;Black Level Calibration, BLC&#xff09;是一个看似简单却至关重要的环节。想象一下&#xff0c;当你用专业相机拍摄星空时…...

4个步骤掌握Faze4机械臂开发:从硬件组装到智能控制的完整实践指南

4个步骤掌握Faze4机械臂开发&#xff1a;从硬件组装到智能控制的完整实践指南 【免费下载链接】Faze4-Robotic-arm All files for 6 axis robot arm with cycloidal gearboxes . 项目地址: https://gitcode.com/gh_mirrors/fa/Faze4-Robotic-arm Faze4开源六轴机械臂项目…...