Question

我正在使用表单模块和谷歌地图，并根据地图上提供的搜索框更新地理编码。 Map是一个不同的组件，它使用geoCodeChange（）函数发出Geocode。 Theis事件由父组件中具有表单的另一个函数处理。

地图组件：

export class mapComponent implements OnInit,OnChanges{
    @Output() emitGeoCode : EventEmitter<any> = new EventEmitter();
    @Output() emitMapObject : EventEmitter<any> = new EventEmitter();
    @Output() emitSearchBox : EventEmitter<any> = new EventEmitter();
    searchBox:any;
    input:any;
    place:any;
    searchedGeocode:any;
    addressMarker:any;
    currentLocationMarker:any;
    map:any;
    mapOptions:any;
    currentLocation:any;
    changedGeocode:any;
    ngOnChanges(){
        this.emitGeoCode.emit(this.searchedGeocode);
    }
    ngOnInit(){
        this.fetchCurrentLocation();
        this.mapOptions = {
            center : new google.maps.LatLng(17.25,78.5),
            zoom : 8,
            zoomControls : true,
            zoomControlOptions : {
            position: google.maps.ControlPosition.LEFT,
        },
        mapTypeControl : false,
        streetViewControl : false,
        }
        this.map = new google.maps.Map(document.getElementById('map'),this.mapOptions);
        this.input = document.getElementById("pac-input");
        this.searchBox = new google.maps.places.SearchBox(this.input);
        this.searchBox.addListener('places_changed', () => {
         this.onSearchResultSelect();
        });
        this.map.addListener('bounds_changed', () => {
            this.searchBox.setBounds(this.map.getBounds());
        });
        let icon = {
            url: "images/currentLocation.png",
            scaledSize: new google.maps.Size(15, 15), // scaled size
            origin: new google.maps.Point(0,0), // origin
            anchor: new google.maps.Point(0, 0)
        };
        this.emitGeoCode.emit('17.25,78.5');
        this.emitMapObject.emit(this.map);
        this.emitSearchBox.emit(this.input);
    }


    fetchCurrentLocation(){
        if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((response) => {
                this.showCurrentLocation(response);
            }, function() {
                alert("Unable to get GPS Location");
            }, {
                enableHighAccuracy : true
            });
        }
        else {
            alert("Geolocation is not supported by this browser.");
            }
    }
    showCurrentLocation(position:any) {
        let icon = {
            url: "images/currentLocation.png",
            scaledSize: new google.maps.Size(15, 15), // scaled size
        };
        this.currentLocation = new google.maps.LatLng(17.25,78.5);
        this.currentLocationMarker = new google.maps.Marker({
            position : this.currentLocation,
            map:this.map,
            icon:icon,
            title : 'Current Location'
        });

        this.map.panTo(this.currentLocation);
    }

    onSearchResultSelect() {
        if(this.addressMarker != undefined){
            this.addressMarker.setMap(null);
            this.addressMarker.setMap(null);
        }
        let results:any;
        let places = this.searchBox.getPlaces();
        if ( places == undefined || places[0] == "" || places[0] == undefined || places[0].geometry == undefined) {
            return;
        }
        this.place = places[0];
        this.map.setCenter(this.place.geometry.location);
        this.searchedGeocode=this.map.getCenter().lat() + "," + this.map.getCenter().lng();
        let latLng = this.place.geometry.location.lat() + ',' + this.place.geometry.location.lng();
        this.emitGeoCode.emit(this.searchedGeocode);
        let icon = {
            url: "./images/location.png",
            scaledSize: new google.maps.Size(30,30),   
        };
        this.addressMarker=new google.maps.Marker({
            position: this.place.geometry.location,
            map: this.map,
            icon: icon,
            title: this.place.formatted_address,
            draggable:true,
        });        
        google.maps.event.addListener(this.map, 'dragstart', function() {

        });  
        google.maps.event.addListener(this.map, 'dragend', function() {

        });
        this.addressMarker.addListener('dragstart', () => {
            this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng();
        });
        this.addressMarker.addListener('dragend', () => {
            this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng();
            this.emitGeoCode.emit(this.changedGeocode);
        });

    }

    OnClick() {
        this.input.value='';
        this.input.focus();
        if(this.addressMarker != undefined){
            this.addressMarker.setMap(null);
            this.addressMarker.setMap(null);
        }
    }
}

我的表单组件是：

    geoCodeChanged(event){
        this.geoCodes = event;
        this.geoCode = this.geoCodes;
        console.log(this.geoCode);
    }

form.component.html：

    <map style="width:70%;left:30%;" (emitGeoCode)="geoCodeChanged($event)" (emitMapObject)="getMapObject($event)"></map>
<div id="dataform" class="container">
    <form style="position: relative;width: 100%;" #dataForm="ngForm">
        <div class="form-group" style="margin-bottom: 40px;">
            <label for="geoCode">GeoCode:</label>
            <input id="geoCode" type="text" class="form-control" style="width:60%;" [(ngModel)]="geoCode" name="geoCode">
            <span style="color:limegreen">(Search using Map)</span>
        </div>
    </form>
</div>

每当标记从一个地方更改为另一个地方时，它就会发出新的地理编码。发出的地理编码不会更改form.component.html中的字段。

我做错了什么？

提前致谢

Answer 1

如果您使用箭头功能

，则不需要self

   this.addressMarker.addListener('dragend', () => {
        this.changedGeocode = this.addressMarker.getPosition().lat() + "," + this.addressMarker.getPosition().lng();
        this.emitGeoCode.emit(this.changedGeocode);
    });

这可能无法解决您的问题。

EventEmitter不更新[（ngModel）]绑定属性

1 个答案: