离子3标记未显示在Google地图中

时间:2019-02-11 02:09:04

标签: angular google-maps ionic-framework

我需要在地图上显示标记。我从地图加载良好的地方获取代码,但在控制台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));
}
}

}  

1 个答案:

答案 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 });