如何放大距离标记15公里半径范围内的区域

Question

我遇到了 leaflet map 的问题。他们是

1. 移动标记时我无法缩放 15km radius（来自marker）

2. 移动时无法画线（不是优先事项）

这是我尝试过的

请参考 jsfiddle，因为 sn-p 不起作用

jsfiddle: http://jsfiddle.net/eabangalore/x4gokvoa/8/

// Create the map
var map = L.map('map').setView([-31.4, -64.183], 12);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

// add a marker in the given location
var lat = -31.4;
var lng = -64.183;
var marker = L.marker([lat, lng]).addTo(map);

// add a layer and add points
var myLayer = L.geoJson().addTo(map);

// geojsonFeature
var geojsonFeature = {
    "type": "Feature",
        "properties": {
        "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where the Rockies play!"
    },
        "geometry": {
        "type": "Point",
            "coordinates": [-104.99404, 39.75621]
    }
};

// put the marker
setTimeout(function () {
    myLayer.addData(geojsonFeature);
}, 1000);

// update the marker
setTimeout(function () {
    // clear layer
    myLayer.clearLayers(); // inherited from LayerGroup
    //myLayer.addData(geojsonFeature);
}, 3000);

// put the marker
setTimeout(function () {
    myLayer.addData(geojsonFeature);
}, 5000);

// just fooling around
setInterval(function () {
    lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
    lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
    marker.setLatLng([lat, lng]).update();
}, 200);

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

请帮我提前谢谢！！！！！！

Answer 1

如果您想让地图“缩放”（实际上是 fitBounds）到您的标记位置并显示其周围 15 公里半径区域，您可以简单地使用此答案的变体：

leaflet square given centre and square width

简而言之：构建一个以 Marker 为中心、半径为 15,000 米的“虚拟”Circle，使用其 getBounds 方法检索其边界并将其提供给地图的 fitBounds 方法：

var marker = L.marker(myLatLng).addTo(map);
var radius = 15000; // in meters.
var circle = L.circle(myLatLng, radius).addTo(map);

map.fitBounds(circle.getBounds());

注意：您不必将圆圈添加到地图中，即使未显示它也可以使用。

现在，如果您希望在更改标记位置时发生这种情况，则只需在每次移动时重复该过程。就像您重复使用 Marker 一样，您也可以重复使用虚拟 Circle，因为它具有相同的 setLatLng 方法：

setInterval(function() {
  lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
  lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
  var newLatLng = [lat, lng];
  marker.setLatLng(newLatLng).update();
  circle.setLatLng(newLatLng);
  map.fitBounds(circle.getBounds());
}, 200);

更新的 JSFiddle：https://jsfiddle.net/x4gokvoa/9/

注意：将您的 JSFiddle 更新为 Leaflet 版本 0.7.7。您应该尝试更新到版本 1+。当前版本是 1.3.1