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

不念不忘少年蓝@ 2024-02-19 07:52 6阅读 0赞

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

需要注意的是，这两种语法格式都需要在页面组件的 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 和微信小程序引入高德地图的语法格式。