Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式

news/2024/11/7 12:16:37/

在 Uniapp 中,可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序,而引入高德地图则有以下两种语法格式供选择:

  1. 使用 Vue.js 的语法格式:
<template><view><map :longitude="longitude" :latitude="latitude" :markers="markers"></map></view>
</template>
<script>
export default {data() {return {longitude: "",latitude: "",markers: []}},onLoad() {// 获取地图信息uni.getLocation({type: "gcj02",success: res => {this.longitude = res.longitudethis.latitude = res.latitude}})// 添加标记点this.markers.push({id: 1,longitude: 113.324520,latitude: 23.099994,title: "我的位置",iconPath: "/static/images/location.png",width: 50,height: 50})}
}
</script>
  1. 使用原生 JavaScript 的语法格式:
<template><view><web-view :src="webviewSrc"></web-view></view>
</template>
<script>
export default {data() {return {webviewSrc: ""}},onLoad() {// 引入高德地图 JS APIthis.webviewSrc = "https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key&callback=initMap"}
}
</script>

需要注意的是,这两种语法格式都需要在页面组件的 JavaScript 文件中引入相应的 API 文件,如下所示:

// 引入 Vue.js 的语法格式需要的 API 文件
import { Map, Marker } from "@/uni_modules/@dcloudio/vue-amap/uni.vue3.amap.js"// 引入原生 JavaScript 的语法格式需要的 API 文件
import global from "@/common/utils/global.js"

以上是在uni-app中同时兼容 H5、web、App 和微信小程序引入高德地图的语法格式。


http://www.ppmy.cn/news/1195630.html

相关文章

Canvas雷达显示图,动态扫描

做卫星项目的时候&#xff0c;会涉及到雷达图&#xff0c;用于扫描卫星&#xff0c;给人形象化的感觉。以下代码为canvas实现的demo&#xff0c;请运行查看. 效果图 源代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8&qu…

[极客大挑战 2019]Http 1

题目环境&#xff1a; 看起来挺花里胡哨的 F12查看源代码寻找隐藏文件 这是啥子呀&#xff0c;果然防不胜防 点击隐藏文件Secret.php 它不是来自这个地址的请求 报头&#xff1a;https://Sycsecret.buuoj.cn 需要抓包&#xff0c;在抓包前了解部分数据包参数 GET:到 Host:来自 …

Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用HtmlJS怎么实现 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550…

掌动智能兼容性测试四大优势

兼容性测试是将应用中的场景脚本化&#xff0c;根据业务需求定制脚本&#xff0c;提交到云端千台真机&#xff0c;并行自动测试&#xff0c;从安装、启动、运行、功能、UI、核心业务流程、复杂互动场景等多维度&#xff0c;深度发现应用兼容性问题&#xff0c;并结合人工复审&a…

一、修改Ubuntu的IP

1、配置虚拟机 三台虚拟机&#xff0c;分别为node1、node2、node3&#xff0c;内存分别为4G、2G、2G&#xff0c;现存最好为&#xff08;>40G&#xff09;&#xff0c;如下&#xff1a; 2、修改主机名 分别打开三台虚拟机&#xff0c;root用户输入一下命令&#xff1a; no…

蓝桥杯官网填空题(猜字母)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 把 abcd...s 共19个字母组成的序列重复拼接 106 次&#xff0c;得到长度为 2014 的串。 接下来删除第 1 个字母&#xff08;即开头的字母 a&#xff09;&#…

华为RS设备状态及接口配置命令

1、查看硬件信息 ①查看序列号 查看整机序列号 display esn display sn ②、查看功率 电源功率 display power 查看光模块功率 display transceiver interface gigabitethernet 1/0/0 verbose ③、查看风扇 display fan ④、查看温度 display temperature all ⑤、查看硬…

【Leetcode】22 括号生成 递归

数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())","()()(…