高德地图-----加载地图

准备工作

1. 在public中的index.html中初始化地图

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在 .eslintrc.js 中配置AMap和AMapUI

globals: {
    "AMap": "true",
    "AMapUI":"true",
  }

3. 创建一个公共组件map

4. 在组件的mounted生命周期中加载地图

map组件内容

html

<template>
  <div class="m-map">
    <div id="js-container" class="map">正在加载数据 ...</div>
  </div>
</template>

js

export default {
  name: 'mapIndex',
  props: ['lat', 'lng'],
  data () {
    return {
      AMap: null,
      map: null,
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 实例化地图
    initMap () {
      this.map = new AMap.Map('js-container', {
        zoom: 10, // 设置地图显示的缩放级别
        center: [this.lng, this.lat] // 设置地图中心点坐标
      })
    }
  }

}

css

.m-map{ min-width: 500px; min-height: 300px; position: relative; }
.m-map .map{ width: 100%; height: 100%; }

调用

<scottMap lat="31.86" lng="117.27" style="margin-left:11vw;width:90vw;height:90vh"></scottMap>