Leaflet中的google.maps.overlayview API等价物

Question

我在google maps API中使用google.maps.overlayview来显示呈现HTML并与地理位置相关联的视图。代码示例如下

/* MAP CONFRIM FOR GOOGLE MAPS CODE START */
function MapConfirm(opt_options, offset) {
    // Initializationf
    this.setValues(opt_options);
    this.offset = offset;

    // Here go the MapConfirm styles
    this.textBlock = document.createElement("div");
    this.container = document.createElement("div");
    //$(this.container).addClass("ui-widget").addClass("ui-dialog").addClass("ui-widget-content").addClass("ui-corner-all");
    $(this.textBlock).addClass("ui-widget").addClass("marker-confirm");
    $(this.container).addClass("marker-confirm-container");

    this.okButton = document.createElement("div");
    this.cancelButton = document.createElement("div");
    $(this.okButton).html("Tamam").addClass("marker-button").button();
    $(this.cancelButton).html("Vazgeç").addClass("marker-button").button();
    this.container.appendChild(this.textBlock);
    this.container.appendChild(this.cancelButton);
    this.container.appendChild(this.okButton);
};

MapConfirm.prototype = new google.maps.OverlayView;

MapConfirm.prototype.onAdd = function () {
    var pane = this.getPanes().overlayImage;
    pane.appendChild(this.container);

    // Ensures the MapConfirm is redrawn if the text or position is changed.
    var me = this;
    this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function () { me.draw(); })
     ];
};

// Implement onRemove
MapConfirm.prototype.onRemove = function () {
    this.container.parentNode.removeChild(this.container);

    // MapConfirm is removed from the map, stop updating its position/text.
    for (var i = 0, I = this.listeners_.length; i < I; ++i) {
        google.maps.event.removeListener(this.listeners_[i]);
    }
};

// Implement draw
MapConfirm.prototype.draw = function () {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));
    this.container.style.left = (position.x + this.offset.x) + 'px';
    this.container.style.top = (position.y + this.offset.y) + 'px';
    this.container.style.display = 'block';
    this.container.style.zIndex = this.get('zIndex'); //ALLOW MapConfirm TO OVERLAY MARKER
    $(this.textBlock).html(this.get('text').toString());
};

/* MAP CONFRIM FOR GOOGLE MAPS CODE END */

我想用传单实现一个类似的类。我应该使用什么传单功能？

例如，我想显示一个这样的控件，然后用标记拖动它。

Answer 1

正如@IvanSanchez指出的那样，您可以通过使用L.popup并重新设置它来实现您的目标，以便摆脱默认外观并仅显示您的自定义HTML内容。

另一个简单的解决方案（可能更贴近您的目标，即使您没有明确说明）也可以使用L.divIcon作为L.marker的{​​{3}}选项。使用此解决方案，您可以更自由地提供自定义HTML，并且可以轻松拥有可拖动标记。但是，整个＆＃34;图标＆＃34;是可拖动的，这可能不是你想要获得的UI（但同样，你在你的问题中没有说出任何关于它的内容）。

更复杂的解决方案，但仍然非常易于管理，将再次使用可拖动标记，并将自定义HTML提供给icon。与弹出窗口一样，您需要重新设置它以删除默认的Tooltip外观。优点是工具提示不会激活标记（拖动工具提示平移地图，而不是拖动标记），您可以自动定位（标记的左侧或右侧，具体取决于标记的位置）视口）。

＆＃13;

＆＃13;

var map = L.map("map").setView([48.85, 2.35], 12);

var html = '<div class="tooltipText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>' +
  '<div class="tooltipButtons"><button>Button A</button><button>Button B</button></div>';

L.marker([48.835, 2.3], {
  draggable: true
}).addTo(map).bindTooltip(html, {
  permanent: true,
  className: 'customTooltip',
  opacity: 1,
  offset: [0, -60]
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<style>
  .customTooltip {
    /* Counter leaflet-tooltip styles */
    background-color: transparent;
    border: none;
    border-radius: 0;
    opacity: 1;
    padding: 0;
    pointer-events: inherit;
    box-shadow: none;
    white-space: normal;
    width: 250px;
  }
  
  .customTooltip:before {
    /* Counter leaflet-tooltip styles */
    content: none !important;
  }
  
  .tooltipText,
  .tooltipButtons button {
    background-color: rgba(60, 60, 60, .9);
    color: white;
    border-radius: 5px;
    font-weight: bold;
  }
  
  .tooltipText {
    padding: 1em;
  }
  
  .tooltipButtons button {
    border: none;
    margin-left: .5em;
    cursor: pointer;
    padding: .2em .5em;
  }
  
  .tooltipButtons button:hover {
    background-color: darkblue;
  }
  
  .tooltipButtons {
    text-align: right;
    margin-top: .5em;
  }
</style>

<div id="map" style="height: 200px"></div>

＆＃13;

＆＃13;

＆＃13;