vue2通过一个地图组件（高德地图），一个页面怎么实例化多个地图出来

### 回答1：
我们可以在 Vue 组件的 mounted 钩子函数中使用高德地图的 Javascript API 来实例化地图。

具体步骤如下：

1. 在 mounted 钩子函数中引入高德地图的 Javascript API，并初始化地图实例。

mounted () {
  this.map = new AMap.Map('container', {
    center: [116.397428, 39.90923],
    zoom: 13
  })
}

2. 在模板中添加一个 div 元素作为地图的容器。

<template>
  <div id="container"></div>
</template>

3. 如果要在一个页面中创建多个地图实例，我们可以多次调用上述代码，并为每个地图分配一个唯一的容器元素。

例如：

<template>
  <div>
    <div id="map1"></div>
    <div id="map2"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.map1 = new AMap.Map('map1', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
    this.map2 = new AMap.Map('map2', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
  }
}
</script>

### 回答2：
在Vue2中通过一个地图组件（高德地图）实例化多个地图可以使用以下步骤：
1. 首先，在项目中引入高德地图的相关API，并注册为全局变量或者局部变量供使用。
2. 在Vue组件中，引入地图组件（高德地图）。
3. 在Vue组件的template中，设置多个地图的容器元素，并为每个地图容器添加唯一的id属性，作为后续实例化地图的标识。
4. 在Vue组件的script中，定义data属性，用于存储地图实例。
5. 在Vue组件的mounted生命周期钩子函数中，通过id属性获取地图容器元素，然后实例化地图对象，并将实例化的地图对象存储到data属性中。
6. 可以通过methods中的方法来操作多个地图对象，比如设置地图的中心点、缩放级别等。
7. 在template中，使用v-for指令来循环遍历地图实例对象数组，通过动态绑定id属性，在页面上显示多个地图容器。
8. 通过Vue组件的监听事件等方法，可以实现地图的交互功能。

通过以上步骤，可以在一个页面中实例化并展示多个地图对象，并通过Vue的数据驱动和响应式特性来方便地操作和管理这些地图。同时，通过高德地图的API提供的功能，还可以实现各种地图相关的操作和交互。

### 回答3：
在vue2中，可以通过以下步骤实例化多个地图组件（高德地图）：

1. 在main.js中引入高德地图的JS API库，并注册到Vue实例中：

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your_amap_api_key',
  plugin: ['AMap.Geocoder']
});

2. 在需要显示地图的组件中，使用<el-amap>标签包裹地图相关内容，并传入相关参数进行配置：

<template>
  <div>
    <el-amap :zoom="zoom" :center="center" :events="events">
      <el-amap-marker :position="markerPosition"></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 13,
      center: [113.271429, 23.135336],
      markerPosition: [113.271429, 23.135336],
      events: {
        click: this.handleMapClick
      }
    };
  },
  methods: {
    handleMapClick(e) {
      console.log(e.lnglat);
    }
  }
}
</script>

3. 在需要显示多个地图的页面中，使用该地图组件，并为每个地图组件传入不同的参数：

<template>
  <div>
    <map-component :zoom="14" :center="[113.271429, 23.135336]" />
    <map-component :zoom="12" :center="[114.0719, 22.5426]" />
    <map-component :zoom="10" :center="[113.84702, 23.1163]" />
  </div>
</template>

<script>
import MapComponent from './MapComponent.vue';

export default {
  components: {
    MapComponent
  }
}
</script>

通过以上步骤，就能在一个页面中实例化多个地图组件，并设置不同的参数和事件处理函数来显示不同的地图。需要注意的是，在每个地图组件中，可以根据需求进行修改和扩展。