我目前正在开发使用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;
}
`
],