Javascript 要在OSM地图的信息窗口中显示POI信息，请右键单击。？

我想在OSM地图中显示POI信息窗口。我使用了开放层ol.js。我声明了Poi信息数组。要获取Poi信息窗口以及功能名称，以更正触发了哪个功能用户单击事件以及触发了i用户单击事件的哪个数据索引，基于此，我将获取Poi信息表单数组并显示在信息窗口中。我怎么能得到那个

 <div style="width:100%; z-index:0;" id="map_canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>

    var _poiData = [{"cityCode": "PHX","id": 474,"latitude": 33.288638,"longitude": -111.657894,"poiName": "Phoenix Mesa Gateway Airp","userID": null}]

    var map=null;

$(document).ready(function () {


            map = new ol.Map({
                target: document.getElementById('map_canvas'),
                loadTilesWhileAnimating: true,
                view: new ol.View(),
                layers: [
                  new ol.layer.Tile({
                      source: new ol.source.OSM()
                  }),
                ],
                loadTilesWhileAnimating: true,
                view: new ol.View({
                    center: [mapLng,mapLat],
                    zoom: 3
                })
            });

         showPointOfInterest();

        });

 function showPointOfInterest(){
            for (var i = 0; i < _poiData.length - 1; i++) {

                var style = new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.6, -0.4],
                        anchorXUnits: "fraction",
                        anchorYUnits: "fraction",
                        src: "/Images/ic_poi.png"
                    }),
                    text: new ol.style.Text({
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#000'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 3
                        })

                    })
                });

                vectorLayer = new ol.layer.Vector({
                    source: new ol.source.Vector(),
                    style: function (feature) {
                        style.getText().setText(feature.get('label'));
                        return style;
                    }
                });
                add_map_point(_poiData[i].longitude, _poiData[i].latitude, _poiData[i].poiName,'poi');
                map.addLayer(vectorLayer);

                map.getViewport().addEventListener('contextmenu', function (evt,i) {
                    evt.preventDefault();
                    openContextMenu(evt.x, evt.y);
                });

            }

            map.on('click', function (evt) {
                $('.contextMenu').hide();
            });
        }

var_poiData=[{“城市代码”：“PHX”，“id”：474，“纬度”：33.288638，“经度”：-111.657894，“poiName”：“凤凰城梅萨网关机场”，“用户id”：null}]
var-map=null；
$（文档）.ready（函数（）{
map=新ol.map({
目标：document.getElementById（'map_canvas'），
图像显示时的加载时间：真，
视图：新建ol.view（），
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
],
图像显示时的加载时间：真，
视图：新ol.view({
中心：[mapLng，mapLat]，
缩放：3
})
});
显示兴趣点（）；
});
函数showPointOfInterest（）{
对于（变量i=0；i<\u poiData.length-1；i++）{
var style=新的ol.style.style({
图片：新ol.style.Icon({
锚定：[0.6，-0.4]，
主播：“分数”，
固定单位：“分数”，
src:“/Images/ic_poi.png”
}),
文本：新的ol.style.text({
字体：“12px Calibri，无衬线”，
填充：新的ol.style.fill({
颜色：“#000”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：3
})
})
});
vectorLayer=新ol.layer.Vector({
source:new ol.source.Vector（），
风格：功能（特征）{
style.getText（）.setText（feature.get（'label'）；
回归风格；
}
});
添加地图点（poiData[i]。经度，poiData[i]。纬度，poiData[i]。poiName，'poi'）；
map.addLayer（矢量层）；
map.getViewport（）.addEventListener（'contextmenu'，函数（evt，i）{
evt.preventDefault（）；
openContextMenu（evt.x，evt.y）；
});
}
映射打开（'click'，函数（evt）{
$（'.contextMenu'）.hide（）；
});
}