dzhh-frontend/.svn/pristine/ef/efd009e89cfd429b85740bc8c7acf4b94b61ab17.svn-base

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

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

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

		},
		data: function() {
			return {
				iconShow: false,
				locate: {},
        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.showMarker();
			},
			setMarkerPosition(coords) {
				this.locate.setPosition(coords);
			},
			showMarker() {
				this.iconShow = true;

			},
			hideMarker() {
				this.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;
	}
</style>