4

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

偏移问题

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

            });

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

4

2 回答 2

7

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

于 2015-03-05T11:10:40.880 回答
0

例如，如果您使用的是默认图像，但由于您使用 Rails 服务器来提供资源，因此它们被放置在具有不同文件名的不同位置，这里有一个提示，因此您不必硬编码默认图标中的值。

就我而言，我将实际值注入到正确的位置。

<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.Default然后，我创建了一个 Icon 实例，它直接从原型中使用图像偏移的默认值。

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 的回答让我走上了我的特定用例所需的道路，这是为默认图标集提供不同图像 URL 的一种简单但可靠的方法（包括更改的文件名），同时还可以重用默认偏移量，而无需对其进行硬编码。我希望我的回答可以帮助将来遇到此问题的其他人。

于 2018-12-19T03:53:29.677 回答