Question

我有带标记的传单地图。在侧面我有一个表格，我可以在提交表格时指定我想在地图上显示的方框的范围（以米为单位）。

我试图以角度复制此处报告的示例http://leafletjs.com/reference.html#rectangle，但它不起作用。

// define rectangle geographical bounds
var extent = 100; // metres
var bounds = [
    [markerLat-extent/2, markerLon-extent/2], 
    [markerLat+extent/2, markerLon+extent/2]
];

var map = leafletData.getMap('mymap');

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

我相信我犯了一些错误。首先，边界中的纬度/经度不应与以米表示的范围混合。其次，我得到“t.addLayer不是函数”错误。

这是我在Angular控制器中为了启动并运行地图而做的事情：

angular.extend($scope, {
    center : {
        lat: latitudeUK,
        lng: longitudeUK,
        zoom: 5
    },
    defaults: {
        scrollWheelZoom: false
    },
    tiles: {
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        options: {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    },
    markers: {
        pin: {
            lat: startMarkerLatitude,
            lng: startMarkerLongitude,
            message: "Drag me to change center of the rectangle",
                focus: true,
                draggable: true
            }
        }
    }
);

$scope.controls = {
    scale: {
        position: 'topleft',
        metric: true
    }
};

在html页面中，我有这个简单的电话：

<leaflet id="mymap" center="center" controls="controls" tiles="tiles" markers="markers"></leaflet>

我错过了什么？谢谢你的建议！

- 更新 -

我设法将形状添加到地图中。在圆圈的情况下，我可以执行以下操作：

leafletData.getMap('mymap').then(function(map) {

    // Circle
    var circleLocation = new L.LatLng(markerLat, markerLon);
    var circleOptions = {
        color: 'blue'
    };
    var shape = new L.Circle(circleLocation, extent, circleOptions);
    map.addLayer(newShape);
});

我还不能做的是添加一个矩形，其中心和边长正确。看起来问题是在计算矩形的边界框时。

我将此问题作为独立的here发布，因此检查该问题可能也很有用。

angular-leaflet-directive在标记周围添加矩形

0 个答案: