如何使用 angular 传单指令和 geojson 更改传单弹出窗口的偏移量？

Question

我正在使用 angular-leaflet-directive 和 geojson 来使用 leaflet 和 mapbox 创建地图标记。标记上的弹出窗口未在标记上正确对齐。

angular.extend($scope, { // Map data
                geojson: {
                    data: $scope.filteredShows,
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup(feature.properties.artist + '&nbsp;&middot;&nbsp;' + feature.properties.venue);
                        layer.setIcon(defaultMarker);
                        layer.on({
                            mouseover: pointMouseover,
                            mouseout: pointMouseout
                        });
                        layers[feature.properties.id] = layer;
                    }
                }

            });

如何更改标记的偏移量？

Answer 1

在 L.Icon 中使用 popupAnchor: [-10, -10],。参见 http://leafletjs.com/reference.html#icon

Answer 2

如果您使用的是默认图像，但由于您使用的是 Rails 服务器来提供资产，所以它们被放置在不同的位置并具有不同的文件名，例如，这里有一个提示您不必在 the default icon.

的值中进行硬编码

在我的例子中，我将实际值注入到正确的位置。

<script type="text/javascript">
  var injectedData = {
    paths: {
      leafletIcon: {
        iconRetinaUrl: '<%= image_url "leaflet-1.3.4/marker-icon-2x.png" %>',
        iconUrl: '<%= image_url "leaflet-1.3.4/marker-icon.png" %>',
        shadowUrl: '<%= image_url "leaflet-1.3.4/marker-shadow.png" %>',
      },
    },
  };
</script>

然后，我创建了一个 Icon 实例，它使用直接来自 Icon.Default 原型的默认图像偏移值。

import { Icon } from 'leaflet';

const defaultIcon = new Icon({
  ...Icon.Default.prototype.options,
  ...injectedData.paths.leafletIcon,
});

这与直接注入数据相同。做适合您的特定用例的事情。

const defaultIcon = new Icon({
  ...Icon.Default.prototype.options,
  {
    iconRetinaUrl: "/assets/leaflet-1.3.4/marker-icon-2x-00179c4c1ee830d3a108412ae0d294f55776cfeb085c60129a39aa6fc4ae2528.png",
    iconUrl: "/assets/leaflet-1.3.4/marker-icon-574c3a5cca85f4114085b6841596d62f00d7c892c7b03f28cbfa301deb1dc437.png",
    shadowUrl: "/assets/leaflet-1.3.4/marker-shadow-264f5c640339f042dd729062cfc04c17f8ea0f29882b538e3848ed8f10edb4da.png",
  },
});

就我而言，我在 React 中使用了 react-leaflet 库，而不是 Angular，但我相信您可以适当地调整您的用例。就我而言，我使用 defaultIcon 作为 Marker 组件的道具。

<Map center={position} zoom={zoom}>
  <TileLayer
    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker icon={defaultIcon} position={position}>
    <Popup>
      <span>{this.props.location}</span>
    </Popup>
  </Marker>
</Map>

我知道这并不能直接回答您的问题，但是您的问题和让我走上了我的特定用例所需的道路，这是一种简单但可靠的提供方式默认图标集的不同图像 URL（包括更改的文件名），同时还可以重复使用默认偏移量数字，而无需对其进行硬编码。我希望我的回答可以帮助将来遇到此问题的其他人。

如何使用 angular 传单指令和 geojson 更改传单弹出窗口的偏移量？

How do you change the offset for a leaflet popup using angular leaflet directive and geojson?

leaflet

angular-leaflet-directive