记录一次用uniapp在h5和微信小程序显示地图并获取当前位置

其中小程序是使用的是map组件显示地图；用uni.getLocation获取当前位置
h5网页使用是引入高德的地图；用高德地图的getCurrentPosition获取当前位置, 并使用了import和通过script标签的两种方式引入高德的js

1. 在高德开发平台注册账号

代码里的key和jsCode是我申请好的
下面是申请链接
https://console.amap.com/dev/key/app

2.代码如下

<template>
  <view class="content">
<!--    #ifdef MP-WEIXIN-->
    <map class="map" :latitude="latitude" :longitude="longitude">
    </map>
<!--    #endif-->
    <!-- #ifdef H5-->
    <div id="container" class="map"></div>
    <div id="status"></div>
    <div id="result"></div>
    <!-- #endif-->
  </view>
</template>

<script>
  //#ifdef H5
  window._AMapSecurityConfig = {
     
      securityJsCode:'dbcb154b2ba329d96e9a219e32f424b7',
  }
  import AMapLoader from '@amap/amap-jsapi-loader';
  //#endif
export default {
     
  data() {
     
    return {
     
      latitude: 1,
      longitude: 1,
      covers: [],
    }
  },
  onLoad() {
     
    //#ifdef H5
    this.loadMapJsH52()
    //#endif

    //#ifdef MP-WEIXIN
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    uni.getSetting({
     
      success:(res) => {
     
        console.log('res.authSetting', res.authSetting)
        if (!res.authSetting