Question

我正在设置一个地图应用程序，该应用程序从数据库动态加载标记并将其显示在地图上，每个标记都有一个自定义图标，该图标使用L.Divicon对象内部的“ html”选项显示。我如何设置图标的锚点，因为图标不是图像文件，而是Bootstrap圆div中的HTML元素？（由于其他原因，我需要以这种方式创建图标）

我尝试过以与图标图像相同的方式设置iconizesize / iconanchor选项。但是放大和缩小地图会更改标记的位置。

var markers = [];
var image = 'https://upload.wikimedia.org/wikipedia/commons/b/bf/Inveraray_Castle_-_south-west_facade.jpg';
var image2 = 'https://mfas3.s3.amazonaws.com/styles/grid-3_thumbnail_retina/s3/wickermansfw.jpg?itok=UH3cbzhO';
  var marker1 = L.marker([57.444051,-2.794932], {
    icon: L.divIcon({
     html: '<i class="far fa-hammer fa-3x"></i>',
     iconSize:     [60, 60], // size of the icon
     iconAnchor:   [30, 60], // point of the icon which will correspond to marker's location
     popupAnchor:  [0, -50], // point from which the popup should open relative to the iconAnchor
     className: 'myDivIcon'
   }),
   image:image2,
      title: 'Huntly Toon',
      type: 'Yard'
    } // Add a title
  )

  var marker = L.marker([57.140956, -2.119276], {
    icon: L.divIcon({
     html: '<i class="far fa-flask fa-3x"></i>',
     iconSize:     [60, 60], // size of the icon
     iconAnchor:   [30, 60], // point of the icon which will correspond to marker's location
     popupAnchor:  [0, -50], // point from which the popup should open relative to the iconAnchor
     className: 'myDivIcon'
   }),

      image: image,
      title: 'Jamies Flat',
      type: 'Lab'
    } // Add a title            // Adjust the opacity
  )



  marker.bindPopup(createPopupContent(marker),customOptions).addTo(map).on('click', showInfo);
  marker1.bindPopup(createPopupContent(marker1),customOptions).addTo(map).on('click', showInfo);
  L.DomUtil.addClass(marker._icon, 'img-circle fa-stack marker');
  L.DomUtil.addClass(marker1._icon, 'img-circle fa-stack marker');

当图标以60x60元素的形式呈现到页面时，我希望代码可以与图标锚和弹出锚一起使用。但是如前所述，图标在地图上移动而没有锚定。

如何为用作图标的html元素提供锚点？ -传单JS

0 个答案: