Question

我目前正在测试kendo ui的地图。通过这个示例https://demos.telerik.com/aspnet-mvc/map/bubble-layer，我能够创建一个加拿大的小示例，并在每个可以找到的省份中放置气泡Here，我想知道如何在气泡内设置一个小文本以对应于json的城市。

$("#map").kendoMap({
    center: [56.1304, -106.3468],
    minZoom: 3,
    zoom: 4,
    wraparound: false,
    layers: [{
        type: "tile",
        urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
    }, {
        type: "bubble",
        attribution: "Population data from Nordpil and UN Population Division.",
        style: {
            fill: {
                color: "#00f",
                opacity: 0.4
            },
            stroke: {
                width: 0
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "https://api.myjson.com/bins/jvcf0",
                    dataType: "json"
                }
            }
        },
        locationField: "Location",
        valueField: "Pop2010"
    }],

Answer 1

您可以将here所示的方法用于形状层：

shapeCreated: function(e) {
    // Calculate shape bounding box
    var bbox = e.shape.bbox();
    var center = bbox.center();

    // Create the label
    var labelText = e.shape.dataItem.City;
    var label = new kendo.drawing.Text(labelText);
    var labelCenter = label.bbox().center();

    // Position the label
    label.position([
      center.x - labelCenter.x,
      center.y - labelCenter.y
    ]);

    // Render the label on the layer surface
    e.layer.surface.draw(label);
}

https://jsfiddle.net/xjyr50on/

如何在地图中显示气泡文字

1 个答案: