yelaixiang/src/components/map/map.vue

<template>
  <div id="wrap">
    <div id="searchWrap">
      <!-- <div class="searchWrap">
        <input type="text" v-model="address" @input="search" /><button
          @click="search"
        >
          搜索
        </button>
      </div> -->
      <div id="result" class="amap_lib_placeSearch" v-show="hide">
        <div
          class="amap_lib_placeSearch_list amap-pl-pc"
          v-for="(item, index) in poiArr"
          @click="openMarkerTipById(index, $event)"
          @mouseout="onmouseout_MarkerStyle(index + 1, $event)"
          :key="index"
        >
          <div class="poibox" style="border-bottom: 1px solid #eaeaea">
            <div
              class="amap_lib_placeSearch_poi poibox-icon"
              :class="index == selectedIndex ? 'selected' : ''"
            >
              {{ index + 1 }}
            </div>
            <div
              class="poi-img"
              v-if="item.url"
              :style="
                'background-image:url(' +
                item.url +
                '?operate=merge&amp;w=90&amp;h=56&amp;position=5)'
              "
            ></div>
            <h3 class="poi-title">
              <span class="poi-name">{{ item.name }}</span>
            </h3>
            <div class="poi-info">
              <p class="poi-addr">地址：{{ item.address }}</p>
              <p class="poi-tel">电话：{{ item.tel }}</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="iCenter"></div>
    <!-- <button class="btn" @click="fetAddressName">获取当前位置和名字</button> -->
  </div>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=5df9445f578191c7d4fd5f3ce6b8712c"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "b5c2691e1ffcf58a735e502081ae781f",
};
export default {
  props: ["newAddress", "dataObj"], // 父组件传过来的地址和地址经纬度信息，
  data() {
    return {
      address: this.newAddress ? this.newAddress : "郑州", //保存地址的汉字名字
      map1: "",
      map: "", //保存地址的经纬度
      poiArr: [], //左边搜索出来的数组
      windowsArr: [], //信息窗口的数组
      marker: [],
      mapObj: "", //地图对象
      selectedIndex: -1,
      hide: true,
      clickType: 1,
      location: {
        P: this.dataObj.lat,
        Q: this.dataObj.lng,
      },
      aMap:null,
      addressData:{}
    };
  },
  mounted() {
    console.log(333, this.dataObj, this.location);
    this.mapInit();
    // this.placeSearch(this.address);
  },
  methods: {
    showToast(address) {
      // this.placeSearch(address.address);
      console.log(444, address);
      this.location.P = address.lat;
      this.location.Q = address.lng;
      this.address = address.address;
      let that = this;
      new AMap.InfoWindow({
        content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
        size: new AMap.Size(300, 0),
        autoMove: true,
        offset: new AMap.Pixel(-4, -10),
      }).open(that.mapObj, that.location);
    },
    cancelSave() {
      eventBus.$emit("cancelSave");
    },
    saveAddress() {
      let addressName, location;
      if (this.clickType == 1) {
        let address = this.poiArr[this.selectedIndex];
        addressName = address.name + address.address;
        location = address.location;
        console.log(address.name + address.address, address.location);
      } else if (this.clickType == 2) {
        console.log(this.address, this.map);
        addressName = this.address;
        location = this.map;
      } else if (this.clickType == 3) {
        console.log(this.address, this.map1);
        addressName = this.address;
        location = this.map1;
      }
      eventBus.$emit("saveAddress", [addressName, location]);
    },
    // 经纬度转化为详细地址
    getAddress(lng,lat) {
      let that = this;
      AMap.plugin("AMap.Geocoder", function () {
        let geocoder = new AMap.Geocoder({
          radius: 100,
          extensions: "all",
        });
        geocoder.getAddress(
          // [that.map1.lng, that.map1.lat],
          [lng,lat],
          function (status, result) {
            if (status === "complete" && result.info === "OK") {
              let address = result.regeocode.formattedAddress;
              // console.log(result.regeocode);
              // that.address = result.regeocode.formattedAddress;
              that.addressData.addressName = result.regeocode.formattedAddress
              that.$emit('uploadAddress',that.addressData)
              // that.placeSearch(that.address)
            }
          }
        );
      });
    },
    // 地图点击事件
    // testevent() {
    //   let that = this;
    //   this.clickType = 3;
    //   // var map=new AMap.Map('iCenter');//重新new出一个对象，传入参数是div的id
    //   // console.log(this.mapEl);
    //   this.mapEl.event.addListener(this.mapObj, "click", function (e) {
    //   // this.aMap.event.addListener(this.mapObj, "click", function (e) {
    //     //添加点击事件,传入对象名，事件名，回调函数
    //     that.map1 = e.lnglat;
    //     that.getAddress();
    //     setTimeout(() => {
    //       new AMap.InfoWindow({
    //         content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
    //         size: new AMap.Size(300, 0),
    //         autoMove: true,
    //         offset: new AMap.Pixel(-4, -10),
    //       }).open(that.mapObj, e.lnglat);
    //     }, 100);
    //   });
    // },
    //创建一个map
    mapInit() {
      AMapLoader.reset();
      AMapLoader.load({
        key: "5df9445f578191c7d4fd5f3ce6b8712c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
        plugins: [
          "AMap.AutoComplete",
          "AMap.Marker",
          "AMap.PlaceSearch",
          "AMap.Geolocation",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.aMap = AMap;
        // 设置地图容器id
        this.mapEl = new AMap.Map("result", {
          resizeEnable: true,
          viewMode: "3D", // 是否为3D地图模式
          zoom: 12, // 初始化地图级别
          // center: [116.397428, 39.90923] // 初始化地图中心点位置  默认当前行政区
        });
        // this.autoComplete = new AMap.AutoComplete({
        //   city: "全国",
        // });
        // if (this.info.lng && this.info.lat) {
        //   this.addmark(this.currentAddr);
        // }
        this.mapEl.on("click", (e) => {
          this.addressData.latitude = e.lnglat.getLat()
          this.addressData.longitude = e.lnglat.getLng()
          this.getAddress(e.lnglat.getLng(), e.lnglat.getLat());
        });
      });

      // this.mapObj = new AMap.Map("iCenter", {
      //   resizeEnable: true,
      //   zoom: 10,
      // });
      // this.testevent();
    },
    //根据名字地址去搜索结果
    // placeSearch(name) {
    //   let that = this;
    //   this.hide = true;
    //   var MSearch;
    //   this.mapObj.plugin(
    //     ["AMap.PlaceSearch", "AMap.ToolBar", "AMap.Scale"],
    //     () => {
    //       this.mapObj.addControl(new AMap.ToolBar());
    //       this.mapObj.addControl(new AMap.Scale());
    //       MSearch = new AMap.PlaceSearch({
    //         //构造地点查询类
    //         city: that.address, //城市
    //       });
    //       AMap.event.addListener(
    //         MSearch,
    //         "complete",
    //         this.keywordSearch_CallBack
    //       ); //返回地点查询结果
    //       MSearch.search(name); //关键字查询
    //     }
    //   );
    // },
    //结果的回调
    keywordSearch_CallBack(data) {
      console.log(111, data);
      var poiArr = data.poiList.pois;
      var resultCount = poiArr.length;
      this.poiArr = poiArr; //左边要渲染的数据
      for (var i = 0; i < resultCount; i++) {
        this.addmarker(i, poiArr[i]);
        console.log(poiArr[i]);
        this.poiArr[i].url = this.poiArr[i].photos
          ? this.poiArr[i].photos[0]
            ? this.poiArr[i].photos[0].url
            : ""
          : "";
      }
      this.mapObj.setFitView();
    },
    //添加marker&infowindow
    addmarker(i, d) {
      var lngX = d.location.getLng();
      var latY = d.location.getLat();
      console.log(lngX, latY);
      var markerOption = {
        map: this.mapObj,
        position: new AMap.LngLat(lngX, latY),
      };
      var mar = new AMap.Marker(markerOption);
      this.marker.push(new AMap.LngLat(lngX, latY));
      var infoWindow = new AMap.InfoWindow({
        content:
          "<h3>" +
          "当前选中位置：" +
          d.name +
          "</h3>" +
          this.TipContents(d.name, d.address),
        size: new AMap.Size(300, 0),
        autoMove: true,
        offset: new AMap.Pixel(0, -30),
      });
      console.log();
      this.windowsArr.push(infoWindow);
      var _this = this;
      var aa = (e) => {
        this.clickType = 2;
        var obj = mar.getPosition();
        this.map = obj; //这里保存的地址经纬度
        this.address = d.name + d.address; //这里保存的是地址名字
        infoWindow.open(_this.mapObj, obj);
      };
      AMap.event.addListener(mar, "click", aa);
    },
    TipContents(name, address) {
      //窗体内容
      if (
        name == "" ||
        name == "undefined" ||
        name == null ||
        name == " undefined" ||
        typeof name == "undefined"
      ) {
        type = "暂无";
      }
      if (
        address == "" ||
        address == "undefined" ||
        address == null ||
        address == " undefined" ||
        typeof address == "undefined"
      ) {
        address = "暂无";
      }
      var str = `地址：${address}`;
      return str;
    },
    openMarkerTipById(pointid, event) {
      //根据id 打开搜索结果点tip
      this.clickType = 1;
      event.currentTarget.style.background = "#CAE1FF";
      this.selectedIndex = pointid;
      // this.map = this.marker[pointid]
      this.map1 = this.poiArr[pointid].location;
      console.log(222, this.mapObj, this.marker[pointid]);
      console.log(this.marker[pointid], this.poiArr[pointid]);
      this.address = this.poiArr[pointid].address + this.poiArr[pointid].name;
      this.windowsArr[pointid].open(this.mapObj, this.marker[pointid]);
    },
    onmouseout_MarkerStyle(pointid, event) {
      //鼠标移开后点样式恢复
      event.currentTarget.style.background = "";
    },
    search() {
      this.windowsArr = [];
      this.marker = [];

      this.mapObj = "";
      this.mapInit();
      // this.placeSearch(this.address);
    },
  },
};
</script>
<style lang="scss">
#wrap {
  width: 100%;
  display: flex;
  #iCenter {
    height: 400px;
    position: relative;
    display: flex;
    flex: 1;
  }
  #searchWrap {
    width: 100%;
    position: relative;
    height: 400px;
    .searchWrap {
      position: absolute;
      width: 100%;
      z-index: 9;
      display: flex;
      align-items: center;
      input {
        width: 260px;
        height: 24px;
      }
      button {
        width: 36px;
        height: 28px;
      }
    }
    #result {
      width: 100%;
      position: absolute;
      top: 30px;
      height: 100%;
      z-index: 8;
      overflow-y: scroll;
      border-right: 1px solid #ccc;
    }
  }
  .amap_lib_placeSearch {
    height: 100%;
    overflow-y: scroll;
    .poibox {
      border-bottom: 1px solid #eaeaea;
      cursor: pointer;
      padding: 5px 0 5px 10px;
      position: relative;
      min-height: 35px;
      .selected {
        background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
      }
      &:hover {
        background: #f6f6f6;
      }
      .poi-img {
        float: right;
        margin: 3px 8px 0;
        width: 90px;
        height: 56px;
        overflow: hidden;
      }
      .poi-title {
        margin-left: 25px;
        font-size: 13px;
        overflow: hidden;
      }
      .poi-info {
        word-break: break-all;
        margin: 0 0 0 25px;
        overflow: hidden;
        p {
          color: #999;
          font-family: Tahoma;
          line-height: 20px;
          font-size: 12px;
        }
      }
      .poibox-icon {
        margin-left: 7px;
        margin-top: 4px;
      }
      .amap_lib_placeSearch_poi {
        background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png)
          no-repeat;
        height: 31px;
        width: 19px;
        cursor: pointer;
        left: -1px;
        text-align: center;
        color: #fff;
        font: 12px arial, simsun, sans-serif;
        padding-top: 3px;
        position: absolute;
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    padding: 10px;
  }
}
</style>