uniapp H5端使用百度地图

1、登录百度地图开放平台 https://lbsyun.baidu.com/(没有账号则先去创建一个百度账号)

2、进入百度地图开放平台控制台(导航栏“控制台”),点击“应用管理”-“我的应用”

3、选择“创建应用”,应用模块选择“浏览器端”。创建成功后你就得到一个百度地图AK。

4、接下来就可以开始使用了

首先在index.html页面引入百度地图API

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=你的AK"></script>

正式开写,显示地图,并给地图添加标记点,点击标记点显示地址信息

<template><div id='container'></div>
</template><script>export default {data() {return {// 标记点列表markerList: [{id: 1,longitude: 116.404,latitude: 39.915,title: "天安门",address: "北京市天安门广场"}, {id: 2,longitude: 116.404,latitude: 39.925,title: "故宫博物馆",address: "北京市故宫博物馆"}];}},mounted() {this.initMap();},methods: {initMap() {var map = new BMapGL.Map("container"); // 创建地图实例var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.setHeading(64.5); //设置地图旋转角度map.setTilt(73); //设置地图的倾斜角度// 创建点标记图标var markerIcon = new BMapGL.Icon("icon.png", new BMapGL.Size(23, 26));// 批量添加点标记this.markerList.forEach(item => {var markerPoint = new BMapGL.Point(item.longitude, item.latitude);var marker = new BMapGL.Marker(markerPoint, {icon: markerIcon});map.addOverlay(marker);// 创建信息窗口var opts = {width: 200,height: 60,title: item.title};var infoWindow = new BMapGL.InfoWindow('地址:' + item.address, opts);// 点标记添加点击事件marker.addEventListener('click', function() {// 开启信息窗口map.openInfoWindow(infoWindow, markerPoint);});})},},};
</script><style scoped>#container {width: 100%;height: 500px;// 高度一定要给}
</style>

效果如图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/361383.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

环球赛乐科技有限公司与北京城市学院共建实习“绿色通道”

环球赛乐&#xff08;北京&#xff09;科技有限公司&#xff08;简称“赛氪网”&#xff09;与北京城市学院近日宣布&#xff0c;双方将合作开通顶岗实习“绿色通道”&#xff0c;旨在为实习生提供高质量的实践机会和就业平台。此次合作不仅体现了校企合作的深度融合&#xff0…

1.Android逆向协议-环境搭建

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易锦网校 不是安卓逆向吗&#xff1f;为什么写java代码&#xff1f;因为逆向的时候涉及java语言 JDK环境搭建&#xff1a;JDK是JAVA语…

深度相机辅助导航避障(三):地面点云滤除

前面的章节介绍了坐标变换,以及如何设置深度相机的坐标变换。那就可以很直观从机器人的坐标系对深度相机扫描到的障碍物点云进行处理。 在实际应用中,机器人正确估计周围地形,对于道路的可通过性、路径规划和障碍物检测等方面都很重要。那么在获取深度相机点云数据后就得准…

论文学习_基于导向式模糊测试的二进制程序漏洞验证方法

1. 引言 研究背景及现存问题:基于代码相似性比较的漏洞检测方法属于静态分析方法,不可避免地存在误报率高的问题,对静态检测方法得到的疑似漏洞代码进行人工分析存在工作量大, 效率低的问题。解决该问题的有效的方案之一是使用导向式模糊测试方法,生成能够执行到疑似漏洞…

cesium for unity 打包webgl失败,提示不支持

platform webgl is not supported with HDRP use the Vulkan graphics AR instead.

Nginx调度器

Nginx反向代理 反向代理架构 部署后端Web1服务器 部署后端Web2服务器 配置Nginx服务器&#xff0c;添加服务器池&#xff0c;实现反向代理功能 proxy主机安装nginx 修改/usr/local/nginx/conf/nginx.conf配置文件 重新加载配置 客户端使用火狐浏览器或curl多次访问p…

JAVA二手车交易二手车市场系统源码支持微信小程序+微信公众号+H5+APP

&#x1f697;二手车交易系统小程序&#xff1a;让买卖更轻松&#x1f50d; 功能介绍 我的粉丝、我的关注、获赞、访客 我的动态、认证中心、我的团队、开通会员 免费估值、买二手车、我要卖车、车型选择 每日上新、底价专区、精准筛选、附近展厅商 车辆的详细信息、拨打电…

动态规划——123. 买卖股票的最佳时机 III

目录 1、题目链接 2、题目分析 1.状态表示 2.状态转移方程 3.初始化 4.填表 5.返回值 3、代码解析 1、题目链接 123. 买卖股票的最佳时机 III 2、题目分析 1.状态表示 由题目可知&#xff0c;我们分为两种状态&#xff0c;买入和卖出&#xff0c;又因为只能完成两次交易…

质点动力学

牛顿运动定律 动量守恒 动量定理 动量守恒定律 角动量守恒定律 动量与角动量的对比 例题 机械能守恒定律

cs与msf权限传递,以及mimikatz抓取win2012明文密码

mimikatz抓取win2012明文密码 一、启动cs服务端 二、启动cs客户端 三、创建监听器 四、生成脚本文件 五、选择存放路径 六、开启服务&#xff0c;让win2012能够通过网站下载 七、获得win2012控制权 八、抓取明文密码 mimikatz是可以抓明文的&#xff0c;mimikatz抓明文原理&a…

1966 ssm 流浪猫领养网站系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 流浪猫领养网站系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/…

动手学自然语言处理:解读大模型背后的核心技术

自从 ChatGPT 横空出世以来&#xff0c;自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09; 研究领域就出现了一种消极的声音&#xff0c;认为大模型技术导致 NLP “死了”。在某乎上就有一条热门问答&#xff0c;大家热烈地讨论了这个问题。 有…

【ajax实战03】拦截器

一&#xff1a;axios拦截器 拦截器分类&#xff1a; 请求拦截器以及响应拦截器 拦截器作用&#xff1a; 在请求或响应被then或catch处理前拦截它们 二&#xff1a;请求拦截器 作用&#xff1a; 发起请求之前&#xff0c;调用一个配置函数&#xff0c;对请求参数进行设置…

Python 爬虫从入门到入狱之路一

实际上爬虫一共就四个主要步骤&#xff1a; 明确目标 (要知道你准备在哪个范围或者网站去搜索)爬 (将所有的网站的内容全部爬下来)取 (去掉对我们没用处的数据)处理数据&#xff08;按照我们想要的方式存储和使用&#xff09; 我们在之前写的爬虫程序中&#xff0c;都只是获取…

【STM32-启动文件 startup_stm32f103xe.s】

STM32-启动文件 startup_stm32f103xe.s ■ STM32-启动文件■ STM32-启动文件主要做了以下工作&#xff1a;■ STM32-启动文件指令■ STM32-启动文件代码详解■ 栈空间的开辟■ 栈空间大小 Stack_Size■ .map 文件的详细介绍■ 打开map文件 ■ 堆空间■ PRESERVE8 和 THUMB 指令…

Java面试问题(一)

一.Java语言具有的哪些特点 1.Java是纯面向对象语言&#xff0c;能够直接反应现实生活中的对象 2.具有平台无关性&#xff0c;利用Java虚拟机运行字节码文件&#xff0c;无论是在window、Linux还是macOS等其他平台对Java程序进行编译&#xff0c;编译后的程序可在其他平台上运行…

微软Edge浏览器全解析

发展历程 微软Edge浏览器是一款现代化的浏览器&#xff0c;最初于2015年发布&#xff0c;作为Internet Explorer&#xff08;IE&#xff09;的继任者&#xff0c;并随着Windows 10操作系统一同亮相。然而&#xff0c;早期的Edge浏览器基于EdgeHTML引擎开发&#xff0c;与市场上…

《Windows API每日一练》5.4 键盘消息和字符集

本节我们将通过实例来说明不同国家的语言、字符集和字体之间的差异&#xff0c;以及Windows系统是如何处理的。 本节必须掌握的知识点&#xff1a; 第31练&#xff1a;显示键盘消息 非英语键盘问题 字符集和字体 第32练&#xff1a;显示默认字体信息 第33练&#xff1a;创建逻…

格式化输出软件

一个给图片修改名字的小软件 功能&#xff1a; 输入文件名字&#xff0c;生成一个”当前时间文件名“的格式化内容到剪贴板方便改名 主界面有个复选框&#xff0c;勾选后会生成”文件名当前时间“的内容 演示&#xff1a; 输入无效字符时 代码&#xff1a; import sys from…

Leetcode Hot100之矩阵

1. 矩阵置零 题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 解题思路 题目要求进行原地更改&#xff0c;也就是不能使用额外的空间&#xff0c;因此我们可以使用第一行的元素来记录对应的…