ZRZYQC/UI2/src/views/map/components/Map.vue

<template>
  <div class="main">
    <div id="Mapcontainer"></div><!-- 地图容器 -->

    <!-- <input type="text" v-model="keyword" class="keywordInput" @change="keywordsSearch" placeholder="输入关键字">
     <div id="panel" v-show="queryReusltIsshow"></div> 关键字查询结果展示框 -->
  </div>

</template>

<script>
let map = undefined;
let placeSearch = undefined;
 // import BMap from 'BMap'
import AMapLoader from '@amap/amap-jsapi-loader';

// window._AMapSecurityConfig = {
//   // 安全密钥
//   securityJsCode: "d6a497a6074277b5f144512f74e36d16",
// };

export default {
  data() {
    return {
      position: {
        lng: 0,
        lat: 0,
        address: ""
      }, //传出坐标对象
      keyword: '', //关键字
      queryReusltIsshow: false, //查询列表是否显示
      geoCoder: null
    }
  },

  props: {
    lng: { //精度
      type: String,
      default: ''
    },
    lat: { //纬度
      type: String,
      default: ''
    }
  },

  methods: {
    //初始化地图
    // initMap() {
    //   var that = this
    //   AMapLoader.load({
    //     key: "50a17f18b751052cc34771f93b897846", // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: ['AMap.Geolocation,AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //   }).then((AMap) => {
    //     // AMap = AMap
    //     map = new AMap.Map("Mapcontainer", { //设置地图容器id
    //       viewMode: "2D", //是否为3D地图模式
    //       zoom: 16, //初始化地图级别
    //     });
    //     //地址逆解析插件
    //     AMap.plugin("AMap.Geocoder", function () {
    //       that.geoCoder = new AMap.Geocoder({
    //         city: "010", //城市设为北京，默认：“全国”
    //         radius: 1000, //范围，默认：500
    //       });
    //     })
    //
    //
    //     /* // 搜索提示插件
    //      this.AutoComplete = new AMap.AutoComplete({ city: "全国" });*/
    //     map.on('click', this.MapClick); //绑定单机事件
    //
    //     if (this.lng && this.lat) {
    //       let marker = new AMap.Marker({
    //         position: new AMap.LngLat(this.lng, this.lat),
    //         icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //         offset: new AMap.Pixel(-13, -30)
    //       });
    //       map.setCenter([this.lng, this.lat]);
    //       map.add(marker)
    //     } else {
    //       this.getLocation(map)
    //     }
    //
    //   }).catch(e => {
    //     console.log(e);
    //   })
    // },


    // 关键字搜索功能r
    // keywordsSearch() {
    //   if (!this.keyword) {
    //     this.queryReusltIsshow = false
    //   }
    //   let self = this
    //   map.plugin('AMap.PlaceSearch', function () {
    //     placeSearch = new AMap.PlaceSearch({
    //       pageSize: 8, // 单页显示结果条数
    //       pageIndex: 1, // 页码
    //       city: "全国", // 兴趣点城市
    //       citylimit: false, //是否强制限制在设置的城市内搜索
    //       type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施",
    //       map: map, // 展现结果的地图实例
    //       panel: "panel", // 结果列表将在此容器中进行展示。
    //       autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    //     });
    //     //关键字查询
    //     placeSearch.search(self.keyword, function (status, result) {
    //       console.log('查询结果', result)
    //       if (result == 'USER_DAILY_QUERY_OVER_LIMIT') {
    //         window.alert('免费配额查询超出限制！')
    //       } else {
    //         self.queryReusltIsshow = true
    //       }
    //     });
    //   })
    // },

    //地图单机事件
    MapClick(e) {

      this.position = {
        lng: e.lnglat.lng,
        lat: e.lnglat.lat,
      }
      this.toaddress().then((data)=>{
        this.$emit('recievePosition', data)
      })



      this.clearMap()



      let marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-22, -55)
      });
      map.add(marker)
    },

    toaddress(){
      return new Promise((resolve)=>{
        var that = this;
        let lnglat = [this.position.lng, this.position.lat];

        this.geoCoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            that.position.address = result.regeocode.formattedAddress;
            resolve(that.position)

            /* that.position.lng=e.lnglat.lng;
             that.position.lng=e.lnglat.lng;*/
            // result为对应的地理位置详细信息
          }
        })
      })

    },

    //高德API定位
    getLocation() {
      const that = this;
      map.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          timeout: 1000, // 设置定位超时时间，默认：无穷大
          offset: [10, 20], // 定位按钮的停靠位置的偏移量
          zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          position: 'RB' //  定位按钮的排放位置,  RB表示右下
        })

        geolocation.getCurrentPosition(function (status, result) {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        });

        function onComplete(data) {

          map.setCenter([data.position.KL, data.position.kT]);
        }

        function onError(data) {
          // 定位出错
          console.log('定位出错', data)
          // that.lib_getPosition();
        }
      })
    },

    // lib_getPosition() {
    //   const that = this;
    //   const BMapGeolocation = new BMap.Geolocation();
    //
    //   function myFun(result) {
    //     console.log(result)
    //     if (result.center.lng && result.center.lat) {
    //       console.log("baidu");
    //       // 获取到经纬度（百度转换高德经纬度）
    //       const {lng, lat} = that.bd_decrypt(result.center.lng, result.center.lat);
    //       that.center = [lng, lat];
    //       map.setCenter([lng, lat]);
    //       // 根据经纬度获取当前经纬度的位置信息
    //     } else {
    //       console.log(22);
    //     }
    //   }
    //
    //   var myCity = new BMap.LocalCity();
    //   myCity.get(myFun);
    // },
    bd_decrypt(bdLng, bdLat) {
      const X_PI = Math.PI * 3000.0 / 180.0;
      const x = bdLng - 0.0065;
      const Y = bdLat - 0.006;
      const Z = Math.sqrt(x * x + Y * Y) - 0.00002 * Math.sin(Y * X_PI);
      const Theta = Math.atan2(Y, x) - 0.000003 * Math.cos(x * X_PI);
      const lng = Z * Math.cos(Theta);
      const lat = Z * Math.sin(Theta);
      return {lng, lat};
    },
    //确定按钮
    btnEnter() {
      if (this.position) {
        this.$emit('recieveposition', this.position)
        window.alert('坐标采集成功!')
      } else {
        window.alert('坐标为空，请点击选择坐标!')
      }
    },

    //清除地图所有覆盖物
    clearMap() {
      map.clearMap();
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.keywordInput {
  padding: 0;
  width: 320px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 10px;
  border: 0px;
}

.keywordInput:focus {
  outline: 0;
  /* border: 1px solid #123456; */
  border: 0px;
}

#Mapcontainer {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden !important;
}

.amap-layers {
  overflow: hidden !important;
}

.keywordSearch {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 30px;
  line-height: 30px;
  background-color: #1685a9;
  color: #fff;
  z-index: 1000;
  border: 0;
}

.btnEnter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 70px;
  height: 30px;
  line-height: 30px;
  background-color: #1685a9;
  color: #fff;
  z-index: 1000;
  border: 0;
}

#panel {
  position: absolute;
  right: 20px;
  top: 50px;
  width: 320px;
  height: 650px;
  /* z-index: 1000; */
  background-color: white;
  overflow-y: auto;
}
</style>