vue和element-ui 写一个 map的应用代码

以下是一个简单的使用 Vue 和 Element UI 实现地图应用的示例代码：

<template>
  <div class="map-container">
    <el-map :center="center" :zoom="zoom" style="height: 500px;">
      <el-map-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.title" :label="marker.label" :icon="marker.icon"></el-map-marker>
    </el-map>
  </div>
</template>

<script>
import { ElMap, ElMapMarker } from 'element-ui'

export default {
  components: {
    ElMap,
    ElMapMarker
  },
  data() {
    return {
      center: [116.397428, 39.90923], // 地图中心点坐标
      zoom: 12, // 地图缩放级别
      markers: [ // 地图标记点
        {
          position: [116.397428, 39.90923],
          title: '北京市',
          label: {
            content: '北京市',
            offset: [-20, -20]
          },
          icon: {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
            size: [19, 31],
            anchor: [10, 31]
          }
        },
        {
          position: [121.473701, 31.230416],
          title: '上海市',
          label: {
            content: '上海市',
            offset: [-20, -20]
          },
          icon: {
            url: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            size: [19, 31],
            anchor: [10, 31]
          }
        }
      ]
    }
  }
}
</script>

<style>
.map-container {
  width: 100%;
  height: 100%;
}
</style>

在该示例代码中，我们使用了 Element UI 中的 `ElMap` 和 `ElMapMarker` 组件来实现地图和标记点的展示。在 `data` 中我们定义了地图的中心点坐标、缩放级别以及标记点的信息。同时，我们也可以在标记点的 `icon` 属性中指定自己的标记点图标。