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

【问题标题】：How do you change the offset for a leaflet popup using angular leaflet directive and geojson?如何使用角度传单指令和 geojson 更改传单弹出窗口的偏移量？
【发布时间】：2015-05-06 07:09:35
【问题描述】：

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

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;
                    }
                }

            });

如何更改标记上的偏移量？

【问题讨论】：

标签： leaflet angular-leaflet-directive

【解决方案1】：

如果您使用的是默认图像，但它们被放置在具有不同文件名的不同位置，因为您使用的是 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>

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

【讨论】：

【解决方案2】：

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

【讨论】：