Question

我正在尝试在Leaflet地图中绘制circleMarker的hundres，我正在使用flask和foundation.js，相同的代码在使用bootstrap.js构建的不同app中工作

这是我的代码：

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40,-4], 6);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery  <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
        }).addTo(map);

    var geojsonMarkerOptions = {
    radius: 100,
    fillColor: "#FFF803",
    color: "#DDFF03",
    weight: 1,
    opacity: 0.8,
    fillOpacity: 0.8
    };

    {% for item in data['data'] %}        
    L.circleMarker([{{item[0]}},{{item[1]}}],geojsonMarkerOptions).addTo(map);
    {% endfor %} 

    var marker = L.marker([41.5, -0.09]).addTo(map);
    marker.bindPopup("I am a circle.");
    var circle = L.circle([51.508, -0.11], 500, {color: 'red',
                                                fillColor: '#f03',
                                                fillOpacity: 1
                                                }).addTo(map); 
</script>

在底部，我尝试了一个固定的标记，它出现并固定了圆形，但是，它不是base.js的问题吗？因为在以前的项目中，其他框架工作得很好。

Answer 1

我tried your code，将51.508替换为41.508（因此红色圆圈靠近标记）并只添加一个circleMarker。有用。所以问题不在代码中。

请检查您是否在leaflet.css的相同位置添加了leaflet.js。还要检查javascript控制台中没有错误（Firefox中的Ctrl + Shift + J）。检查来自{{item[0/1]}}的坐标是否格式正确（小数点分隔符是一个点，没有额外的符号）。尝试使用最新版本的Leaflet库，0.7.3。

Answer 2

Ilja，非常感谢。你是对的，用css将圆圈推到地图后面。在这种情况下，我也使用d3.js作为某些图表，一旦我摆脱了nvd3的css，圆圈出现了。

Answer 3

我遇到了同样的问题，结果证明它是nv.d3.css文件。我发现注释掉这些线会让你画一个圆圈：

display: block; 
width: 100%; 
height: 100%;'

我不知道这可能对您的网页产生什么副作用，但我认为主要问题是d3决定劫持您在网页上放置的任何svgs。

编辑：我的案例是圈子，但如果圈子和圆圈标记之间存在同样的问题我也不会感到惊讶。

编辑2：已经有一段时间了，但是有人只是喜欢这个，所以我觉得我应该告诉你，最后，这些并没有很好地结合在一起。我没有时间对它进行修补，因此我被迫删除了传单圈并传递了项目，并建议可能更容易插入Google地图。希望这有帮助。

Answer 4

这个问题是很久以前发布的。但愿我的回答对某人有所帮助。

当我们实例化 L.CircleMarker(...) 时，圆被创建，但不显示。就我而言，我注意到它等待窗口调整大小事件才能显示。所以只要在 L.CircleMarker(...).addTo(map) 之后触发那个事件，圆圈就会看起来像一个魅力。

用JS

 window.dispatchEvent(new Event('resize'));

使用 Jquery

$(window).trigger('resize');

传单圈圈玩家不会出现

4 个答案: