uniapp 高德地图显示

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.hqwc.cn/news/450936.html

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

相关文章

Python—数据可视化Seaborn大全:参数详解与实战案例全解析【第52篇—python:Seaborn大全】

文章目录 Seaborn库常用绘图详解与实战引言安装与导入一、散点图参数说明实战案例 二、直方图参数说明实战案例 三、线性关系图参数说明实战案例 四、热力图参数说明实战案例 五、分布图参数说明实战案例 六、箱线图参数说明实战案例 七、联合分布图参数说明实战案例 八、小提琴…

AJAX-常用请求方法和数据提交

常用请求方法 请求方法&#xff1a;对服务器资源&#xff0c;要执行的操作 axios请求配置 url&#xff1a;请求的URL网址 method&#xff1a;请求的方法&#xff0c;如果是GET可以省略&#xff1b;不用区分大小写 data&#xff1a;提交数据 axios({url:目标资源地址,method…

ES6-数组的解构赋值

一、数组的解构赋值的规律 - 只要等号两边的模式相同&#xff0c;左边的变量就会被赋予对应的值二、数组的解构赋值的例子讲解 1&#xff09;简单的示例&#xff08;完整的解构赋值&#xff09; 示例 //基本的模式匹配 // a&#xff0c;b,c依次和1&#xff0c;2&#xff0c…

freeswitch对接FunASR实时语音听写

1、镜像启动 通过下述命令拉取并启动FunASR软件包的docker镜像&#xff1a; sudo docker pull \registry.cn-hangzhou.aliyuncs.com/funasr_repo/funasr:funasr-runtime-sdk-online-cpu-0.1.7 mkdir -p ./funasr-runtime-resources/models sudo docker run -p 10096:10095 -i…

ctfshow web-77

开启环境: 先直接用伪协议获取 flag 位置。 c?><?php $anew DirectoryIterator("glob:///*"); foreach($a as $f) {echo($f->__toString(). );} exit(0); ?> 发现 flag36x.txt 文件。同时根目录下还有 readflag&#xff0c;估计需要调用 readflag 获…

java hutool工具类实现将数据下载到excel

通过hutool工具类&#xff0c;对于excel的操作变得非常简单&#xff0c;上篇介绍的是excel的上传&#xff0c;对excel的操作&#xff0c;核心代码只有一行。本篇的excel的下载&#xff0c;核心数据也不超过两行&#xff0c;简洁方便&#xff0c;特别适合当下的低代码操作。 下载…

Kettle 解决数据同步缓慢及性能效率问题 (数据同步利用时间戳解耦,性能通过配置优化提升90%)

一. 介绍 在数据同步过程中&#xff0c;缓慢的同步速度和低效率的性能往往是令人头痛的问题。本文将介绍如何通过Kettle解决数据同步缓慢及性能效率问题&#xff0c;其中主要涉及数据同步利用时间戳解耦和通过配置优化提升性能高达90%的方法 。 在先前的博客文章中&#xff0c…

LabVIEW风力发电机在线监测

LabVIEW风力发电机在线监测 随着可再生能源的发展&#xff0c;风力发电成为越来越重要的能源形式。设计了一个基于控制器局域网&#xff08;CAN&#xff09;总线和LabVIEW的风力发电机在线监测系统&#xff0c;实现风力发电机的实时监控和故障诊断&#xff0c;以提高风力发电的…

Vue.js设计与实现(霍春阳)

Vue.js设计与实现 (霍春阳) 电子版获取链接&#xff1a;Vue.js设计与实现(霍春阳) 编辑推荐 适读人群 &#xff1a;1.对Vue.js 2/3具有上手经验&#xff0c;且希望进一步理解Vue.js框架设计原理的开发人员&#xff1b; 2.没有使用过Vue.js&#xff0c;但对Vue.js框架设计感兴趣…

个性化DIY制作硬模空心耳机壳使用什么?

制作硬模空心耳机壳需要使用到以下工具和材料&#xff1a; 硬质材料&#xff1a;如金属、塑料、UV树脂胶液等&#xff0c;用于制作耳机壳的硬质部分。模具&#xff1a;用于制作耳机壳的形状和尺寸&#xff0c;可以使用塑料、金属等材料制作模具。连接器和线材&#xff1a;用于…

AES加密原理

AES是一个迭代的、分组密码加密方式&#xff0c;可以使用128 、192和256位密钥。与 公共密钥密码使用密钥对不同&#xff0c;对称密钥密码使用相同的密钥加密和解密数据。 通过分组密码返回的加密数据的位数与输入数据相同。迭代加密使用一个循环结 构&#xff0c;在该循环中重…

vue3项目中如何实现图片的二次处理

在说这个之前&#xff0c;我们要先理解图片的二次处理与图片压缩之间的差异。 图片的二次处理除了对图片进行压缩&#xff0c;还可以进行更多特效的处理&#xff0c;可以对图片进行宽高的重设&#xff0c;图像位置适应性调整&#xff0c;清晰的的控制&#xff0c;背景颜色的添…