In Uniapp, it can be compatible with H5, web, app, and WeChat applet at the same time and introduce the syntax format of AMAP.

In Uniapp, you can use the uni-app unified API to be compatible with H5, web, App and WeChat mini programs at the same time. When introducing Amap, there are the following two syntax formats to choose from:

1. Use Vue.js syntax format:

<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.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>

2. Use native JavaScript syntax:

<template>
  <view>
    <web-view :src="webviewSrc"></web-view>
  </view>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      webviewSrc: ""
    }
  },
  onLoad() {
    
    
    // 引入高德地图 JS API
    this.webviewSrc = "https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key&callback=initMap"
  }
}
</script>

It should be noted that both syntax formats require the introduction of the corresponding API file in the JavaScript file of the page component, as shown below:

// 引入 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"

The above is the grammatical format that is compatible with H5, web, App and WeChat applet to introduce Amap in uni-app.