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>exportdefault{data(){return{longitude:"",latitude:"",markers:[]}},onLoad(){// 获取地图信息
    uni.getLocation({type:"gcj02",success:res=>{this.longitude = res.longitude
        this.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>exportdefault{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 和微信小程序引入高德地图的语法格式。