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

编程入门 行业动态 更新时间:2024-10-28 16:24:24

Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的<a href=https://www.elefans.com/category/jswz/34/1770552.html style=语法格式"/>

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

在 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 = "=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 和微信小程序引入高德地图的语法格式。

更多推荐

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

本文发布于:2023-11-16 21:56:54,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1634355.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:语法   格式   地图   程序   Uniapp

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!