uniapp 打包成h5 高德地图配置

在uniapp中将项目打包成H5后，需要配置高德地图插件。下面是具体的配置步骤：

1. 下载高德地图插件：在uniapp的项目中，打开`src/main.js`文件，在文件中的合适位置导入高德地图插件：

import VueAMap from 'vue-amap';
Vue.use(VueAMap);

2. 配置高德地图插件：在`src/main.js`文件的合适位置，添加一段配置代码：

VueAMap.initAMapApiLoader({
  key: '你的高德地图AppKey',
  plugin: ['AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.15',
  uiVersion: '1.0.11',
  autoload: true
});

将"你的高德地图AppKey"替换成你在高德开放平台申请的AppKey。

3. 在需要使用高德地图的页面中引入地图组件：在需要使用高德地图的页面，如`src/pages/index/index.vue`文件中，添加地图组件引入代码：

<template>
  <view class="map">
    <amap :options="mapOptions"></amap>
  </view>
</template>

<script>
import { Amap, Loca } from "vue-amap";
export default {
  components: {
    Amap,
    Loca
  },
  data() {
    return {
      mapOptions: {
        zoom: 10,
        center: [116.397428, 39.90923]
      }
    };
  }
};
</script>

<style>
.map {
  width: 100%;
  height: 400rpx; /* 设置地图高度 */
}
</style>

其中，`mapOptions`中的`zoom`用于调整地图的缩放级别，`center`用于设置地图的初始中心位置。

配置完成后，你的uniapp项目就可以使用高德地图插件了。在H5打包后的页面中，会显示一个地图，并且可以根据之前设置的中心位置和缩放级别进行展示。