example.png

<template>
  <section id="geo-info">
    <el-form-item label="經(jīng)度" prop="lngitude">
      <el-input placeholder="" v-model="renderLongitude" disabled> </el-input>
    </el-form-item>
    <el-form-item label="緯度" prop=" latitude">
      <el-input placeholder="" v-model="renderlatitude" disabled> </el-input>
    </el-form-item>
    <el-form-item label="地址" prop=" address">
      <el-input placeholder="" v-model="renderAdderss" id="pickerInput"> </el-input>
    </el-form-item>
    <el-form-item label="地標(biāo)" prop=" landmark">
      <el-select v-model="renderLandmark" placeholder="請(qǐng)選擇">
        <el-option v-for="item in landmarkArr" :key="item.value" :label="item.label" :value="item.value">
          <span class="name">{{ item.label }}</span>
          <span class="addr">{{ item.address }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-button type="primary" id="addMark">添加坐標(biāo)</el-button>
    <el-button type="primary" id="clearMark">清除坐標(biāo)</el-button>
    <el-button type="primary" id="addPolygon">繪制圍欄</el-button>
    <el-button type="primary" id="clearPolygon">清除圍欄</el-button>
    <el-button type="primary" @click="dianji">外部調(diào)用</el-button>
    <div class="geo-info">
      <el-amap :zoom="20" :center="poiResultLocation" :events="mapEvents" :amap-manager="amapManager"></el-amap>
    </div>
    <el-form-item label="半徑" prop=" radius">
      <el-input placeholder="" v-model="radius" :map-manager="amapManager"> </el-input>
    </el-form-item>
  </section>
</template>
<script>
  import {
    AMapManager
  } from "vue-amap";
  // 拿到高德原生 AMap.Map 實(shí)例  可以在mathods使用  用的時(shí)候  map:amapManager.getMap()
  let amapManager = new AMapManager();
  export default {
    watch: {
      // 把搜索位置傳入拖拽選址中
      poiResultLocation(newLocation) {
        this.positionPicker.start(newLocation);
      },
      fenceArr(newFenceArr) {
      }
    },
    data() {
      let self = this;
      return {
        renderAdderss: this.address,
        renderlatitude: this.latitude,
        renderLongitude: this.lngitude,
        renderLandmark: this.landmark,
        landmarkArr: [],
        amapManager,
        poiResultLocation: [113.855443, 34.526265], // 初始位置
        positionPicker: null, //拿到拖拽選址組件實(shí)例
        mouseTool: null, //注冊(cè)全局繪制圍欄插件實(shí)例
        polygon: null, //繪制圍欄成功時(shí)的插件實(shí)例 (連接坐標(biāo)點(diǎn))
        fenceArr: [], //  圍欄·經(jīng)緯度數(shù)組
        flagBit: false, //繪制圍欄標(biāo)志位
        renderFenceOk: false, //繪制圍欄成功標(biāo)志位
        positionMark: [],
        mapEvents: {
          // 初始化時(shí)加載
          init(map) {
            let addPolygonButton = document.getElementById("addPolygon")
            let clearPolygonButton = document.getElementById("clearPolygon")
            let clearMarkButton = document.getElementById("clearMark");
            let addMarkButtom = document.getElementById("addMark");
            // 引入放大縮小工具插件
            map.addControl(
              new AMap.ToolBar({
                liteStyle: true
              })
            );
            // 引入繪圖插件  全局調(diào)用繪圖插件
            self.mouseTool = new AMap.MouseTool(map);
            // 繪制圍欄
            AMap.event.addDomListener(addPolygonButton, "click", (resData) => {
              if (!self.positionPicker.started) {
                self.$message.warning("請(qǐng)先添加坐標(biāo)")
                self.mouseTool.close(true);
                return
              } else {
                if (self.flagBit) {
                  self.mouseTool.close(false);
                } else {
                  self.mouseTool.polygon();
                }
              }
            }, false);
            // 清除圍欄
            AMap.event.addDomListener(clearPolygonButton, "click", () => {
              //移除計(jì)算的圍欄
              self.polygon.setMap(null)
              self.mouseTool.close(true);
              self.flagBit = false
              self.renderFenceOk = false
            }, false);
            //繪制完成觸發(fā)此事件
            self.mouseTool.on("draw", (resData) => {
              self.mouseTool.close(false)
              self.flagBit = true
              // 把坐標(biāo)點(diǎn)傳給連接坐標(biāo)點(diǎn)插件
              let arr = resData.obj.G.path.map(item => {
                return [item.lng, item.lat]
              })
              self.fenceArr = arr 
              // 計(jì)算這個(gè)點(diǎn)是否在圍欄外
              self.polygon = new AMap.Polygon({
                map: map,
                path: self.fenceArr,
                draggable: false
              });
              if (!self.polygon.contains(self.positionMark)) {
                self.$message.warning("圍欄范圍必須將坐標(biāo)點(diǎn)包含在內(nèi)")
                self.polygon.setMap(null)
                self.mouseTool.close(true);
                self.flagBit = false
              } else {
                self.$message.success("繪制圍欄成功")
                self.renderFenceOk = true
              }
            })
            // 搜索位置插件
            AMapUI.loadUI(["misc/PoiPicker"], (PoiPicker) => {
              let poiPicker = new PoiPicker({
                input: "pickerInput"
              });
              //初始化poiPicker
              poiPickerReady(poiPicker);
            });
            //監(jiān)聽poi選中信息
            function poiPickerReady(poiPicker) {
              poiPicker.on("poiPicked", (poiResult) => {
                // 清除圍欄
                self.mouseTool.close(true);
                let {  lng,  lat} = poiResult.item.location;
                self.poiResultLocation =  [lng, lat];
              });
            }
            // 拖拽選址組件
            AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
              const positionPicker = new PositionPicker({
                mode: "dragMarker",
                map: amapManager.getMap(),
                iconStyle: {
                  //自定義外觀
                  url: "http://webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/imgs/people.png",
                  ancher: [24, 40],
                  size: [48, 48]
                }
              });
              positionPicker.on("success", (positionResult) => {
                console.log(positionResult);
                let { lng,  lat } = positionResult.position;
                self.positionMark = [lng, lat]
                if (self.renderFenceOk) {
                  if (!self.polygon.contains(self.positionMark)) {
                    self.$message.warning("坐標(biāo)點(diǎn)必需包含在圍欄內(nèi)")
                    self.polygon.setMap(null)
                    self.mouseTool.close(true);
                    self.flagBit = false
                    self.renderFenceOk = false
                  }
                }
                self.renderAdderss = positionResult.address;
                self.renderLongitude = positionResult.position.lng;
                self.renderlatitude = positionResult.position.lat;
                self.renderLandmark = positionResult.regeocode.pois[0].name;
                let landmarkArr = positionResult.regeocode.pois.map(item => {
                  return {
                    label: item.name || "",
                    value: item.id || "",
                    address: item.address || ""
                  };
                });
                self.landmarkArr = landmarkArr;
              });
              positionPicker.on("fail", (positionResult) => {
                console.log(positionResult);
                self.renderAdderss = "獲取地址失敗";
                self.renderLongitude = "獲取經(jīng)度失敗";
                self.renderlatitude = "獲取緯度失敗";
                self.renderLandmark = "獲取失敗";
              });
              // 注冊(cè)DOM對(duì)象事件：給DOM對(duì)象注冊(cè)事件
              // 添加坐標(biāo)
              AMap.event.addDomListener(addMarkButtom, "click", (resData) => {
                if (self.renderFenceOk) {
                  return
                } else {
                  self.mouseTool.close(true);
                  positionPicker.start();
                }
              });
              // 清除坐標(biāo)
              AMap.event.addDomListener(clearMarkButton, "click", (resData) => {
                // 繪制圍欄成功就不能清除坐標(biāo)
                if (self.renderFenceOk) {
                  return
                } else {
                  self.flagBit = false
                  self.mouseTool.close(true);
                  positionPicker.stop();
                }
              });
              positionPicker.start(self.poiResultLocation);
              self.positionPicker = positionPicker;
            });
          }
        }
      };
    },
    mounted() {
      this.$nextTick(() => {});
    },
    methods: {
      dianji() {
        // 拿到高德原生組件實(shí)例
        //  map:amapManager.getMap()
        this.mouseTool.close(true)
        console.log(this.mouseTool)
      },
      addMark() {
        // marker.setMap(o);
      }
    },
    props: {
      // 經(jīng)度
      lngitude: {
        type: [String, Number]
      },
      // 緯度
      latitude: {
        type: [String, Number]
      },
      // 地址
      address: {
        type: [String, Number]
      },
      // 地標(biāo)
      landmark: {
        type: [String, Number]
      },
      radius: {
        type: [String, Number]
      }
    }
  };
</script>
<style lang="scss">
  .geo-info {
    margin-top: 20px;
    height: 600px;
  }
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .highlighted .addr {
    color: #ddd;
  }
</style>