Question

使用选择器更改标记的圆半径时出现问题。我试图通过改变jquery来实现它但它不起作用。我希望jquery函数由选择器触发，获取它的值，然后更改标记的圆的半径。
你能告诉我错误在哪里吗？

这是选择器：

<div id="map"></div>
<form>
    <select id="distance-selector" name="distance">
        <option value="">Select distance:</option>
        <option value="1">500m</option>
        <option value="2">1km</option>
        <option value="3">5km</option>
        <option value="4">10km</option>
        <option value="5">50km</option>
    </select>
</form>

这是我的传单地图的javascript / jquery代码：

$(document).ready(function () {
    var mymap = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=xxx', {
        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>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'xxx'
    }).addTo(mymap);

    var marker;
    var circle;
    var all;
    mymap.on('click', function (e) {
        if (all) {
            mymap.removeLayer(all);
        }
        marker = new L.Marker(e.latlng, { draggable: true });
        circle = new L.circle(e.latlng, { radius: 500 });
        var circlePos = e.latlng;
        $('distance-selector').on('change', function () {
            if (circle) {
                mymap.removeLayer(circle);
            }
            if (this.value == "") {
                circle = new L.circle(circlePos, { radius: 500 });
            }
            if (this.value == "1") {
                circle = new L.circle(circlePos, { radius: 500 });
            }
            if (this.value == "2") {
                circle = new L.circle(circlePos, { radius: 1000 });
            }
            if (this.value == "3") {
                circle = new L.circle(circlePos, { radius: 5000 });
            }
            if (this.value == "4") {
                circle = new L.circle(circlePos, { radius: 10000 });
            }
            if (this.value == "5") {
                circle = new L.circle(circlePos, { radius: 50000 });
            }
            all = L.layerGroup([marker, circle]);
            mymap.addLayer(all);
        });
        marker.on('dragend', function (e) {
            if (circle) {
                mymap.removeLayer(circle);
            }
            circle = new L.circle(e.target.getLatLng(), { radius: 500 });
            all = L.layerGroup([marker, circle]);
            mymap.addLayer(all);
        });

        all = L.layerGroup([marker, circle]);
        mymap.addLayer(all);
    });
})

Answer 1

狂野猜测：$('#distance-selector')错过了#？

使用jquery和selector选择器更改圆弧半径

1 个答案: