已解决
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
来自网友在路上 160860提问 提问时间:2023-11-04 08:53:49阅读次数: 60
最佳答案 问答题库608位专家为你答疑解惑
在 Uniapp 中,可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序,而引入高德地图则有以下两种语法格式供选择:
- 使用 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>
- 使用原生 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 和微信小程序引入高德地图的语法格式。
查看全文
99%的人还看了
相似问题
- YAML 深入解析:从语法到最佳实践
- 第1天:Python基础语法(四)
- 1. 基础语法
- 【Java 进阶篇】JavaScript JSON 语法入门:轻松理解数据的序列化和反序列化
- 【JavaEE初阶】 JavaScript基础语法——壹
- 物联网AI MicroPython学习之语法 TIMER硬件定时器
- JS,jQuery常用语法记录
- ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程,讲解如何用新的 CSS 语法来解决旧的问题
- 【ES6标准入门】JavaScript中的模块Module语法的使用细节:export命令和imprt命令详细使用,超级详细!!!
- mybatis动态sql语法
猜你感兴趣
版权申明
本文"Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式":http://eshow365.cn/6-31661-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: 工具类Util和通用类Common的反模式
- 下一篇: vm Ubuntu不能复制粘贴