【uniapp】在vue2版本的uniapp上使用npm安装高德地图

在项目根目录使用 npm 安装依赖包:

npm install @amap/amap-jsapi-loader --save

在项目 main.js 中导入并初始化高德地图:

import Vue from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import App from './App'

// 你的高德地图 key
const amapKey = 'YOUR_AMAP_KEY'

Vue.config.productionTip = false
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };

AMapLoader.load({
  key: amapKey,
  version: '2.0',
  plugins: [] // 加载插件,如搜索、地理编码等服务
}).then(AMap => {
  // 全局保存 AMap 对象
  Vue.prototype.$AMap = AMap
}).catch(e => {
  console.error(e)
})

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

创建一个页面

<template>
  <view>
    <view id="map-container" style="width: 100vw; height: 60vh;"></view>
  </view>
</template>

<script>
  export default {
    name: "map-view",
    data() {
      return {
        map: null
      }
    },
    mounted() {
      this.initAMap();
    },
    unmounted() {
      this.map?.destroy();
    },
    methods: {
      initAMap() {
        this.map = new AMap.Map("map-container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        })
      }
    }
  };
</script>

<style>

</style>