vue-amap 点击地图出现marker

最新推荐文章于 2025-03-31 15:16:42 发布

原创最新推荐文章于 2025-03-31 15:16:42 发布 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #node.js #http

vue-amap 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue应用中使用Element UI的ElMap组件配合高德地图API，创建可交互的标记点，并演示了数据绑定和事件处理。通过实例展示了经纬度数据的处理和地图缩放、拖拽操作。

<el-amap vid="amapDemo"
         :amap-manager="amapManager"
         :center="center"
         :zoom="zoom"
         :events="mapEvents"
         class="amap-demo">

  <el-amap-marker v-for="(marker, index) in markers"
                  :key="index"
                  :position="marker.position"
                  :events="marker.events"
                  :visible="marker.visible"
                  :draggable="marker.draggable"
                  :vid="index"></el-amap-marker>

</el-amap>

export default {
  name: "vMap",
  data() {
    return {
      coordinate: '', // 经纬度
      longitude: '', // 经度
      latitude: '',//纬度

      amapManager,
      searchOption: { // 搜索
        city: "杭州",
        citylimit: false,
      },
      zoom: 5,
      center: [116.405994, 39.915378],
      mapEvents: {
        init: (o) => {

        },
        click: (e) => {
          console.log(e)
          let longtitude = e.lnglat.lng
          let latitude = e.lnglat.lat
          let obj = {
            position: [longtitude, latitude],
            draggable: false
          }
          this.markers.push(obj)
        }
      },

      markers: [
        {
          position: [116.405994, 39.915378],
          draggable: false
        }
      ],

    }
  },