uniapp vue3 调用高德地图 api2.0

第一步 申请高德地图Key

 第二步 

JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

第三步 踩坑

官方提供代码，运行后会发现，JSapi不支持，手机运行白屏、H5运行正常。

 官方示例

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

第四步、解决

uniapp必须得套个图层renderjs　　

注意：vue3 项目不支持 setup script 用法

<script module="test" lang="renderjs">
  import {
    onMounted,
    onUnmounted
  } from "vue";
  // 添加高德安全密钥（不加无法定位）
  window._AMapSecurityConfig = {
    securityJsCode: "ff4310e84e4987bf72b0c2cbb93d662d"
  };
  import AMapLoader from "@amap/amap-jsapi-loader";

  let map = null;

  export default {
    mounted() {
      this.initMap();
    },
    unmounted() {
      map?.destroy();
    },
    methods: {
      initMap() {
        AMapLoader.load({
            key: "2198e11db9d26efd65e305e5109c2385", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          })
          .then((AMap) => {
            map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [118.796877, 32.060255], // 初始化地图中心点位置
            });
            // 初始化逆地理编码

            var geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              city: '010'
            })
            let that = this
            geocoder.getAddress(['118.7239', '32.002'], function(status, result) {
              console.log(result);
              if (status === 'complete' && result.info === 'OK') {
                console.log(result.regeocode.formattedAddress);
                // result为对应的地理位置详细信息
                that.address = result.regeocode.formattedAddress
              }
            })


            // var marker = new AMap.Marker({
            //     icon: "",
            //     position: [118.803678, 32.067247]
            // });
            // map.add(marker);
            // map.setFitView();
          })
          .catch((e) => {
            console.log(e);
          });
      }

    }
  }
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
  #container {
    width: 100%;
    height: 800vh;
  }
</style>

最终app和h5 都可以显示了。