diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html index e3697e4..11e3ce3 100644 --- a/src/app/map/map.component.html +++ b/src/app/map/map.component.html @@ -5,7 +5,7 @@ {{version}}
- + diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 69c589f..215037f 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -15,7 +15,7 @@ declare const google; styleUrls: ['map.component.scss'] }) export class MapComponent { - drawListener; + drawListener = []; mapApi: any; markers = []; mobile = false; @@ -32,8 +32,6 @@ export class MapComponent { if(!this.position) this.center(pos); this.position = pos; - this.position.heading = 45; - if(this.position.heading) { let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]'); if(marker) marker.style.transform = `rotate(${this.position.heading}deg)` @@ -79,21 +77,32 @@ export class MapComponent { } draw() { - if(!this.drawListener) { + if(!this.drawListener.length) { this.mapApi.setOptions({draggable: false}); - this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), (this.mobile ? 'touchstart' : 'mousedown'), () => { + + let drawHander = () => { let poly = new google.maps.Polyline({map: this.mapApi, clickable: true}); google.maps.event.addListener(poly, 'click', () => { if(this.remove) poly.setMap(null); }); - let moveListener = google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchmove' : 'mousemove'), e => poly.getPath().push(e.latLng)); - google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener)); - google.maps.event.addListener(poly, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener)); - }); + let moveListener = [ + google.maps.event.addListener(this.mapApi, 'touchmove', e => poly.getPath().push(e.latLng)), + google.maps.event.addListener(this.mapApi, 'mousemove', e => poly.getPath().push(e.latLng)) + ]; + google.maps.event.addListener(this.mapApi, 'touchend', () => moveListener.forEach(listener => google.maps.event.removeListener(listener))); + google.maps.event.addListener(this.mapApi, 'mouseup', () => moveListener.forEach(listener => google.maps.event.removeListener(listener))); + google.maps.event.addListener(poly, 'touchend', () => moveListener.forEach(listener => google.maps.event.removeListener(listener))); + google.maps.event.addListener(poly, 'mouseup', () => moveListener.forEach(listener => google.maps.event.removeListener(listener))); + }; + + this.drawListener = [ + google.maps.event.addDomListener(this.mapApi.getDiv(), 'touchstart', drawHander), + google.maps.event.addDomListener(this.mapApi.getDiv(), 'mousedown', drawHander) + ] } else { this.mapApi.setOptions({draggable: true}); - google.maps.event.removeListener(this.drawListener); - this.drawListener = null; + this.drawListener.forEach(listener => google.maps.event.removeListener(listener)); + this.drawListener = []; } } }