vue高德地图初体验地图初始化(一)

安装依赖

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

引用依赖

import AMapLoader from '@amap/amap-jsapi-loader'

地图初始化

<template>
  <div class='map-box'>
    <div class='container' id='container'></div>
  </div>
</template>
<script>
//引用依赖
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  data() {
    return {
      map: null
    }
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: '' // 密钥 
      }
      AMapLoader.load({
        key: "",              // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: '1.1', // AMapUI 缺省 1.1
          plugins: [] // 需要加载的 AMapUI ui插件
        },
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: '2.0.0' // Loca 版本，缺省 1.3.2
        }
      }).then((AMap) => {
        console.log('-----')
        this.map = new AMap.Map('container', {
          viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
          zoom: 11, //初始化地图层级
          center: [119.20058, 32.98972],//初始化地图中心点
        });
      }).catch(e => {
        console.log(e);
      })
    }
  }
}
</script>
<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

AMap.Map参数说明

更多说明

vue引入高德地图多种方法实现
vue高德地图初体验–地图初始化( 一 )
高德地图自定义图标的点标记Marker–初体验（二）
点个关注再走呗