每当在mapbox的地图中单击标记时,如何在地图外的div中显示数据?

时间:2019-07-08 09:11:14

标签: javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker

每当单击地图上的标记时,我都需要在地图外部的div中显示该标记的数据。

我正在尝试使用HTML Dom元素。

map.on('click', 'places', function (e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var title = e.features[0].properties.title;
            var description = e.features[0].properties.description;

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }


            var content = '<div><strong>' + feature.properties.title + '</strong>' +
                '<p>' + feature.properties.description + '</p></div>';

            info.innerHTML = content;

        });

这是我需要在表格中显示信息的地方。

 <div class="info" id="info" style="color: whitesmoke">


        </div>

这是地图div

<div id="map">

    </div>

1 个答案:

答案 0 :(得分:2)

替换此行:

info.innerHTML = content;

有这行:

document.getElementById('info').innerHTML = content;