webapp / GreenwayWeb

<template>
  <div>
    <div id="container"></div>
    <div class="search-box" v-if="isx">
      <input v-model="searchQuery" placeholder="输入地址进行搜索" />
      <div style="box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);display: flex;align-items: center;background: #fff;padding: 0 20px;border-radius: 5px;overflow: hidden;margin-left: 10px;">
        <i class="el-icon-search" style="margin-right: 10px;color: #3F9B6A;"></i>
        <button type="button" @click="searchLocation">搜索</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexAll',
  data() {
    return {
      map: null, // 地图
      editor: null, // 编辑器
      activeType: 'marker', // 激活的图形编辑类型
      marker: null,
      polyline: null,
      polygon: null,
      circle: null,
      rectangle: null,
      ellipse: null,
      searchQuery: '', // 搜索查询
    };
  },
  props: {
    isx: {
      type: Boolean,
      default: true
    },
    lat: {
      type: Number,
      default: 30.67
    },
    lng: {
      type: Number,
      default: 104.06
    },
    message:{
      type: String,
      default: ''
    },
  },
  mounted() {
    this.initMap();
    this.setActiveType('polygon')
  },
  methods: {
    searchLocation() {
        let that = this
        if (!this.searchQuery) {
          this.$message.error('请输入搜索地址');
          return;
        }

        // 使用腾讯地图的搜索服务
        this.$jsonp("https://apis.map.qq.com/ws/place/v1/search", {
          keyword: this.searchQuery,
          key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', // 使用你的腾讯地图API key
          output: "jsonp",
          boundary: 'nearby(' + that.lat + ',' + that.lng + ',1000,1)'
        }).then((res) => {
          console.error(res)
          if (res.status === 0 && res.data.length > 0) {
            const location = res.data[0].location;
            const latLng = new TMap.LatLng(location.lat, location.lng);

            // 移动地图中心到搜索到的位置
            this.map.setCenter(latLng);
          } else {
            this.$message.error('未找到相关地址');
          }
        }).catch(err => {
          this.$message.error("搜索失败");
          console.error(err);
        });
      },
    setActiveType(type) {
      this.activeType = type;
      this.editor.setActiveOverlay(type);
    },
    initMap() {
      // 初始化地图
      this.map = new TMap.Map('container', {
        zoom: 12, // 设置地图缩放级别
        center: new TMap.LatLng(this.lat, this.lng), // 设置地图中心点坐标
         mapStyleId: 'style1'
      });
      var path = [];
      if(this.message != '') {
        let listall  = JSON.parse(this.message)
        for (let index = 0; index < listall.length; index++) {
          const element = listall[index];
          const c1 = new TMap.LatLng(Number(element.lat),Number(element.lng))
          path.push(c1)
        }
      }
      console.error(path )
      console.error(this.message )
      // 初始化几何图形及编辑器
      this.marker = new TMap.MultiMarker({
        map: this.map,
      });
      this.polyline = new TMap.MultiPolyline({
        map: this.map,
      });
      this.polygon = new TMap.MultiPolygon({
        map: this.map,
        geometries: [
            {
                'id': 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
                'styleId': 'polygon', //绑定样式名
                'paths': path, //多边形轮廓
            }
        ]
      });
      this.circle = new TMap.MultiCircle({
        map: this.map,
      });
      this.rectangle = new TMap.MultiRectangle({
        map: this.map,
      });
      this.ellipse = new TMap.MultiEllipse({
        map: this.map,
      });

      this.editor = new TMap.tools.GeometryEditor({
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          {
            overlay: this.marker,
            id: 'marker',
          },
          {
            overlay: this.polyline,
            id: 'polyline',
          },
          {
            overlay: this.polygon,
            id: 'polygon',
          },
          {
            overlay: this.circle,
            id: 'circle',
          },
          {
            overlay: this.rectangle,
            id: 'rectangle',
          },
          {
            overlay: this.ellipse,
            id: 'ellipse',
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: 'marker', // 激活图层
        snappable: true, // 开启吸附
      });

      // 监听绘制结束事件，获取绘制几何图形
      this.editor.on('draw_complete', (geometry) => {
        const id = geometry.id;
        if (this.editor.getActiveOverlay().id === 'rectangle') {
          const geo = this.rectangle.geometries.filter((item) => item.id === id);
          console.log('绘制的矩形定位的坐标：', geo[0].paths);
        }

        if (this.editor.getActiveOverlay().id === 'polygon') {
          // console.error(this.polygon.geometries)
          const geo = this.polygon.geometries.filter((item) => item.id === id);
          console.log('绘制的多边形坐标：', geo[0].paths);
          // var path = [
          // ];
          // for (let index = 0; index < geo[0].paths.length; index++) {
          //   const element = geo[0].paths[index];
          //   const c1 = new TMap.LatLng(element.lat,element.lng)
          //   path.push(c1)
          // }
          // // 计算多边形形心
          // var position = TMap.geometry.computeCentroid(path);
          // console.log('绘制的多边形坐标：',position);
          this.$emit('updatecenter', geo[0].paths);
        }
      });
    },
    
  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#container {
  width: 100%;
  height: 300px;
}

#toolControl {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 252px;
  z-index: 1001;
}

.toolItem {
  width: 30px;
  height: 30px;
  float: left;
  margin: 1px;
  padding: 4px;
  border-radius: 3px;
  background-size: 30px 30px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px 0 #e4e7ef;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.toolItem:hover {
  border-color: #789cff;
}

.active {
  border-color: #d5dff2;
  background-color: #d5dff2;
}

#marker {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}

#polyline {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
}

#polygon {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
}

#circle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
}

#rectangle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
}

#ellipse {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
}
.search-box {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    /* background: #fff; */
    /* padding: 10px; */
    /* border-radius: 5px; */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
    /* width: 280px; */
    display: flex;
    justify-content: space-between;
  }

  .search-box input {
    /* padding: 5px; */
    padding: 15px 8px;
    margin-right: 5px;
    font-size: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 200px;
  }

  .search-box button {
    padding: 15px 0;
    background-color: #fff;
    /* color: #fff; */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    font-size: 10px;
    color: -internal-light-dark(black, white);
  }

  .search-box button:hover {
    background-color: #fff;
  }
</style>