Question

我以前使用谷歌地图，但他们的图书馆给了我CSP 'unsafe-eval' errors。我想保持安全，所以我开始关注开放地图。

以下是我想要移植到开放地图的功能的截屏视频 - http://screencast.com/t/5f5LeAesRr。在地图上点击我想要一个可调整半径的圆圈。使用传单我能够在地图上显示一个圆圈，但它不可拖动，并且无法通过拖动来调整半径，如GMaps截屏视频中所示。任何帮助表示赞赏。

Answer 1

使用Leaflet和此Circle Editor plugin

计算出来

以下是使用https://github.com/kartena/Leaflet.EditableHandlers

中的依赖关系的小例子

<!DOCTYPE html>
<html>
<head>
    <title>maps</title>
    <style type="text/css">
        #map { width: 481px;height: 300px; }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>

    <!-- Plugin dependecies -->
    <link rel="stylesheet" href="../lib/leaflet-0.6.4/leaflet.css" />
    <link rel="stylesheet" href="../css/marker-extend.css" />

    <script src="../lib/leaflet-0.6.4/leaflet-src.js"></script>
    <script src="../src/L.CircleEditor.js" ></script>
    <!-- End plugin dependecies -->

</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <br>
    <input id="lat" placeholder="lat" type="number"/>
    <input id="lng" placeholder="lng" type="number"/>
    <input id="radius" placeholder="radius" type="number"/>

    <script>

        var map = L.map('map').setView([40, -98.50], 4);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            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>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);




        var updateValues = function(circle) {
            console.log(circle._latlng.lat, circle._latlng.lng ,circle._mRadius);
            $('#lat').val(circle._latlng.lat);
            $('#lng').val(circle._latlng.lng);
            $('#radius').val(circle._mRadius);

        }

        // Set only one circle
        var circleSet = false;

        var onMapClick = function(e) {
            if (!circleSet) {
                var circleLocation = new L.LatLng(e.latlng.lat, e.latlng.lng),
                circleOptions = {
                    color: '#0159E5', 
                    fillColor: '#A8C5E4', 
                    fillOpacity: 0.7,
                    extendedIconClass : 'extend-icon'
                };

                var circle = new L.CircleEditor(circleLocation, 786500, circleOptions);
                map.addLayer(circle);
                circleSet = true;
                updateValues(circle);
                circle.on('edit', function(){
                    updateValues(this);
                });
            }
        }

        map.on('click', onMapClick);

    </script>

    <!-- From https://github.com/kartena/Leaflet.EditableHandlers -->
</body>
</html>

打开可绘制半径可调整的可拖动圆

1 个答案: