标签: leaflet

我正在尝试自定义缩放控件(+/-),因此它应该像Google地图一样显示在右侧(https://www.google.com/maps/)

我试图添加,float:right;但它没有用.

从CSS文件:

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
  }
.leaflet-control-zoom-out {
  font-size: 20px;
  }

.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
  }
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
  }

http://jsfiddle.net/hsy7v/1/

我有一个平移和缩放的传单地图.如何动态获取地图边缘的纬度/长度(放大/缩小+平移后)？

我有以下反应类,它通过浏览器获取地理位置.

我正在绘制传单地图.我想将地理定位作为setView的输入,以便地图"缩放"到客户端浏览器位置的区域.

这是反应类:

    import React from 'react';
    import L from 'leaflet';
    import countries from './countries.js'; 

    var Worldmap = React.createClass({

        render: function() {

            let geolocation = [];

            navigator.geolocation.getCurrentPosition(function(position) {
                let lat = position.coords.latitude;
                let lon = position.coords.longitude;
                geolocation.push(lat, lon);
                locationCode()
            });

            function locationCode() {
                if(geolocation.length <= 0)
                    geolocation.push(0, 0);
            }


            let map = L.map('leafletmap').setView(geolocation, 3);

            L.geoJSON(countries, {
                style: function(feature) {
                    return {
                        fillColor: "#FFBB78",
                        fillOpacity: 0.6,
                        stroke: true,
                        color: "black",
                        weight: 2
                    };
                }
            }).bindPopup(function(layer) {
                return layer.feature.properties.name;
            }).addTo(map);

            return ( …

我有一个传单地图,显示从GeoJSON渲染的公共艺术作品的点.在地图旁边,我创建了一个来自相同GeoJSON数据的片段列表,并且希望能够从地图外部的列表中单击某个项目,并在地图上显示相关标记的弹出窗口.

如何通过点击事件将项目列表链接到各自的标记？

我的map.js文件如下所示:

var map;
var pointsLayer;

$(document).ready(function () {
    map = new L.Map('mapContainer');
    var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
    var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
    var tileLayer = new L.TileLayer(url, {
        attribution: copyright
    });
    var startPosition = new L.LatLng(41.883333, - 87.633333);
    map.on('load', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    });
    map.setView(startPosition, 13).addLayer(tileLayer);
    map.on('moveend', function (e) {
        requestUpdatedPoints(e.target.getBounds())
    })
});

function requestUpdatedPoints(bounds) {
    $.ajax({
        type: 'GET',
        url: '/SeeAll',
        dataType: 'json',
        data: JSON.stringify(bounds),
        contentType: 'application/json; …

我正在使用https://github.com/Leaflet/Leaflet.draw插件,我试图找出如何检索已编辑图层的图层类型.

在draw:created事件上,我有layer和layerType,但是在draw:edited(保存所有编辑时触发)我得到一个已编辑的图层列表.

该抽奖:创建活动

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    if (type === 'marker') {
        // Do marker specific actions
    }

    // Do whatever else you need to. (save to db, add to map etc)
    map.addLayer(layer);
});

该抽奖:编辑事件

map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        //do stuff, but I can't check which type I'm working with
        // the …

所以我用leafet.js制作这个应用程序.这个应用程序要求我必须手动将网格绘制到屏幕上,我已经注意了一个draw_grid()将一堆多边形绘制到屏幕上的功能.

我有这个函数,我打电话来触发传单地图的更改. zoom- 缩放整数,size是一个像{x:1,y:1}控制绘制到地图上的瓷砖大小的字典.(他们需要改变,因为在下面绘制瓷砖的单位是地图上的纬度,长点.

function changeZoom(zoom,size){
    map.setZoom(zoom); 
    setSize(size);   
    setTimeout(drawGrid,500)s;

}

我必须使用setTimeout的原因是因为传单ignores任何绘图命令到地图上(我正在做一个图层),直到地图完成动画.

如何异步执行此操作？

我想用Leaflet API构建Web应用程序.首先,我的用户使用IP进行地理定位,然后如果他接受我尝试使用HTML5地理位置更新他的位置(准确性更好).

我的问题是标记位置没有在地图上更新,下面的代码失败,没有错误.我从传单文档中尝试了数百种不同的语法和方法来更新标记位置(即.setLatLng),但我没有成功.我想了解我的代码有什么问题.

这样做可以解决我的问题:

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    marker.setLatLng(newLatLng); 

旧代码是:

//initial IP based geolocation

var lat = google.loader.ClientLocation.latitude;
var lng = google.loader.ClientLocation.longitude;

//place marker on the map

var marker = L.marker([lat,lng]).addTo(map);

//start HTML5 geolocation 

map.locate({setView: true, maxZoom: 16});

function onLocationFound(e) {

    var marker = L.marker([e.latlng.lat,e.latlng.lng]).update(marker);
    alert ('New latitude is ' + e.latlng.lat)
}

map.on('locationfound', onLocationFound);

我正在使用LeafletJS将地图组件添加到我的应用程序中.除了地图的本地化,一切都很好,花花公子.一些国家名称以当地语言显示(我假设).

有没有办法用英文显示国家/地区名称？

这是我使用的当前代码

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

我在我的项目中使用带有openstreetmap的传单js.
我在地图中的同一个地方有多个圈标记.
我想在圈标记中存储一些Id,以便我可以识别单击circlemarker时应该查看哪些数据.

我的圈子是

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map); 

在这里,我将标题用于其他目的,这就是我无法使用它的原因.
任何人都可以告诉我一些方法来做到这一点.

对于熟悉Leaflet的人,你知道一种动态改变多边形颜色的方法吗？例如,采用如下定义的圆:

window.circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#ffffff',
    fillOpacity: 0.5
}).addTo(map);

然后,在用户点击某个界面上某个按钮后(例如),我想改变圆圈的颜色,如下所示:

window.circle.options.fillColor = "#dddddd";

代码更改window.circle.options.fillColor的值,但更改不会通过更改地图上多边形的颜色来反映.我已经四处寻找但没找到任何东西.有任何想法吗？

谢谢.