在模板WebComponents中实现Google MarkerClusterer Plus

如何解决在模板WebComponents中实现Google MarkerClusterer Plus

我读了很多关于如何将外部文件实现到模具中的信息，但是没有什么比我想要的有效。特色在于模具以Liferay主题运行。但是我认为那没关系。

我通过npm从Google安装了MarkerClustererPlus，并在模板配置中将min文件复制到“ asset”文件夹中，如下所示：

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import nodePolyfills from 'rollup-plugin-node-polyfills';

export const config: Config = {
  namespace: 'gwkp-components',srcDir: 'src/js/components',plugins: [
    sass({
      injectGlobalPaths: [
        'build/css/clay/_mixins.scss','build/css/fonts/font-awesome/scss/_mixins.scss','build/css/fonts/font-awesome/scss/_variables.scss','build/css/fonts/font-awesome/scss/_core.scss','src/js/components/utils/_stencilvars.scss','build/css/fonts/font-awesome/scss/regular.scss','build/css/fonts/font-awesome/scss/light.scss','build/css/fonts/font-awesome/scss/solid.scss','build/css/clay/bootstrap/_functions.scss','build/css/clay/bootstrap/_mixins.scss','build/css/clay/bootstrap/_variables.scss','src/css/gw/_colors.scss','src/css/gw/_variables.scss','src/css/gw/bem/_includes.scss'
      ]
    })
  ],outputTargets: [
    {
      type: 'www',buildDir: '.',dir: 'build/js/components',serviceWorker: null,// disable service workers
      copy: [
        { src: '../../../build/css/fonts/font-awesome/webfonts',dest: 'webfonts' },{ src: '../../../node_modules/@google/markerclustererplus/dist/markerclustererplus.min.js',dest: 'assets/js/markerclustererplus.min.js' }
      ]
    }
  ],rollupPlugins: {
    after: [
      nodePolyfills()
    ]
  }
};

现在出现了问题，如何获得对min.js文件的访问？我是否需要导入语句并声明变量或创建脚本标签？我以某种方式尝试了两者，但到目前为止没有任何效果。我只需要一个组件。

最后，我想在组件中使用以下代码：

var markerCluster = new MarkerClusterer(this.map,this.markerMap,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

解决方法

无需将node_modules/@google/markerclustererplus/dist/markerclustererplus.min.js复制到assets/js/markerclustererplus.min.js。

只需在组件的tsx文件中导入MarkerCluster

import MarkerClusterer from "@google/markerclustererplus";

您需要已加载Google Maps JavaScript库。据我所知，您必须通过脚本标签加载它，但这可以dynamically完成。

我在示例中使用的是// @ts-ignore，但您可以根据需要使用install the Google Maps types。

最终组件应类似于以下内容：

import { h,Component,Host,Element,Listen } from "@stencil/core";
import MarkerClusterer from "@google/markerclustererplus";

@Component({
  tag: "my-component",styles: `
    :host {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .map {
      height: 100%;
    }
  `,shadow: true,})
export class MyComponent {
  @Element() el: HTMLElement;

  private googleMapsApiKey = "YOUR_API_KEY_HERE";
  private locations = [
    { lat: -31.56391,lng: 147.154312 },{ lat: -33.718234,lng: 150.363181 },{ lat: -33.727111,lng: 150.371124 },{ lat: -33.848588,lng: 151.209834 },{ lat: -33.851702,lng: 151.216968 },{ lat: -34.671264,lng: 150.863657 },{ lat: -35.304724,lng: 148.662905 },{ lat: -36.817685,lng: 175.699196 },{ lat: -36.828611,lng: 175.790222 },{ lat: -37.75,lng: 145.116667 },{ lat: -37.759859,lng: 145.128708 },{ lat: -37.765015,lng: 145.133858 },{ lat: -37.770104,lng: 145.143299 },{ lat: -37.7737,lng: 145.145187 },{ lat: -37.774785,lng: 145.137978 },{ lat: -37.819616,lng: 144.968119 },{ lat: -38.330766,lng: 144.695692 },{ lat: -39.927193,lng: 175.053218 },{ lat: -41.330162,lng: 174.865694 },{ lat: -42.734358,lng: 147.439506 },lng: 147.501315 },{ lat: -42.735258,lng: 147.438 },{ lat: -43.999792,lng: 170.463352 },];
  private _mapEl: HTMLElement;

  componentDidLoad() {
    if (document.getElementById("maps-script")) {
      this.initMap();
      return;
    }

    // Create the script tag,set the appropriate attributes
    var script = document.createElement("script");
    script.id = "maps-script";
    script.src = `https://maps.googleapis.com/maps/api/js?key=${this.googleMapsApiKey}&callback=initMap`;
    script.defer = true;

    // Attach your callback function to the `window` object
    // @ts-ignore
    window.initMap = () => this.initMap();

    // Append the 'script' element to 'head'
    document.head.appendChild(script);
  }

  initMap() {
    // @ts-ignore
    const map = new google.maps.Map(this._mapEl,{
      zoom: 3,center: { lat: -28.024,lng: 140.887 },});

    // Create an array of alphabetical characters used to label the markers.
    const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    const markers = this.locations.map((location,i) => {
      // @ts-ignore
      return new google.maps.Marker({
        position: location,label: labels[i % labels.length],});
    });

    // Add a marker clusterer to manage the markers.
    const markerCluster = new MarkerClusterer(map,markers,{
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",});
  }

  render() {
    return (
      <Host>
        <div class="map" ref={(el) => (this._mapEl = el)}></div>
      </Host>
    );
  }
}

这里是Working example on webcomponents.dev