Data - GMap - 《PrimeNG Document》 - 书栈网

Documentation
Source

GMapGMap component provides integration with Google Maps API. This sample demontrates various uses cases like binding, overlays and events. Click the map to add a new item.

Documentation

Import


import {GMapModule} from 'primeng/gmap';

Getting Started

A map is initialized with options and dimensions. Refer to the google maps api for the list of available options.


<p-gmap [options]="options" [style]="{'width':'100%','height':'320px'}" ></p-gmap>


export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
    }
}

Overlays

GMap can display any type of overlay such as markers, polygons and circles. Overlay instances are bound using the overlays property array. Overlays are aware of one-way binding so whenever the array changes, gmap updates itself.


<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}" ></p-gmap>


export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];
    }
}

Events

GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.


<p-gmap [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}"
            (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"></p-gmap>


export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];
    }
    handleMapClick(event) {
        //event: MouseEvent of Google Maps api
    }
    handleOverlayClick(event) {
        //event.originalEvent: MouseEvent of Google Maps api
        //event.overlay: Clicked overlay
        //event.map: Map instance
    }
}

Google Maps API

In case you need to access the map instance directly, use the getMap() method.


<p-gmap #gmap [options]="options"></p-gmap>
<button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())"></button>


export class MyModel {
    options: any;
    overlays: any[];
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
    }
    zoomIn(map) {
        map.setZoom(map.getZoom()+1);
    }
}

Another option is to to get the map object directly after init via (onMapReady) event. In the example below, google.maps.Map is used for adjusting map bounds to markers.


<p-gmap #gmap [options]="options" [overlays]="overlays" [style]="mapStyle"
    (onMapReady)="setMap($event)"></p-gmap>

Then from your component you would write


export class MyModel {
    options: any;
    overlays: any[];
    map: google.maps.Map;
    setMap(event) {
        this.map = event.map;
    }
    ngOnInit() {
        let bounds = new google.maps.LatLngBounds();
        this.overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
        ]
        // ... extend bounds
        this.overlays.forEach(marker => {
            bounds.extend(marker.getPosition());
        });
        setTimeout(()=> { // map will need some time to load
            this.map.fitBounds(bounds); // Map object used directly
        }, 1000);
    }
}

Properties

Name	Type	Default	Description
options	any	null	Google Maps API configuration object.
overlays	array	null	An array of overlays to display.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Events

Name	Parameters	Description
onMapClick	event: Google Maps MouseEvent	Callback to invoke when map is clicked except markers.
onMapDragEnd	originalEvent: Google Maps dragend	Callback to invoke when map drag (i.e. pan) has ended.
onMapReady	event.map: Google Maps Instance	Callback to invoke when the map is ready to be used.
onOverlayClick	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay is clicked.
onOverlayDblClick	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay is double clicked.
onOverlayDrag	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay is being dragged.
onOverlayDragEnd	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay drag ends.
onOverlayDragStart	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay drag starts.
onZoomChanged	originalEvent: Google Maps zoom_changed	Callback to invoke when zoom level has changed.

Dependencies

Google Maps API.

Source

View on GitHub


<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-gmap #gmap [style]="{'width':'100%','height':'320px', 'margin-bottom': '1em'}" [options]="options" [overlays]="overlays"
       (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
<button type="button" pButton label="Clear" icon="pi pi-times" (click)="clear()" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom In" icon="pi pi-plus" (click)="zoomIn(gmap.getMap())" style="margin-right:.25em"></button>
<button type="button" pButton label="Zoom Out" icon="pi pi-minus" (click)="zoomOut(gmap.getMap())"></button>
<p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
    <div class="ui-g ui-fluid" *ngIf="selectedPosition">
        <div class="ui-g-2"><label for="title">Label</label></div>
        <div class="ui-g-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
        <div class="ui-g-2"><label for="lat">Lat</label></div>
        <div class="ui-g-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()"></div>
        <div class="ui-g-2"><label for="lng">Lng</label></div>
        <div class="ui-g-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()"></div>
        <div class="ui-g-2"><label for="drg">Drag</label></div>
        <div class="ui-g-10"><p-checkbox [(ngModel)]="draggable" binary="true" [style]="{'margin-top':'.25em'}"></p-checkbox></div>
    </div>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
            <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker()"></button>
        </div>
    </p-footer>
</p-dialog>


export class GMapDemo implements OnInit {
    options: any;
    overlays: any[];
    dialogVisible: boolean;
    markerTitle: string;
    selectedPosition: any;
    infoWindow: any;
    draggable: boolean;
    constructor(private messageService: MessageService) {}
    ngOnInit() {
        this.options = {
            center: {lat: 36.890257, lng: 30.707417},
            zoom: 12
        };
        this.initOverlays();
        this.infoWindow = new google.maps.InfoWindow();
    }
    handleMapClick(event) {
        this.dialogVisible = true;
        this.selectedPosition = event.latLng;
    }
    handleOverlayClick(event) {
        let isMarker = event.overlay.getTitle != undefined;
        if(isMarker) {
            let title = event.overlay.getTitle();
            this.infoWindow.setContent('' + title + '');
            this.infoWindow.open(event.map, event.overlay);
            event.map.setCenter(event.overlay.getPosition());
            this.messageService.add({severity:'info', summary:'Marker Selected', detail: title});
        }
        else {
            this.messageService.add({severity:'info', summary:'Shape Selected', detail: ''});
        }
    }
    addMarker() {
        this.overlays.push(new google.maps.Marker({position:{lat: this.selectedPosition.lat(), lng: this.selectedPosition.lng()}, title:this.markerTitle, draggable: this.draggable}));
        this.markerTitle = null;
        this.dialogVisible = false;
    }
    handleDragEnd(event) {
        this.messageService.add({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
    }
    initOverlays() {
        if(!this.overlays||!this.overlays.length) {
            this.overlays = [
                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
                new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
                new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
                new google.maps.Polygon({paths: [
                    {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
                ], strokeOpacity: 0.5, strokeWeight: 1,fillColor: '#1976D2', fillOpacity: 0.35
                }),
                new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
                new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
            ];
        }
    }
    zoomIn(map) {
        map.setZoom(map.getZoom()+1);
    }
    zoomOut(map) {
        map.setZoom(map.getZoom()-1);
    }
    clear() {
        this.overlays = [];
    }
}