标签: leaflet

如果我自己链接脚本如下:

<script src="dist/js/osm/leaflet.js" type="text/javascript"></script>

一切正常.但是只要我想像这样动态加载我的脚本:

$.ajax({
    type: "GET",
    url: "dist/js/osm/leaflet.js",
    dataType: "script",
    async: false
});

地图将显示但是应显示的所有标记都会显示出来.你可以看到我也试过了

async: false

但那不会解决问题.

注意:我还加载了我自己编写的第二个脚本,但在动态加载时效果非常好.唯一不起作用的是向显示的地图添加标记,正如我提到的那样.

请提前帮助我.

我有一个函数可以创建多边形线并将折线添加到地图中

        function makeRoute(e)
    {
        if(pointsSelection.length > 0)
        {
            pointsSelection.push(e.target.getLatLng());
            var firstpolyline = new L.Polyline(pointsSelection, {
            color: 'blue',
            weight: 5,
            smoothFactor: 1
            });

            firstpolyline.addTo(map);

            pointsArrayCollection.push(pointsSelection);
            polyArrayCollection.push(firstpolyline);

            selection = [];
            pointsSelection = [];
        }
        else
        {
            alert("Please select more than one point");
        }
    }

我的问题是它每次都添加相同颜色的线条.

我想每次都添加不同颜色的多边形线.

那么如何动态改变折线的颜色呢？

根据主题,如何检查标记是否打开弹出窗口？

例如.

var m = new L.marker([2,1]).addTo(map).bindPopup('test');

点击标记显然会打开弹出窗口.

有没有任何功能,如:

if(m.popupOpen() == true) {
    // do somehting
}

我尝试过以下方法:

m.on('click', function(e) {
    if(m._map.hasLayer(m._popup)) {
        // Do something
    }
}

但它非常脆弱.在Chrome上,它将在Android浏览器上运行,如果在第二次点击时触发,那么它就不是真的可靠了.

这样做有什么标准方法吗？

谢谢

我有一个包含50个项目的列表:

var mylocations = [{'id':'A', 'loc':[-21,2]},...,];

如何在传单或JavaScript中最有效地使其成为如果我接受特定位置的输入[<longitude>,<latitude>],半径(例如50英里)......我可以获得"mylocations"该圈内的所有内容吗？

使用外部库很好.

我需要使用leaflet.js将地图添加到我的网站。该站点具有一个管理视图，管理员可以在其中添加标记，并向每个标记添加描述和图像。

我使用了leaflet.draw插件，并在创建事件上尝试更新event.layer.toGeoJSON()用来添加一些属性（例如图像和文本）的GeoJSON对象，但是没有运气。

谁可以帮我这个事？

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

map = new L.Map('map', {
        layers: [osm],
        center: new L.LatLng(31.9500, 35.9333),
        zoom: 15
    }),
    drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
}));

map.on('draw:created', function(event) {
    var layer = event.layer;
    var json = event.layer.toGeoJSON();
    json.properties.desc = null;
    json.properties.image = null;
    drawnItems.addLayer(L.GeoJSON.geometryToLayer(json));
    addPopup(layer);
});

function addPopup(layer) {
    var content = '<input id="markerDesc" type="text"/ onblur="saveData(layer);">';
    layer.bindPopup(content).openPopup(); …

我尝试像这样重写boxzoom事件，

map.on('boxzoomend', function(e) {
    console.log('end')
})

但是，boxzoom仍会缩放，我不知道如何停止它，仅在控制台中打印文本。我希望将boxzoom重写为以下内容

1. 停止缩放
2. 在控制台中打印文本

您能否提供重写事件的正确方法？谢谢。

我想问问是否有可能悬停未点击传单地图中的标记

这是我的代码

leaflet.js

var map = L.map( 'map', {
  center: [20.0, 5.0],
  maxZoom: 16,
  minZoom: 2,
  zoom: 2
})

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

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' )

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
})

这是在传单地图中显示标记和数据的地方

var markers = [
["<b style='font-size:15pt;'> ROXAS CITY CHAPTER </b> <br> <i style='font-size:12pt;'> …

我注意到Leaflet已经转向使用ES6模块和汇总.

http://leafletjs.com/2017/06/27/leaflet-1.1.0.html

鉴于此,我将尝试将LeafLet和各种插件以及我的应用程序捆绑到一个文件中.

我使用传单站点中最简单的教程作为测试用例.

我遇到的问题是,当我创建捆绑包时,会生成以下错误:

??   The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
node_modules/leaflet/dist/leaflet-src.js (9:2)
 7:   typeof define === 'function' && define.amd ? define(['exports'], factory) :
 8:   (factory((global.L = global.L || {})));
 9: }(this, (function (exports) { 'use strict';

对于我的测试,index.js文件是:

import 'leaflet';

function leafletTest() {

        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                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>, ' …

我正在使用几个L.markerClusterGroup({})，以便可以在“图层控件”中进行切换。

但是群集彼此隐藏。

我希望能够获得两个群集的总数。

我想念什么？

我想创建一个传单地图，在同一传单图例中同时包含圆形和正方形。

到目前为止，我已经使用了上一篇文章中的建议，并在闪亮的UI代码中添加了以下代码。

   tags$style(type = "text/css", "html, body   {width:100%;height:100%}",
                       ".leaflet .legend i{
  position: 'topleft';
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  }
")

这样，虽然图例中只有圆圈，但我想使用3种图例：1）实心圆，2）空圆圈（仅边框）和3）实心正方形。

如何使用R的传单制作这样的图例？