我需要在地图上显示标记。我从地图加载良好的地方获取代码,但在控制台InvalidValueError中显示错误:setMap:不是Map的实例;而不是StreetViewPanorama的实例。任何人都可以帮助我解决这个问题
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ViewChild } from '@angular/core'
import { GoogleMaps } from '@ionic-native/google-maps';
declare var google;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
private map: any;
constructor(public navCtrl: NavController, private googleMaps: GoogleMaps)
{}
loadMap() {
let latLng = new google.maps.LatLng(24.926295, 67.130499);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
var locations = [
['Darul-sehat Hospital', 24.861624, 67.006629],
['Memon Hospital ', 24.9456, 67.146],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
答案 0 :(得分:0)
似乎您没有使用正确的Google地图参考。尝试下面适用于我的代码。
@{
Layout = "_PublicLayout";
ViewData["Title"] = "About";
}
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1920/img1.jpg" data-title="Front in frames - image #01">
<img class="img-fluid rounded" src="/img/500x805/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img27.jpg" data-title="Front in frames - image #02">
<img class="img-fluid rounded" src="/img/380x227/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1920/img16.jpg" data-title="Front in frames - image #03">
<img class="img-fluid rounded" src="/img/380x360/img23.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img4.jpg" data-title="Front in frames - image #04">
<img class="img-fluid rounded" src="/img/380x227/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img25.jpg" data-title="Front in frames - image #05">
<img class="img-fluid rounded" src="/img/380x360/img24.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img21.jpg" data-title="Front in frames - image #06">
<img class="img-fluid rounded" src="/img/380x360/img22.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="/img/1920x1080/img26.jpg" data-title="Front in frames - image #07">
<img class="img-fluid rounded" src="/img/380x227/img3.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Content -->
</div>
<!-- End Frames Section -->
您唯一要更改的是上述功能中的
至marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: this.map
});
。