vue 借助vue-amap插件对高德地图的简单使用

<template>
  <div class="map-container">
    <el-amap class="map" :vid="'amap'" :zoom="10">
      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker"></el-amap-marker>
    </el-amap>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      markers: [
        [116.397428, 39.90923],
        [116.488248, 40.056673],
        [116.386326, 39.997761],
        // 更多位置坐标...
      ]
    };
  }
};
</script>
 
<style>
.map-container {
  width: 800px;
  height: 600px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>

这个例子展示了如何在Vue应用中使用vue-amap插件来创建一个高德地图实例，并在地图上标记多个位置。el-amap组件是地图容器，el-amap-marker组件用来在特定的经纬度上放置标记。markers数组包含了一系列的位置坐标，这些坐标会被循环渲染为地图上的标记。