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

uniapp接入BMapGL百度地图

下面代码兼容安卓APP和H5

百度地图官网:控制台 | 百度地图开放平台 应用类别选择《浏览器端》

/utils/map.js 需要设置你自己的key

export function myBMapGL1() {return new Promise(function(resolve, reject) {if (typeof window.initMyBMapGL1 === 'function') {resolve(window.initMyBMapGL1)return}window.initMyBMapGL1 = function() {resolve(window.initMyBMapGL1)}var script = document.createElement('script')script.type = 'text/javascript'script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key&callback=initMyBMapGL1`script.onerror = rejectdocument.head.appendChild(script)})
}

页面代码

<template><view class="baiduMap"><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 {myBMapGL1} from "@/utils/map.js";let bmap;export default {data() {return {}},methods: {//获取地图信息initMap() {myBMapGL1().then((res) => {// 创建地图实例bmap = new BMapGL.Map("container");//  设置个性化地图// bmap.setMapStyleV2({// 	styleId: '',// });// 地图初始化,设置中心点坐标和地图缩放比例bmap.centerAndZoom(new BMapGL.Point(113.88308, 22.55329), 5);// 开启鼠标滚轮缩放bmap.enableScrollWheelZoom(true);// 地图缩放事件bmap.addEventListener('zoomend', (e) => {console.log("zoomend--", e);});// 地图拖拽事件bmap.addEventListener('dragend', (e) => {console.log("dragend--", e);});})},},mounted() {this.initMap()},beforeDestroy() {// 离开页面销毁地图bmap && bmap.destroy();bmap = null}}
</script><style lang="scss" scoped>
</style>

效果图

相关文章:

uniapp接入BMapGL百度地图

下面代码兼容安卓APP和H5 百度地图官网&#xff1a;控制台 | 百度地图开放平台 应用类别选择《浏览器端》 /utils/map.js 需要设置你自己的key export function myBMapGL1() {return new Promise(function(resolve, reject) {if (typeof window.initMyBMapGL1 function) {r…...

外卖系统开发实战:从架构设计到代码实现

开发一套外卖系统&#xff0c;需要在架构设计、技术选型以及核心功能开发等方面下功夫。这篇文章将通过代码实例&#xff0c;展示如何构建一个基础的外卖系统&#xff0c;从需求梳理到核心模块的实现&#xff0c;帮助你快速掌握开发要点。 一、系统架构设计 一个完整的外卖系…...

神经网络反向传播算法公式推导

要推导反向传播算法&#xff0c;并了解每一层的参数梯度如何计算&#xff0c;以及每一层的梯度受到哪些值的影响&#xff0c;我们使用一个简单的神经网络结构&#xff1a; 输入层有2个节点一个有2个节点的隐藏层&#xff0c;激活函数是ReLU一个输出节点&#xff0c;激活函数是…...

Spark SQL 之 QueryStage

ExchangeQueryStageExec ExchangeQueryStageExec 分为两种...

【shodan】(三)vnc漏洞利用

shodan基础&#xff08;三&#xff09; 声明&#xff1a;该笔记为up主 泷羽的课程笔记&#xff0c;本节链接指路。 警告&#xff1a;本教程仅作学习用途&#xff0c;若有用于非法行为的&#xff0c;概不负责。 count count命令起到一个统计计数的作用。 用上节的漏洞指纹来试…...

每日OJ_牛客_游游的字母串_枚举_C++_Java

目录 牛客_游游的字母串_枚举 题目解析 C代码 Java代码 牛客_游游的字母串_枚举 游游的字母串 描述&#xff1a; 对于一个小写字母而言&#xff0c;游游可以通过一次操作把这个字母变成相邻的字母。a和b相邻&#xff0c;b和c相邻&#xff0c;以此类推。特殊的&#xff0…...

51c深度学习~合集8

我自己的原文哦~ https://blog.51cto.com/whaosoft/12491632 #patchmix 近期中南大学的几位研究者做了一项对比学习方面的工作——「Inter-Instance Similarity Modeling for Contrastive Learning」&#xff0c;主要用于解决现有对比学习方法在训练过程中忽略样本间相似关系…...

嵌入式:Flash的分类以及Jlink/J-flash的编程支持

相关阅读 嵌入式https://blog.csdn.net/weixin_45791458/category_12768532.html?spm1001.2014.3001.5482 常见的Flash大致可以分为以下大类&#xff1a; Serial Nor FlashSerial Nand FlashParallel Nor FlashParallel Nand FlashSerial EEPROM Serial Nor Flash 介绍 Se…...

【爬虫】Firecrawl对京东热卖网信息爬取(仅供学习)

项目地址 GitHub - mendableai/firecrawl: &#x1f525; Turn entire websites into LLM-ready markdown or structured data. Scrape, crawl and extract with a single API. Firecrawl更多是使用在LLM大模型知识库的构建&#xff0c;是大模型数据准备中的一环&#xff08;在…...

遗传算法(Genetic Algorithm, GA)

简介 遗传算法&#xff08;Genetic Algorithm, GA&#xff09;是一种基于自然选择和遗传机制的优化算法&#xff0c;由 John Holland 于20世纪70年代提出。它是一种模拟生物进化过程的启发式搜索算法&#xff0c;被广泛应用于函数优化、机器学习、调度问题等领域。 代码说明 …...

【二分答案+倍增快速幂】课堂练习

P1678 烦恼的高考志愿 #include<bits/stdc.h> using namespace std; const int N1e55; int n,m,a[N];long long bs(int x){int l1,rn;while(l<r){int midlr>>1;if(a[mid]x) return 0;if(a[mid]>x) rmid-1;else lmid1;}//根据前驱后继返回最小差值//printf(&…...

LeetCode 力扣 热题 100道(九)反转链表(C++)

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 方法一&#xff1a;迭代法 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNod…...

Linux之网络基础

网络发展 网络的发展可以从人与人之间的工作模式开始谈起, 人与人的工作模式反应了机器与机器的工作模式: 1. 独立模式: 在网络发展的早期计算机间处于独立模式, 计算机之间相互独立 最开始计算机之间是独立运行的, 数据之间的交互需要人用软盘等存储介质拷贝过去, 一般涉及…...

Oracle收缩表空间的简单方法

在Oracle数据库中&#xff0c;收缩表空间是一种常见的维护操作&#xff0c;可以回收未使用的空间&#xff0c;减少表空间的碎片&#xff0c;提高性能。以下是一些步骤和方法&#xff1a; 1. 识别未使用的空间 首先&#xff0c;需要识别表空间中未使用的空间。可以通过查询 DB…...

C++设计模式行为模式———中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…...

YB2503HV:高效率降压IC,助力电动车、太阳能设备等领域的能源转换

今天我要向大家介绍一款引人注目的产品—— YB2503HV 100V 3A SOP8内置MOS 高效率降压IC。这款单片集成芯片具备可设定输出电流的开关型降压恒压驱动器功能&#xff0c;可广泛应用于电动车、太阳能设备、电子电池充电等领域。让我们一起来看看它的特点和应用吧&#xff01; 首先…...

如何使用Jest测试你的React组件

在本文中&#xff0c;我们将了解如何使用Jest&#xff08;Facebook 维护的一个测试框架&#xff09;来测试我们的React组件。我们将首先了解如何在纯 JavaScript 函数上使用 Jest&#xff0c;然后再了解它提供的一些开箱即用的功能&#xff0c;这些功能专门用于使测试 React 应…...

微网能量管理研究

微网能量管理研究的重点 微网系统的建模 建立分布式能源单元模型以及微网系统的整体运行、协调控制和优化配置等方面的模型 分布式电源控制策略 微网内分布式电源及储能系统运行依赖于电力电子接口技术&#xff0c;需要相应的充放电控制策略 再生能源发电预测 准确预测太阳能…...

Java基础面试题02:简述什么是值传递和引用传递?

面试题&#xff1a;简述什么是值传递和引用传递&#xff1f; 什么是值传递&#xff1f; 值传递&#xff08;pass by value&#xff09;是指在调用函数时&#xff0c;把实际参数的值复制一份传递给函数。换句话说&#xff0c;函数内部对参数的任何修改&#xff0c;都不会影响到…...

【STL】10.set与map的模拟实现

一、源码及框架分析 SGI-STL30版本源代码&#xff0c;map和set的源代码在map/set/stl_map.h/stl_set.h/stl_tree.h等及个头文件中。 map和set的实现结构框架核心部分截取出来如下&#xff1a; // set #ifndef __SGI_STL_INTERNAL_TREE_H #include <stl_tree.h> #endif …...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...