Ionic3 / Google Map API:在地图中单击外部时自动关闭信息窗口

时间:2018-03-24 00:35:40

标签: google-maps typescript google-maps-api-3 ionic3 google-maps-api-2

Google Maps API 中,当我们点击 infoWindow 打开Marker时,就会出名出现 infowindow 弹出窗口,但是当我们通过点击其他方面在地图上继续我们的工作时,弹出窗口仍然打开。什么是解决这个常规错误的最简单的解决方案?

home.ts:

declare
const google;

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild('map') mapElement: ElementRef;
    map: any;
    city: any;

    constructor(public navCtrl: NavController,
        private restProvider: RestProvider) {

    }

    ionViewDidLoad() {
        this.initMap();
        //this.createCenterMarker();
    }

    initMap() {
        // start my map
        let origin = {
            lat: 36.731470384526965,
            lng: 10.210593179614534
        };
        this.map = new google.maps.Map(this.mapElement.nativeElement, {
            zoom: 18,
            center: origin,
            mapTypeId: 'satellite', //hybrid
            zoomControl: false,
            streetViewControl: false,
            fullscreenControl: false,

        });
        this.map.setCenter(origin);

        google.maps.event.addListener(this.map, 'click', (event) => {
            this.addMarker(event.latLng);
        });

    }


    addMarker(location) {
        let marker = new google.maps.Marker({
            position: this.map.getCenter(),
            label: 'aaa',
            map: this.map
        });

        let infowindow = new google.maps.InfoWindow({
            content: "<span style='color:red'> <b> Karim </b> </span>"
        });

        marker.addListener('click', function() {
            infowindow.open(this.map, marker);
        });

        //place map center to location
        //this.map.panTo(location);

    }


}

0 个答案:

没有答案