//按钮
<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");
},
点击弹框,出现高德地图,点击地图获取点的坐标
最新推荐文章于 2022-06-01 09:39:03 发布