小编tre*_*con的帖子

我在 Vue.js 项目（版本 3）中从 Leaflet 收到一个奇怪的错误。

如果我关闭弹出窗口并放大/缩小，Firefox 上会出现此错误：

未捕获的类型错误：this._map 为 null

在 Chrome 上：

无法读取 null 的属性“_latLngToNewLayerPoint”

地图组件如下：

<template>
  <div id="map"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from 'leaflet';

export default {
  name: 'Map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.map = L.map("map").setView([51.959, -8.623], 12);
    L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    L.circleMarker([51.959, -8.623]).addTo(this.map)
      .bindPopup('I am a marker')
      .openPopup();
  }
}
</script>

<style scoped>
  #map {
    height: 300px;
    width: 100%;
  }
</style>

如何重现错误：

1. 打开 stackblitz： …

我想构建一个 Ionic 应用程序，当应用程序最小化（在后台运行）时，该应用程序仍然可以使用加速度计数据。

我尝试过使用：

• 离子设备运动插件 https://ionicframework.com/docs/native/device-motion
• 浏览器支持的 Device Motion Web API https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent
• Chrome 浏览器支持的通用传感器 API https://developers.google.com/web/updates/2017/09/sensors-for-the-web

前两个在前台工作，但当应用程序在后台时不起作用（加速度计读数暂停并在前台再次恢复）。即使我使用这个 polyfill，通用传感器 API 也根本无法工作： https: //github.com/kenchris/sensor-polyfills

我还尝试了离子背景模式插件，但是，加速度计读数仍然在后台暂停。 https://ionicframework.com/docs/native/background-mode

Ionic 应用程序如何在后台使用加速计？有没有我不知道其存在的插件（例如，Ionic 背景地理定位允许应用程序在后台接收位置）？还有其他办法吗？

我需要在多边形要素中实现多色填充。填充将根据要素属性有条件地格式化。

假设我需要一个具有三色图案的多边形，如下所示：

let fillPalette = ['orange', 'green', 'blue'];

这在传单中怎么可能呢？

简而言之div，这可以通过以下 CSS 函数轻松实现：

background: repeating-linear-gradient(
  -45deg,
  orange,
  orange 10px,
  green 10px,
  green 20px,
  blue 20px,
  blue 30px
);

然而，Leaflet 使用 SVG/Canvas。

我知道以下插件：

• https://github.com/teastman/Leaflet.pattern

• https://github.com/cloudybay/leaflet-polygon-fillPattern

不幸的是，第一个似乎不支持多色图案，第二个仅支持图像。

有任何想法吗？