需要在同一位置添加标记的数量

时间:2017-11-06 10:15:46

标签: angular google-maps google-maps-api-3 google-maps-markers angular-google-maps

我目前正在开发使用Google地图的应用程序。

我正在尝试在同一位置显示多个标记。我有地图工作,但似乎无法标记。只突出显示一个标记。如果我插入4个具有相同位置名称的标记。我需要同时显示四个标记。 但在我的情况下,我没有同时显示四个标记。 这是我的组件和ui

Component.ts

    getmapdata() {


        this.Service.Map().subscribe
            (response => {
                this.element = response;
                this.markers = [];
                this.mapLoading = false;
                if (response.length > 0) {
                    for (var i = 0; i < this.element.length; i++) {
                        this.marker = new IMarker();

                        this.element[i].lat = Math.random() * 0.1 + this.element[i].lat;
                        this.element[i].long = Math.random() * 0.1 + this.element[i].long;

                        this.marker.positions = [this.element[i].lat, this.element[i].long];
                        this.centerPosition.lat = this.element[i].lat;
                        this.centerPosition.lng = this.element[i].long;


                        this.markers.push(this.marker);
                    }
                }
                else this.markers = undefined;
            },
            (err => {
                //console.log(err);

                this.toastr.error(JSON.parse(err._body).Message);
            }));

    }


showInfoWindow(t) {
        var e = t.target;
        let lat: any, lng: any;
        lat = parseFloat(e.getPosition().lat().toString()).toFixed(4);
        lng = parseFloat(e.getPosition().lng().toString()).toFixed(4);

        for (var i = 0; i < this.element.length; i++) {
            let elat: any = parseFloat(this.element[i].lat.toString()).toFixed(4),
                elng: any = parseFloat(this.element[i].long.toString()).toFixed(4);

            if (lat === elat && lng === elng) {
                this.info = this.element[i].cityname + " - " + this.element[i].sitename;
            }
        }
        e.nguiMapComponent.openInfoWindow("iw", e)
    }

.html文件

  <div *ngIf="markers != undefined && markers.length != 0" class="sebm-google-map-container">
                                <ngui-map zoom="4" [center]="{lat: centerPosition.lat, lng: centerPosition.lng }" scrollwheel="true" zoomControl=true
                                          mapTypeControl=false streetViewControl=false fullscreenControl=true>
                                    <marker *ngFor="let pos of markers"
                                            on-mouseover="showInfoWindow($event)"
                                            [position]="pos.positions"
                                            [icon]="{
                                                    url: 'Contents/Icons/blue_marker.png',
                                                    anchor: [16,16],
                                                    size: [32,32],
                                                    scaledSize: [32,32]
                                                }"
                                            (click)="gotoSite(pos)">

                                    </marker>

                                    <info-window id="iw">
                                        <div>{{ info }}</div>
                                    </info-window>

                                </ngui-map>




                            </div>

和.css文件

 styles: [
        `
    .sebm-google-map-container, .sebm-google-map-container ngui-map {
       height: calc(50vh - 117px);
     } 

    [hidden] { display: none !important;}

    #divNoMapData {
        position:absolute !important; 
        width:100%;
        display: table;
    }
    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }
  `
    ],

0 个答案:

没有答案