問題描述

所以我在傳單中有一個(gè) geojson 圖層，我可以將 geojson 對(duì)象添加到該圖層以顯示在生成的地圖上.

So I have a geojson layer in leaflet, and I can add geojson objects to this layer for display on the resulting map.

現(xiàn)在我想添加一個(gè)文本標(biāo)簽以顯示在對(duì)象附近.

Now I'd like to add a text label to display near the object.

本示例展示了使用自定義 L.control() 對(duì)象在地圖上顯示附加信息.這似乎接近我想做的事情.

This example shows use of a custom L.control() object to display additional info on the map. Which seems close to what I want to do.

鑒于此示例，我想在每個(gè)狀態(tài)上添加狀態(tài)初始文本標(biāo)簽(即TX"、FL").L.control() 可以用來做這個(gè)嗎，還是有別的方法?

Given this example, I'd like to add State initial text labels (i.e. "TX", "FL") positioned over each state. Can L.control() be used to do this, or is there another way?

http://leaflet.cloudmade.com/examples/choropleth.html

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

推薦答案

我最近也在找同樣的問題，昨天剛剛根據(jù)google群里的帖子實(shí)現(xiàn)了.https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

I was looking for the same question recently and just implemented it yesterday based on a posting in the google group. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

感謝 Adrian 提供原始代碼示例.

Thanks to Adrian for the original code sample.

解決辦法如下:

擴(kuò)展如下類:

<script>

    L.LabelOverlay = L.Class.extend({
        initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
            this._latlng = latLng;
            this._label = label;
            L.Util.setOptions(this, options);
        },
        options: {
            offset: new L.Point(0, 2)
        },
        onAdd: function(map) {
            this._map = map;
            if (!this._container) {
                this._initLayout();
            }
            map.getPanes().overlayPane.appendChild(this._container);
            this._container.innerHTML = this._label;
            map.on('viewreset', this._reset, this);
            this._reset();
        },
        onRemove: function(map) {
            map.getPanes().overlayPane.removeChild(this._container);
            map.off('viewreset', this._reset, this);
        },
        _reset: function() {
            var pos = this._map.latLngToLayerPoint(this._latlng);
            var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
            L.DomUtil.setPosition(this._container, op);
        },
        _initLayout: function() {
            this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
        }
    });   

</script>

另外添加這個(gè)css:

<style>
    .leaflet-popup-close-button {
        display:none;
    }

    .leaflet-label-overlay {
        line-height:0px;
        margin-top: 9px;
        position:absolute;
    }
</style>

然后顯示文本標(biāo)簽如下:

And then display the text labels as below:

<script>
    var map = L.map('map').setView([51.898712, 6.7307100000001], 4);

    // add markers
    // ...

    // add text labels:
    var labelLocation = new L.LatLng(51.329219337279405, 10.454119349999928);
    var labelTitle = new L.LabelOverlay(labelLocation, '<b>GERMANY</b>');
    map.addLayer(labelTitle);


    var labelLocation2 = new L.LatLng(47.71329162782909, 13.34573480000006);
    var labelTitle2 = new L.LabelOverlay(labelLocation2, '<b>AUSTRIA</b>');
    map.addLayer(labelTitle2);

    // In order to prevent the text labels to "jump" when zooming in and out,
    // in Google Chrome, I added this event handler:

    map.on('movestart', function () {
        map.removeLayer(labelTitle);
        map.removeLayer(labelTitle2);
    });
    map.on('moveend', function () {
        map.addLayer(labelTitle);
        map.addLayer(labelTitle2);
    });
</script>

結(jié)果:

這篇關(guān)于如何將要在地圖上顯示的文本添加到傳單中的 geojson 對(duì)象的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！