Можно ли вызвать API Карт Google Javascript из функции JS и отобразить его на ion-content? - PullRequest
Новая
       65

Можно ли вызвать API Карт Google Javascript из функции JS и отобразить его на ion-content?

0 голосов
/ 03 марта 2020

Я создал фрагмент кода API Карт Google, который отображает карту в поле: 

var map;

function initMap() {
  var mapCenter = {
    lat: 50,
    lng: 50
  };
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: mapCenter,
    disableDefaultUI: true
  });
  map.setOptions({
    minZoom: 5,
    maxZoom: 20
  });
};
<!DOCTYPE html>
<html>
<style>
.box {
    width: 300px;
    height: 300px;
    border: 5px solid;
    margin: auto;
  }
}
</style>

<head>
</head>

<body>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap">
  </script>

  <div class="box" id="map">
  </div>


</body>

</html>

Теперь я хотел бы добавить эту карту в ионное содержание , которое включено в следующее: 

    LoginModal = __decorate([
            Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
                selector: 'page-login-modal',template:
    '<ion-header class="{{customClasses}}">
      <ion-toolbar>
        <ion-title>{{ title | translate }}
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="{{customClasses}}">
        <div class="box" id="map">
        </div>
    </ion-content>'
 }),], LoginModal);
    return LoginModal;
}());

По этой причине я создал функцию JS (в том же файле, что и ion-content), чтобы сделать вызов API Карт Google и передать мои аргументы: 

    var map;
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap";
    LoginModal.prototype.initMap = function () {
         var mapCenter = {
            lat: 50,
            lng: 50
         };
         map = new google.maps.Map(document.getElementById('map'), {
             zoom: 15,
             center: mapCenter,
            disableDefaultUI: true
         });
         map.setOptions({
            minZoom: 5,
            maxZoom: 20
         });
      };

Приведенный выше код не отображает карту, а только поле. Я попытался поместить строку "src =" https: " в индексный файл. html (в теле и в голове), но снова отображается только поле.

Чтобы проверить, что мои функции JS могут изменять ионный контекст, я создал другую функцию (рядом с initMap ()), которая смогла заменить фотографию текстом после нажатия кнопки.

Какие изменения я должен сделать, чтобы отобразить карту (поскольку я могу сделать это в приведенном выше примере с фрагментом JS)?

1 Ответ

0 голосов
/ 03 марта 2020

Я сделал это, попробуйте воспроизвести его в своем коде, и, наконец, вам нужно вызвать createMap ().

Вот одно из доступных приложений, вы можете взять из него ссылку, но это для Bing

https://github.com/microsoft/Bing-Maps-Fleet-Tracker/tree/master/MobileClient

private loadPromise: Promise<void>;

private load(): Promise < void > {
  if (this.loadPromise) {
    return this.loadPromise;
  }

  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.defer = true;

  const mapsCallback = 'initMap';
  script.src = `https://maps.googleapis.com/maps/api/js?key=<GOOGLE-MAP-KEY>&callback=initMap`;
  this.loadPromise = new Promise <
  void >
  ((resolve: Function, reject: Function) => {
    window[mapsCallback] = () => {
      this.loadLableMarker().then(() => {
        resolve();
      });
    };
    script.onerror = (error: Event) => {
      console.error('maps script error' + error);
      reject(error);
    };
  });

  document.body.appendChild(script);

  return this.loadPromise;
}

createMap(element: HTMLElement, options): Promise {
  return this.load().then(() => {
    return new google.maps.Map(document.getElementById('map'), {
             zoom: 15,
             center: mapCenter,
            disableDefaultUI: true
         });
  });
}
...