Question

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

移动标记时，我无法缩放 15km radius（来自marker）
我在移动时无法画一条线（不是优先级）

在这里，我尝试了

请参阅jsfiddle，因为代码段不起作用

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

＆＃13;

// 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);

＆＃13;

<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>

＆＃13;

请提前帮助我!!!!!

Answer 1

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

fitBounds

简而言之：构建一个以您的标记为中心并且半径为15,000米的“虚拟”leaflet square given centre and square width，使用其Circle方法检索其边界并将其提供给地图的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);方法：

text

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

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

UITextView

更新了JSFiddle：setLatLng

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

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

1 个答案: