坐标拾取 gengdidi

gassafety-web/src/components/mapDialog/index.vue

+<template>
+  <el-dialog
+    title="拾取坐标"
+    :visible.sync="dialogTableVisible"
+    :show-close="false"
+    :close-on-click-modal="false"
+  >
+
+    <el-row class="lt">
+      经纬度:
+      <el-input
+        placeholder="经度"
+        v-model.number="lnglat.lng"
+        type="number"
+      ></el-input>
+      <el-input
+        placeholder="纬度"
+        v-model.number="lnglat.lat"
+        type="number"
+      ></el-input>
+      <el-button type="primary" size="small" @click="confirmFun">确定</el-button
+      >
+      <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button
+      >
+    </el-row>
+    <div style="width: 47vw; height: 57vh" id="container"></div>
+
+    <el-col :span="8" class="button">
+      <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input><el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
+    </el-col>
+
+  </el-dialog>
+</template>
+<script>
+  export default {
+    props: {
+      dialogTableVisible: false,
+      slat: 0,
+      slng: 0
+    },
+    data(){
+      return{
+        lnglat: {
+          lat: "",
+          lng: ""
+        },
+        keyWorld: ""
+      }
+    },
+    mounted(){
+      let that = this;
+      that.$nextTick(() => {
+        //初始化地图
+        let map = new AMap.Map("container", {
+          center: [114.72995, 38.37417],
+          // resizeEnable: true,
+          disableSocket: true,
+          viewMode: "3D",
+          showLabel: true,
+          pitch: 8,
+          zoom: 10
+        });
+        map.setFitView();
+
+        //坐标回显
+        if (typeof that.slng == "number" && that.slng != 0) {
+          that.lnglat.lng = that.slng;
+          that.lnglat.lat = that.slat;
+          let marker = new AMap.Marker({
+            position: [that.slng,that.slat]
+          });
+          marker.setMap(map);
+          map.setCenter([that.slng,that.slat]);
+        }
+
+        //点击获取坐标点
+        var mouseTool = new AMap.MouseTool(map);
+        //监听draw事件可获取画好的覆盖物
+        var overlays = [];
+        mouseTool.on('draw',function(e){
+          map.remove(overlays);
+          overlays.push(e.obj);
+          that.lnglat.lat = e.obj._position.lat;
+          that.lnglat.lng = e.obj._position.lng;
+        })
+        that.draw(mouseTool);
+
+        //搜索功能
+        AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
+          that.placeSearch = new AMap.PlaceSearch({
+            map: map
+          });
+        });
+      })
+    },
+    methods:{
+      confirmFun(){
+        this.$emit('confirmFun',this.lnglat);
+        this.$emit('dialogcancelFun');
+      },
+      draw(mouseTool){
+        mouseTool.marker({
+          //同Marker的Option设置
+        });
+      },
+      search(){
+        this.placeSearch.search(this.keyWorld);  //关键字查询查询
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="scss">
+  .lt{
+    margin-bottom: 10px;
+  }
+  .lt .el-input {
+    width: 180px;
+    margin-right: 15px;
+    display: inline-block;
+  }
+
+  .button{
+    position: relative;
+    top: -393px;
+    left: 14px;
+  }
+
+  .button .el-input{
+    width: 180px;
+    margin-right: 10px;
+    display: inline-block;
+  }
+</style>