Question

我试图让MarkerClustererPlus在ES6模块环境中运行，但我不知道如何将其包含在这个小示例中。 Google Map和其他所有东西都在工作。始终获取markerclustererplus未定义。我看到有一个ES6群集模块，但是我需要markerclustererplus。

package.json

{
  "name": "_",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "flatpickr": "^4.6.2",
    "markerclustererplus": "^2.1.4",
    "uikit": "^3.2.0"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.21.2",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-import-alias": "^1.0.10",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^5.1.2",
    "serve": "^11.1.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  },
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "dev": "npm-run-all --parallel start watch",
    "start": "serve ."
  }
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
const alias = require('rollup-plugin-import-alias');

const production = !process.env.ROLLUP_WATCH;

export default {
  input: './app/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    alias({
      Paths: { 'uikit-util': './node_modules/uikit/src/js/util/index' },    // this is probably crap, just ignore it
      Extensions: ['js', 'json']
    }),
    resolve(), 
    commonjs(), 
    production && terser()
  ]
};

index.js

import UIkit from 'uikit';
import flatpickr from "flatpickr";
import * as Map from './Map'

Map.LocationMap('.js-map')

./ Map / index.js

import GoogleMapsApi from './GMapsApi'
import { stylers } from './stylers'
import markerTmpl from './marker.tmpl'
import MarkerClusterer from "markerclustererplus";  // not working

export function LocationMap(el) {

  const gApiKey = 'xxxxxxxxxxxxxxxxxxxx'
  const gmapApi = new GoogleMapsApi(gApiKey)
  const mapEl = document.querySelector(el)
  const data = {
    lat: parseFloat(mapEl.dataset.lat ? mapEl.dataset.lat : 0),
    lng: parseFloat(mapEl.dataset.lng ? mapEl.dataset.lng : 0),
    address: mapEl.dataset.address,
    title: mapEl.dataset.title ? mapEl.dataset.title : "Map",
    zoom: parseFloat(mapEl.dataset.zoom ? mapEl.dataset.zoom : 12),
  }
  gmapApi.load().then(() => {
    renderMap(mapEl, data)
  })
}


function renderMap(mapEl, data) {

  const options = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: stylers.styles,
    zoom: data.zoom,
    center: {
      lat: data.lat,
      lng: data.lng
    }
  }
  const map = new google.maps.Map(mapEl, options)

  renderMarker(map, data)
  renderCluster(map)
}



function renderCluster(map) {
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var locations = [
    { lat: -31.563910, 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: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438000 },
    { lat: -43.999792, lng: 170.463352 }
  ]

  var markers = locations.map(function (location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

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

}

Answer 1

正如我在markerclustererplus存储库中看到的那样，它们在package.json文件中具有错误的入口点。您可以像这样导入它：

import MarkerClusterer from "markerclustererplus/dist/markerclusterer.min.js";

在ES6模块环境中使用非ES6代码

1 个答案: