【无标题】

地图跳转组件

子组件 跳转组件

<template>
  <div id="positionJump">
    <div id="panel-head">
      <span class="head-text">定位</span>
      <div>
        <span @click="closePanel">
          <a-icon type="close" />
        </span>
      </div>
    </div>
    <div id="panel-body">
      <div class="item">
        <span>经度：</span>
        <a-input placeholder="请输入经度" v-model="lng" style="width:100px" size="small"/>
      </div>
      <div class="item">
        <span>纬度：</span>
        <a-input placeholder="请输入纬度" v-model="lat" style="width:100px" size="small"/>
      </div>
      <div class="item">
        <span>级别：</span>
        <a-input placeholder="请输入级别" v-model="zoom" style="width:100px" size="small"/>
      </div>
      <div class="footer" style="text-align:right">
        <a-button type="primary" @click="jump" size="small">跳转</a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PositionJump',
  data () {
    return {
      zoom: '',
      lng: '',
      lat: ''
    }
  },
  mounted () {
    if (this.positionMess) {
      this.zoom = this.positionMess.zoom
      this.lng = this.positionMess.lng
      this.lat = this.positionMess.lat
    }
  },
  props: {
    map: Object,//地图
    positionMess: Object
  },
  watch: {
    positionMess: {
      handler: function (newValue, old) {
        this.zoom = this.positionMess.zoom
        this.lng = this.positionMess.lng
        this.lat = this.positionMess.lat
      },
      deep: true
    }
  },
  methods: {
    jump () {
      if (this.zoom === '' || this.lng === '' || this.lat === '') {
        this.$message.info('请填写完整信息')
      } else {
        this.map.setZoom(Number(this.zoom))
        this.map.setCenter([Number(this.lng), Number(this.lat)])
      }
    },
    closePanel () {
      this.$emit('close', 'close')
    }
  }
}
</script>

<style scoped>
#positionJump {
  overflow: hidden;
  cursor: pointer;

  min-height: 135px;
  /* width: 335px; */
  width: 178px;
  background-color: #fff;
  padding: 5px 10px;
  box-shadow: 0 1px 1px #ddd;
}

#panel-head {
  height: 25px;
  line-height: 25px;

  display: flex;
  justify-content: space-between;
}

#panel-head > span {
  line-height: 30px;
}

.head-text {
  font-size: 16px;
  font-weight: 600;
}
#panel-body {
  /* height: 86px; */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 5px;
}
#positionJump .item {
  margin-bottom: 10px;
}
#positionJump .item span {
  vertical-align: middle;
}
</style>

父组件使用

–记得注册组件–

 <div>
      <span
        class="switch-btn position"
        @click="closePoModal"
        :title="'定位'"
      >
        <a-icon type="environment" style="display:block;line-height:32px"/>
      </span>
      <div
        id="position-container"
        v-if="positionPanelShow"
      >
        <position-jump
          :map="map"
          :positionMess="positionMess"
          @close="closePoModal"
        ></position-jump>
      </div>
    </div>

export default {
 data(){
 	return{
		 positionPanelShow: false,//控制跳转组件
 		 positionMess: {
       		 zoom: '',
        	 lng: '',
       		 lat: ''
     		 },
 }}
  // 定位切换
    closePoModal () {
      this.positionPanelShow = !this.positionPanelShow
    },
     mouseDown (e) {//每次放下鼠标获取级别和经纬度，传给子组件
      this.positionMess.zoom = e.target.getZoom().toFixed(2)
      this.positionMess.lng = e.lngLat.lng.toFixed(2)
      this.positionMess.lat = e.lngLat.lat.toFixed(2)
    }
    this.map.on('mousedown', this.mouseDown)//地图事件
    }