uniapp 高德地图显示

news2024/9/24 7:24:05

1. uniapp 高德地图显示

  使用前需到**高德开放平台(https://lbs.amap.com/)**创建应用并申请Key
  登录 高德开放平台,进入“控制台”,如果没有注册账号请先根据页面提示注册账号
  打开 “应用管理” -> “我的应用”页面,点击“创建新应用”,根据页面提示填写内容创建应用
  在应用下点击“添加”为应用添加Key,根据需要分别为Android平台、iOS平台申请Key
  配置使用高德地图
  准备:https://lbs.amap.com/api/javascript-api-v2/prerequisites
  uni-app(map)https://uniapp.dcloud.net.cn/component/map.html

1.1. 登录控制台

  (1)登录 高德开放平台控制台,如果没有开发者账号,请 注册开发者
  (2)创建 key,进入应用管理,创建新应用,新应用中添加 key,服务平台选择 Web端(JS API)。
在这里插入图片描述
  (3)获取 key 和密钥。创建成功后,可获取 key 和安全密钥。
在这里插入图片描述
  (4)配置manifest.json
在这里插入图片描述

在这里插入图片描述

<template>
	<view>
		<!-- 地图 -->
		<map style="width: 100%; height: 300px;" :latitude="latitude" 
		:longitude="longitude" :markers="markers" :scale="scale">
		</map>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				longitude: 108.952,
				latitude: 34.223,
				scale:5,
				 markers: [{
				longitude: 108.952,
				latitude: 34.223,
					iconPath: '../../static/image/home-active.png',
					width:30,
					height:30
				}],
		}
	}
}
</script>
<style>
</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Springboot集成Camunda并完成一条流程实例

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;设计流程定…

028 方法的重载

方法重载的定义 使用案例 public static void main(String[] args) {// 匹配到max(int a, int b)System.out.println(max(1, 3));// 匹配到max(double a, double b)System.out.println(max(1L, 3L));// 匹配到max(double a, double b, double c, double d)&#xff0c;int自动…

SQL 函数(十二)

SQL 函数&#xff08;十二&#xff09; 一、函数分类 1.1 单行函数 单行函数仅对单个行进行运算&#xff0c;并且每行返回一个结果。 常见的函数类型&#xff1a; 字符、数字、日期、转换 1.2 多行函数 多行函数能够操纵成组的行&#xff0c;每个行组给出一个结果&#x…

【拜年神器】AI写真保姆级教程

1. 介绍 废话不说&#xff0c;先上图看效果 功能简介 上传几张自己的照片&#xff0c;训练之后&#xff0c;就能生成各种风格的AI写真照&#xff0c;主要有无限风格写真、固定模板写真、AI虚拟试衣、人物说话视频四个类别 无限风格写真 固定模板写真 证件照 工作照 婚纱…

k8s中cert-manager管理https证书

前言 目前https是刚需,但证书又很贵,虽然阿里云有免费的,但没有泛域名证书,每有一个子域名就要申请一个证书,有效期1年,1年一到全都的更换,太麻烦了。经过搜索,发现了自动更新证书神器cert-manager;当然cert-manager是基于k8s的。 安装采用Helm方式 Chart地址: ht…

萝卜视频源码前后端带视频演示

萝卜影视源码前端是用JAVA开发的全原生APP源码&#xff0c;后端用的是二次开发的苹果CMS&#xff0c;支持局域网投屏&#xff0c;视频软解硬解&#xff0c;播放器自带弹幕功能。支持解析官方视频&#xff0c;支持M3U8&#xff0c;MP4。 开屏广告&#xff0c;全局广告&#xff0…

lava学习-接口

接口-Interface 1.什么是接口&#xff1f; 例&#xff1a;构造器&#xff0c;代码块在接口中统统没有&#xff0c;也不能创建对象 构造器的使用-----实现类 例&#xff1a;下图中的B类就是一个 实现类 2.接口的好处 继承只能单继承&#xff0c;而接口可以弥补类单继承的不足&am…

iPad“粘贴自”字样不消失解决办法

iPad“粘贴自”字样不消失解决办法 好无语&#xff0c;写论文主要就靠iPad看资料&#xff0c;复制粘帖的时候卡死搞得我无敌焦躁&#xff0c;问了&#x1f34e;支持的客服才解决&#xff0c;方法如下&#xff1a;1.音量上键按一下 2.音量下键按一下 3.一直按开关机键直到出现苹…

备战蓝桥杯---搜索(应用入门)

话不多说&#xff0c;直接看题&#xff1a; 显然&#xff0c;我们可以用BFS&#xff0c;其中&#xff0c;对于判重操作&#xff0c;我们可以把这矩阵化成字符串的形式再用map去存&#xff0c;用a数组去重现字符串&#xff08;相当于map映射的反向操作&#xff09;。移动空格先找…

Nicn的刷题日常之打印水仙花数

目录 1.题目描述 2.解题思路 3.解题 1.题目描述 求出0&#xff5e;100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#xff1d;1^3&#xff0b;5^3&#xff0b;3^3&#xff0c;则1…

使用C#读取PDF中所有文本内容

先安装如下包 using iTextSharp.text.pdf; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text;namespace ReadPdfText {class Program{static void Main(string[] args){string path "0017_审判流程管理信息表2…

HDMI2.1之eARC简介-Dolby Atmos和DTS:X

文章目录 eARC目的更大的带宽更高质量音频支持对象型音频与CEC&#xff08;Consumer Electronics Control&#xff09;的兼容性&#xff1a; 适应流媒体发展Dolby AtmosDTS:X高分辨率音频更高的音频位深度和采样率低延迟音频 对象型音频格式独立对象三维定位动态音场适应性和灵…

【大数据技术攻关专题】「Apache-Flink零基础入门」手把手+零基础带你玩转大数据流式处理引擎Flink(基础加强+运行原理)

手把手零基础带你玩转大数据流式处理引擎Flink&#xff08;运行机制原理加深&#xff09; 前提介绍运行Flink应用运行机制Flink的两大核心组件JobManagerTaskManagerTaskSlot Flink分层架构Stateful Stream ProcessingDataStream和DataSetDataStream&#xff08;数据流&#xf…

顺序表:数据结构的建筑积木

朋友们大家好啊&#xff0c;本节内容我们进入数据结构的第二节&#xff0c;顺序表有关内容&#xff0c;同步我们会学习计组原理与cpp相关知识&#xff0c;求三连啊&#xff01; 本节我们重点探讨动态顺序表关于插入数据和删除数据的多种情况的分析 顺序表 线性表顺序表静态顺序…

浪漫的通讯录(顺序表篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 我会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人能…

[python] os.fork

文章目录 使用 os.fork()注意事项示例安全使用 os.fork()底层原理 os.fork() 是 Python 中用于 Unix/Linux 系统的一个函数&#xff0c;它在当前进程中创建一个子进程。这个函数是 os 模块的一部分&#xff0c;直接调用了 Unix/Linux 系统的 fork 系统调用。fork 系统调用非常基…

Wiringpi不支持树莓派5了, Wiringpi官方好像不更新了

买了树莓派5才知道&#xff0c;Wiringpi不支持树莓派5了&#xff0c; Wiringpi官方好像不更新了。那用什么来替代呢&#xff1f; 通过资料查询&#xff0c;libgpiod 支持io控制&#xff1b; https://github.com/brgl/libgpiod //gpio库 gpiodetect #检测支持的io 可以看到&a…

SpringBoot注解--05--注解@Valid

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1 前言1.1 Bean Validation1.2 Valid实际案例1.3 Spring 中的 valid 注解 2 Valid 详解2.1 源码解析2.2 参数校验使用注解2.3 具体使用流程POST 则可以以实体对象为…

再谈Redis三种集群模式:主从模式、哨兵模式和Cluster模式

总结经验 redis主从:可实现高并发(读),典型部署方案:一主二从 redis哨兵:可实现高可用,典型部署方案:一主二从三哨兵 redis集群:可同时支持高可用(读与写)、高并发,典型部署方案:三主三从 一、概述 Redis 支持三种集群模式,分别为主从模式、哨兵模式和Cluster模式。…

Java并发基础:CountDownLatch全面解析!

内容概要 CountDownLatch的优点在于能够简洁高效地协调多个线程的执行顺序&#xff0c;确保一组线程都完成后才触发其他线程的执行&#xff0c;适用于资源加载、任务初始化等场景。它提供了清晰的等待/通知机制&#xff0c;易于理解和使用&#xff0c;是提升多线程程序性能和可…