Question

我尝试了这段代码，但问题仍然存在：

var customPopup = "Mozilla Toronto Offices...";

// specify popup options
var customOptions =
{
  'maxWidth': '500',
  'className' : 'custom'
}

// create marker object, pass custom icon as option,
// pass content and options to popup, add to map
L.marker([43.64701, -79.39425], {
  icon: firefoxIcon
}).bindPopup(customPopup,customOptions).addTo(map);

我做错了什么？

Answer 1

你只需要意识到你提到的BootLeaf示例应用程序使用Bootstrap的模态而不是Leaflet的弹出窗口。

因此，不是将Leaflet弹出窗口附加到标记（即L.marker().bindPopup()），而是准备一个占位符模式，将其填充到标记点击事件并显示模态，如示例应用程序中所示：

HTML

<div class="modal fade" id="featureModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title text-primary" id="feature-title"></h4>
      </div>
      <div class="modal-body" id="feature-info"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript

var myMarker = L.marker(latLng).addTo(map);

myMarker.on({
  click: function (e) {
    $("#feature-title").html(myMarkerTitle);
    $("#feature-info").html(myMarkerContent);
    $("#featureModal").modal("show");
  }
});

Answer 2

//  create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values 
    var map = L.map('map', {scrollWheelZoom:false}).setView([43.64701, -79.39425], 15);

    //  add base map tiles from OpenStreetMap and attribution info to 'map' div
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // create custom icon
    var firefoxIcon = L.icon({
        iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 95], // size of the icon
        popupAnchor: [0,-15]
        });

    // create popup contents
    var customPopup = "Mozilla Toronto Offices<br/><img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>";
    
    // specify popup options 
    var customOptions =
        {
        'maxWidth': '500',
        'className' : 'custom'
        }
    
    // create marker object, pass custom icon as option, pass content and options to popup, add to map
    L.marker([43.64701, -79.39425], {icon: firefoxIcon}).bindPopup(customPopup,customOptions).addTo(map);

<html>
 
<head>
 
<!-- reference to Leaflet CSS -->
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />
 
<!-- reference to Leaflet JavaScript -->
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
 
<!-- set width and height styles for map -->
<style>
#map {
    width: 960px;
    height:500px;
}

/* css to customize Leaflet default styles  */
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
    background: #e93434;
    color: #ffffff;
}
</style>

</head>

<body>

    <!-- place holder for map -->
    <div id="map"></div>

</body>

</html>

来源：http://bl.ocks.org/uafrazier/d589caa322f1b1e7c651

如何在BootLeaf模板中显示Leaflet标记的弹出窗口？

2 个答案: