Как использовать Google Maps с Marko.js и Lasso.js и связать глобальные переменные с другими шаблонами - PullRequest
Новая
       45

Как использовать Google Maps с Marko.js и Lasso.js и связать глобальные переменные с другими шаблонами

0 голосов
/ 24 апреля 2019

Я нахожусь в проекте, использующем Marko.js с Lasso.js для построения кода .js и .scss. Я могу успешно взаимодействовать с Google Maps API с помощью тегов <script>. Я хочу отправить значения широты и долготы в другие шаблоны, как мне это сделать?

Я пытался использовать это руководство внутри документов, но это не сработало. Я пытался ссылаться на глобальную переменную из index.marko со встроенным js внутри тега <script>.

Причина, по которой я вынужден использовать встроенный js, связана с Lasso.js и Google Maps, использующими <script async defer src='https://maps.googleapis.com/maps/api/...&callback=initMap'/>, поскольку он имеет обратный вызов встроенной js-функции initMap () внутри другого тега <script>. Каждый раз, когда я пытался переместить встроенный js-код в отдельный файл .js, добавив его в файл browser.json, как и все остальное. Выдает ошибку о том, что функция initMap не загружена.

Хорошо, вот мой корневой каталог 

src
|_ pages
   |_ home
      |_ index.marko
      |_ index.js
src
|_ components
   |_ location-search
      |_ index.marko

Это местоположение-поиск / index.marko: 

div.search-container.location-search
  div.input-field
    p.input-label -- Search
    input.controls#pac-input type="text" placeholder="Search Box"
  div#map

<script>
  functioninitMap() {
    // Do Google Maps stuff and obtain an array of lat lng values.
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/...&callback=initMap"/>

Это дом / index.marko 

lasso-page package-path="./browser.json"
<!DOCTYPE html>
html lang="en"
  head
    meta charset="UTF-8"
    meta name="viewport" content="initial-scale=1.0"
    meta http-equiv="X-UA-Compatible" content="ie=edge"
    title -- App
    lasso-head
  body
    location-search
  browser-refresh
  lasso-body

Я ожидаю, что смогу получить доступ с другой страницы к массиву значений широты и долготы, полученных в components/location-search/index.marko. Marko - отличный инструмент, ему просто нужно больше документации. Заранее спасибо.

1 Ответ

1 голос
/ 24 апреля 2019

Причина, по которой я вынужден использовать встроенный js, связана с Lasso.js и Google Maps с использованием https://maps.googleapis.com/maps/api/...&callback=initMap'/>,, поскольку он имеет обратный вызов встроенной js-функции initMap () внутри другого тега.

Я бы порекомендовал использовать этот пакет: https://www.npmjs.com/package/load-google-maps-api. Он позволяет загружать API Google Maps и получать к нему доступ без создания глобального обработчика. 

import loadGoogleMapsApi from "load-google-maps-api";

class {
  onMount() {
    loadGoogleMapsApi.then((googleMaps) => {
      this.map = new googleMaps.Map(this.getEl('map'), {
        center: {
          lat: 40.7484405,
          lng: -73.9944191
        },
        zoom: 12
      });
    });
  }
}

div.search-container.location-search
  div.input-field
    p.input-label -- Search
    input.controls#pac-input type="text" placeholder="Search Box"
  div key="map"

Я пытался использовать это руководство в документации, но оно не сработало. Я пытался ссылаться на глобальную переменную из index.marko с помощью встроенного js внутри тега.

В этом смысле глобалы, о которых говорится в этом документе, не являются глобалами, как window - глобал. Они больше похожи на «глобальные объекты рендеринга», доступные только в шаблонах, но доступные для всех при рендеринге.

...