webapp / GreenwayWeb

<template>
  <div id="container1" ></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
  		securityJsCode: '0909896c00dc4bf28c6ee99a43533c53'
	}
  var map = {};      // 最好在data外声明要不然地图会一卡一卡
  var markers = [];  // 最好在data外声明要不然地图会一卡一卡


export default {
   components: {},
   props:['message'],
   watch: {
      // 监听父组件传递的值
      message(newValue, oldValue) {
           console.log(newValue, oldValue)
         this.mapData = newValue
         this.initMap()
      }
    },
  data() {
    return {
      autoOptions: {
              input: ''
            },
      auto: null,
      map: null,
      mapData:[
        {
          name: '测试',
          longitude: 104.113368, // 经纬度
          latitude: 30.518559,   // 经纬度
          content:'123123123@163.com',
          // img:''
        },
      ],
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '438a727f8ff61d71f33694f386c108c3', // 申请好的Web端开发者Key，首次调用 load 时必填
        terrain: true,
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.Geolocation','AMap.AutoComplete',"AMap.Marker",'AMap.InfoWindow'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container1', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [104.113368,30.518559] //初始化地图中心点位置
          });
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.Geolocation())
           this.markPoints()
           this.latitude()
        })
        .catch(e => {
          console.log(e)
        })

    },
    markPoints() {
      this.mapData.forEach((item,index) => {
        // 创建一个 Marker 实例：
        console.log(item.mapPunctuation)
        if(item.mapPunctuation){
          var mapMsg = item.mapPunctuation
        }else{
          var mapMsg = item.mapMarker
        }
       if(mapMsg){
         let pos = JSON.parse(mapMsg)
         const marker = new AMap.Marker({
            map: this.map,
            icon: new AMap.Icon({
               // size: new AMap.Size(19, 32),
                 // anchor:new AMap.Pixel(20, 30),
               image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 默认图标的URL
             }),
           position: new AMap.LngLat(pos.longitude, pos.latitude),
           // position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可                                        以是经纬度构成的一维数组[lng, lat]
         });
         markers.push(marker)
           // 将创建的点标记添加到已有的地图实例：
           this.map.add(marker);
           this.map.setFitView();
           //给标记点添加事件
         marker.on('click', (e) => {
             this.setInfoWindows(e, item)
             console.log(e, item)
           })
       }else{
          return;
       }


      });
    },
 //显示的弹出框组件
 setInfoWindows(e, item) {
   if(item.mapPunctuation){
          var mapMsg = item.mapPunctuation
        }else{
          var mapMsg = item.mapMarker
        }
   // 信息窗体的内容
   let content = [
     `<div class="chuangti">`,
     `<div class="moren ">资源名称 : ${item.shopName || item.advertisingName || item.venueName}<div class="xiangq" onclick='goshop(${JSON.stringify(item)})'">详情 ></div></div>`,
     `<div class="">位置 : ${item.detailedLocation || item.detailedLocation}</div>`,
     `<div class="">租赁情况 : <span class="kongzhi">空置</span></div>`,
     "招商进度 : 无租赁申请</div>",
   ];
   let contentlist = [
     `<div class="chuangti">`,
     `<div class="moren ">资源名称 : ${item.shopName || item.advertisingName || item.venueName}<div class="xiangq" onclick='goshop(${JSON.stringify(item)})'>详情 ></div></div>`,
     `<div class="">位置 : ${item.detailedLocation || item.detailedLocation}</div>`,
     `<div class="">租赁人 :张三</div>`,
     `<div class="">经营类型 :休闲娱乐</div>`,
     `<div class="">联系方式 :1231312312312</div>`,
      `<div class="">到期时间 :2022-02-22</div>`,
   ];
   // 创建 infoWindow 实例
   let infoWindow = new AMap.InfoWindow({
     offset: new AMap.Pixel(8,0),
     content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
   });
   // 打开信息窗体
   let pos = JSON.parse(mapMsg)
   let dd = this.map.getCenter()
   // dd.pos = [e.pos[0], e.pos[1]]
   dd.lat = pos.latitude
   dd.lng = pos.longitude
   infoWindow.open(this.map, dd);
   infoWindow.setAnchor('bottom-center')
 },
 //点击获取经纬度
 latitude() {
   this.map.on('click',(ev)=> {
    // 触发事件的对象
    let target = ev.target;
    // 触发事件的地理坐标，AMap.LngLat 类型
    let lnglat = ev.lnglat;
    // 触发事件的像素坐标，AMap.Pixel 类型
    let pixel = ev.pixel;
    // 触发事件类型
    let type = ev.type;

   });
 },
 destroyMap() {
      if (this.map) {
        this.map.destroy();
        this.map = null;
      }
  }
 },
   created(){
      //标注文字上的点击事件
      window.goshop = (item)=>{
           this.$emit('MapItem', item)
        }
    },
  mounted() {
    //DOM初始化完成进行地图初始化
    // this.initMap()

  },
  beforeDestroy() {
    this.destroyMap();
  }
}
</script>

<style lang="scss">
#container1 {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
::v-deeep  .amap-info-content{
  padding:0px;
}
.chuangti{
  font-size: 12px;
}
.moren{
  // width: 160px;
display: flex;
justify-content: space-between;
}
.xiangq{
  color: #3F9B6A;
}
.kongzhi{
  color: #F59A23;
}
.amap-icon{
  img {
     width:19px;
     height:30px;
   }
}

</style>