dzhh-frontend/.svn/pristine/ed/ed8a1a0a71a7715804bab1999519db4431468e15.svn-base

<template>
	<div id="SimpleMarker" ref="SimpleMarker" class="SimpleMarker">
		<div id="locateMarker" ref="locateMarker" class="locateMarker" v-show="iconShow"></div>
		<div id="oneMarker" ref="oneMarker" class="oneMarker" v-show="oneShow"></div>
		<div id="towMarker" ref="towMarker" class="towMarker" v-show="towShow"></div>
	</div>
</template>

<script>
	import 'ol/ol.css';
	import Overlay from "ol/Overlay";

	export default {
		name: "SimpleMarker",
		props: {

		},
		data: function() {
			return {
				iconShow: false,
				oneShow: false,
				towShow: false,
				locate: {},
        locateOne: {},
        locateTow: {},
        map:{},
			}
		},
		inject: ['baseMap'],
		methods: {
			init(coords) {
				this.map = this.baseMap.map;
				if (!this.map) {
					return
				}
				if (!this.map.getOverlayById('locate')) {
					this.locate = new Overlay({
						id: 'locate',
						stopEvent: false,
					});
          this.map.addOverlay(this.locate);
				}
				this.locate.setElement(this.$refs.locateMarker);
				this.setMarkerPosition(coords,this.locate);
				this.hideMarker();
			this.iconShow=true;
			},
      init2(coords) {
        this.map = this.baseMap.map;
        if (!this.map) {
          return
        }
        if (!this.map.getOverlayById('locateOne')) {
          this.locateOne = new Overlay({
            id: 'locateOne',
            stopEvent: false,
          });
          this.map.addOverlay(this.locateOne);
        }
        if (!this.map.getOverlayById('locateTow')) {
          this.locateTow = new Overlay({
            id: 'locateTow',
            stopEvent: false,
          });
          this.map.addOverlay(this.locateTow);
        }
        this.locateOne.setElement(this.$refs.oneMarker);
        this.setMarkerPosition(coords[0],this.locateOne);
        this.locateTow.setElement(this.$refs.towMarker);
        this.setMarkerPosition(coords[1],this.locateTow);
        this.hideMarker();
        this.towShow=true;
        this.oneShow=true;
      },
			setMarkerPosition(coords,locate) {
				locate.setPosition(coords);
			},
			showMarker(iconShow) {
			  console.log(iconShow)
				iconShow = true;
        console.log(iconShow)

      },
			hideMarker(iconShow) {
			  if(!iconShow){
          this.iconShow=false;
          this.oneShow=false;
          this.towShow=false;
        }else {
          iconShow = false;
        }
			}
		}
	}
</script>

<style scoped>
	.locateMarker {
		width: 48px;
		height: 48px;
		background-image: url("../../../assets/locate-red.png");
		background-size: 48px;
		z-index: 100;
		position: relative;
		left: -24px;
		top: -45px;
		pointer-events: none;
	}
  .oneMarker {
    width: 32px;
    height: 50px;
    background-image: url("../../../assets/result1.png");
    background-size: 32px;
    z-index: 100;
    position: relative;
    left: -16px;
    top: -47px;
    pointer-events: none;
  }
  .towMarker {
    width: 32px;
    height: 50px;
    background-image: url("../../../assets/result2.png");
    background-size: 32px;
    z-index: 100;
    position: relative;
    left: -16px;
    top: -47px;
    pointer-events: none;
  }
</style>