小编Iva*_*hez的帖子

Leaflet是否有离线地图图层？我不需要详细说明，但是基本几何就足够了。

我在 HTML 页面上有一张传单地图。当页面滚动以使地图的任何部分都在视口之外并且我单击缩放按钮时，地图会跳转以使其在视口中完全可见。如果整个地图不适合，那么地图的顶部将与视口的顶部对齐，而底部只是悬在末端。

这很烦人，因为用户刚刚按下的缩放按钮不再位于光标下，他们必须再次找到它。

我已经尝试了内置缩放栏和我使用的自定义缩放栏，map.setZoom()并且行为是一致的。但是，https: //leafletjs.com 上的示例地图没有这样做，所以我不知所措。

我的地图很简单：

var home = {center: L.LatLng(51.499725, -0.124695), zoom: 11};
var mymap = L.map('map').setView(home.center, home.zoom);

这个问题听起来与我所看到的相似，但比我的情况更复杂。无论如何，没有解决方案。

编辑：这是 html 和 CSS，但它不能更基本。

地图.html

    <div class="container mx-sm-3">
        <div class="row">
            <div class="col">
                <div id="map"></div>
            </div>
        </div>
    </div>

地图.css

#map {
    height: 570px;
    width: 700px;
}

我正在使用传单 1.0.0-rc.2+e02b5c9。我知道默认是渲染所有标记、折线......从经度 -180 到 180 作为这里的屏幕截图：

但是，我想将地图显示为我想在此时显示的经度（这是日本和美国之间的中海）：

但是您会看到所有标记都未在右侧呈现。即使，如果我设置

worldCopyJump: true

当我向右拖动时，所有标记都出现在右侧，但它们在左侧消失，反之亦然。实际上，我希望它们同时出现。

任何想法来解决这个问题？

有没有办法让一个形状从一条边穿过日期线子午线(180°经度)到Leaflet.js中出现在地图的另一侧？

我看过:

• http://leafletjs.com/reference.html#latlng-wrap
• https://github.com/Leaflet/Leaflet/issues/82

但我不确定我能做些什么来让它可靠地划过日期线......

先感谢您!

我有一个表单可以将一些文本与传单地图上的标记相关联：

<form action="map.php" method="POST">
 <section>
  <label>write some text here</label>
   <textarea id="text" rows="3" name="area"></textarea>
 </section>

 <input type="submit" value="show map" />
</form>

正如您在上面看到的，textarea 的内容被传递到页面 map.php，其中显示了一个地图。在地图上，会显示位置标记，并且弹出窗口包含通过 textarea（变量$text）发布的文本：

<?php
$text = htmlspecialchars($_POST["text"]);
?>

<center>
 <div id="map" class="embed-container"></div>
</center>

<script>
  var map = L.map('map').setView([46.13, 11.11], 9);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);
</script>
<script>
  var icon = L.icon({
        iconUrl: 'img/gps.png',
        iconSize: [25, 25],
        });
  var marker = L.marker(['<?=$latitude;?>', '<?=$longitude;?>'], {icon: icon}).addTo(map);
  marker.bindPopup('<?=$text;?>');
</script>

问题是，如果我在 textarea 中写入内容时按ENTER，则没有任何内容传递给弹出标记。我尝试过 …

我正在尝试绘制流程图(适用于新加坡).我有Entry(Lat,Long)和Exit(Lat,long).我试图在新加坡地图中映射从入口到出口的流量.

structure(list(token_id = c(1.12374e+19, 1.12374e+19, 1.81313e+19, 
1.85075e+19, 1.30752e+19, 1.30752e+19, 1.32828e+19, 1.70088e+19, 
1.70088e+19, 1.70088e+19, 1.05536e+19, 1.44818e+19, 1.44736e+19, 
1.44736e+19, 1.44736e+19, 1.44736e+19, 1.89909e+19, 1.15795e+19, 
1.15795e+19, 1.15795e+19, 1.70234e+19, 1.70234e+19, 1.44062e+19, 
1.21512e+19, 1.21512e+19, 1.95909e+19, 1.95909e+19, 1.50179e+19, 
1.50179e+19, 1.24174e+19, 1.36445e+19, 1.98549e+19, 1.92068e+19, 
1.18468e+19, 1.18468e+19, 1.92409e+19, 1.92409e+19, 1.21387e+19, 
1.9162e+19, 1.9162e+19, 1.40385e+19, 1.40385e+19, 1.32996e+19, 
1.32996e+19, 1.69103e+19, 1.69103e+19, 1.57387e+19, 1.40552e+19, 
1.40552e+19, 1.00302e+19), Entry_Station_Lat = c(1.31509, 1.33261, 
1.28425, 1.31812, 1.33858, 1.29287, 1.39692, 1.37773, 1.33858, 
1.33322, 1.28179, 1.30036, 1.43697, 1.39752, 1.27637, 1.39752, 
1.41747, 1.35733, 1.28405, 1.37773, 1.35898, 1.42948, 1.32774, 
1.42948, 1.349, …

我的网站上有一张传单地图,使用Google卫星图像作为基本地图.2018年6月11日之后,无法使用api密钥访问Google地图图块.目前可以使用以下javascript通过Leaflet JS访问切片.

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

如何在2018年6月11日之后加入我的api密钥以便能够继续访问Leaflet的地图图块？

我正在尝试根据每个标记详细信息中的各个属性使用很棒的标记更改图标颜色，但是它们都是红色的，而不是一些是红色的，有些是绿色的。

有人能在这里看到这个问题吗？是否可以有相同类型的不同颜色？

我已经添加了下面的示例，geojson 我在那里设置了图标颜色，但是所有图标都是红色的，你应该可以看到？

谢谢

	var map = L.map('map').setView([54.0, -3.4], 6);
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		maxZoom: 18,
		id: 'mapbox/streets-v11',
		accessToken: 'x'
	}).addTo(map);

    var geo_data = [
            {'type': 'Feature', 'properties': {'name': 'A', 'popupContent': 'A', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
                }, 'geometry': {'type': 'Point', 'coordinates': [
                        -2.2671,
                        57.139383
                    ]
                }
            },
            {'type': 'Feature', 'properties': {'name': 'B', 'popupContent': 'B', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
                }, 'geometry': {'type': 'Point', 'coordinates': [ …

我正试图在Leaflet地图上获得lat和long拖放标记.

但是,我经常遇到TypeError: event.latlng is undefined错误.

这是我的整个代码:

var map = L.map('map');

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
  maxZoom: 20,
  subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);

map.locate({
  setView: true, 
  maxZoom: 16, 
  watch:false, 
  timeout: 60000,
  enableHighAccuracy: true
});
var marker; 
var circles;

function onLocationFound(e) {
  var radius = e.accuracy / 2;

  if(map.hasLayer(circles) && map.hasLayer(marker)) {
    map.removeLayer(circles);
    map.removeLayer(marker);
  } 

  marker = new L.Marker(e.latlng, {draggable:true});
  circles = new L.circle(e.latlng, radius);
  circles.bindPopup("You are within " + radius + " meters from this point").openPopup();;

  map.addLayer(marker);
  map.addLayer(circles);

  marker.on('dragend', function(event) {
    var mylat = …

当试图在传单/ DT之间渲染带有串扰的html应用程序时,我收到以下错误:

Error in datatable(sd, extensions = "Scroller", style = "bootstrap", class = "compact",  : 'data' must be 2-dimensional (e.g. data frame or matrix)

数据框:

df2 <-   data.frame(
    structure(list(lat = c(-20.42, -20.62, -26, -17.97, -20.42, -19.68, 
    -11.7, -28.11, -28.74, -17.47, -21.44, -12.26, -18.54, -21, -20.7, 
    -15.94, -13.64, -17.83, -23.5, -22.63), long = c(181.62, 181.03, 
    184.1, 181.66, 181.96, 184.31, 166.1, 181.93, 181.74, 179.59, 
    180.69, 167, 182.11, 181.66, 169.92, 184.95, 165.96, 181.5, 179.78, 
    180.31), depth = c(562L, 650L, 42L, 626L, 649L, 195L, …