点击弹框,出现高德地图,点击地图获取点的坐标

//按钮
<el-button	@click="selectSite"	type="primary">添加</el-button>
//弹框
<el-dialog
        :before-close="cancelCU2"
        :visible.sync="mapVisible"
        title="地图"
        width="50%"
      >
        <div class="titleBox">{{ this.input.inputDateY }}</div>
        <el-card class="box-card">
          <div class="text item"><div id="container2" class="amap-demo" /></div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancelCU2">取消</el-button>
          <el-button
            type="primary"
            :loading="formLoading"
            @click="submitForm('input')"
            >确认</el-button
          >
        </div>
      </el-dialog>
      
// 地图方法
    getMaplat() {
      const that = this;
      const map = new AMap.Map("container2", {
        zoom: this.zoom,
        center: this.center,
        resizeEnable: true,
        mapStyle: "amap://styles/62009be025f187dd3eafe327d2e55b8e"
      });
      const marker = new AMap.Marker({
        position: this.center
      });
      map.on("click", function(ev) {
        // 触发事件的对象
        const target = ev.target;
        // 触发事件的地理坐标,AMap.LngLat 类型
        const lnglat = ev.lnglat;
        marker.setPosition(lnglat);
        marker.setMap(map);
        that.input.inputDateY = lnglat.lng + "," + lnglat.lat;
        that.$forceUpdate();
        console.log("坐标", lnglat);

        console.log("坐标", lnglat);
      });
    },
    //显示弹框方法
    selectSite() {
      this.mapVisible = true;
      //显示地图
      this.$nextTick(() => {
        this.getMaplat();
      });
      console.log("xxxx");
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值