时间戳

首页 > 解决方案 > 如何将 Google Maps 与 Marko.js 和 Lasso.js 一起使用并将全局变量链接到其他模板

javascript - 如何将 Google Maps 与 Marko.js 和 Lasso.js 一起使用并将全局变量链接到其他模板

问题描述

我在一个项目中使用 Marko.js 和 Lasso.js 来构建 .js 和 .scss 代码。<script>我可以通过标签成功地与 Google Maps API 交互。我希望将纬度和经度值发送到其他模板，我该怎么做？

我尝试在文档中使用本指南，但没有奏效。我试图从标签index.marko内的内联 js引用全局变量<script>。

我被迫使用内联 js 的原因与 Lasso.js 和 Google Maps using 有关<script async defer src='https://maps.googleapis.com/maps/api/...&callback=initMap'/>，它有一个回调到另一个<script>标签内称为 initMap() 的内联 js 函数。每次我尝试将内联 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"/>

这是 home/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 中获得的纬度和经度值数组是一个很棒的工具，它只需要更多文档。提前致谢。

标签： javascriptnode.jsmarkolasso.js

解决方案

我被迫使用内联 js 的原因与 Lasso.js 和使用 https://maps.googleapis.com/maps/api/...&callback=initMap'/> 的 Google 地图有关，它有一个回调在另一个标签中调用 initMap() 的内联 js 函数。

我建议使用这个包：https ://www.npmjs.com/package/load-google-maps-api 。它允许您加载 google maps api 并在不创建全局处理程序的情况下访问它。

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是全局变量。它们更像是仅在模板中可用的“渲染全局变量”，但在渲染时对所有模板都可用。

推荐阅读