求教一个关于open layers的问题

[weixin_42860692]

我要实现的功能：用Ajax从后台取出数据（经纬度，文字信息等等），然后根据取到的经纬度在地图上标点，点击这个点可以弹出框，里面的内容为取到的数据，请问我这段代码要怎么改？js如下

<script>
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');
    var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
    }));
    closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };
	  
    var map = new ol.Map({
		layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        overlays: [overlay],
		target: 'map',
        view: new ol.View({
		  projection: 'EPSG:4326',
          center: [112.20, 30.33],
          zoom: 10
        })
    }); 

	getcoord();
	function getcoord() {
				$.ajax({
					type: "post",
					async: false,
					url: "http://192.168.181.130/singularity/public/index.php/admin/showdata/show",
					data: {},
					dataType: "json",
					success: function(result){
						if(result){
								 longitude=[],latitude=[],length=result.length;
								 for (var i = 0; i < result.length; i++) 
								 {
									 longitude.push(result[i].longitude);
									 latitude.push(result[i].latitude);
									 // alert(result.length);
									 // alert(longitude+"经度");
									 // alert(latitude+"纬度");
								 }
								 // alert(longitude+"经度");
								 // alert(latitude+"纬度");
						}
					},
					error: function(errmsg) {
						alert("错误提示"+errmsg);
						console.log(errmsg);
					}
				});
				// return latitude,longitude;
	}
	// $(function(){ 
		// 　　setInterval(getcoord,1000); 
	// }); 

	map.on('click',function(e){
        //在点击时获取像素区域
        var pixel = map.getEventPixel(e.originalEvent);
        map.forEachFeatureAtPixel(pixel,function(feature){
            //coodinate存放了点击时的坐标信息
            var coodinate = e.coordinate;
            //设置弹出框内容，可以HTML自定义
            content.innerHTML = 
						"<tr>"
							  + "<td width='60px' align='right'>坐标：</td>"
							  + "<td width='120px' align='left'><font color='#ff0000'>" + longitude[0] + "<br>" + latitude[0] + "</font></td>"
							  + "<td width='150px' height='180px' id='<strong>chartcontainer</strong>' rowspan='4'></td>"
							  + "</tr>"
							  + "<tr>"
							  + "<td width='60px' align='right'>上设备名称：</td>"
							  + "<td width='120px' align='left'><font color='#ff0000'>" +  + "</font></td>"
							  + "</tr>"
							  + "<tr>"
							  + "<td width='60px' align='right'>描述：</td>"
							  + "<td width='120px' align='left'><font color='#ff0000'>" +  + "</font></td>"
							  + "</tr>"
							  + "<tr>"
							  + "<td width='60px' align='right'>时间：</td>"
							  + "<td width='120px' align='left'><font color='#ff0000'>" +  + "</font></td>"
							  + "</tr>"
							  + "</tbody></table></div>";
            //设置overlay的显示位置
            overlay.setPosition(coodinate);
            //显示overlay
            map.addOverlay(overlay);
        });
    });
	
	var vectorSource = new ol.source.Vector({});
	for( var j=0 ; j<length ; j++ ) {
	// 创建图标特性
        var point = new ol.Feature({
            geometry: new ol.geom.Point([longitude[j], latitude[j]], "XY"),
            name: "my Icon",
        });
        // 将图标特性添加进矢量中
        vectorSource.addFeature(point);
	}

		//创建图标样式
	var iconStyle = new ol.style.Style({
		image: new ol.style.Circle({
				radius: 3,
				fill: new ol.style.Fill({
					color: 'red'
				}),
				stroke: new ol.style.Stroke({
					color: 'red',
					size: 1
				})
		})
	});
	  
	// 创建矢量层
	var vectorLayer = new ol.layer.Vector({
			source: vectorSource,
			style: iconStyle
	});
    // 添加进map层
    map.addLayer(vectorLayer);
	  
	// 鼠标移到标点出变成手指形状
	map.on('pointermove',function(e){
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        if(hit){
             map.getTargetElement().style.cursor = 'pointer';
        }
        else{
             map.getTargetElement().style.cursor = '';
        }
    });
   </script>

[hookee]

ajax跨域了？

[weixin_42860692]

引用 2 楼 hookee 的回复:

ajax跨域了？

没有，Ajax没问题，我现在需要把每个点和弹窗里面的内容对应起来，这个不会

[「已注销」]

 // 创建图标特性
        var point = new ol.Feature({
            geometry: new ol.geom.Point([longitude[j], latitude[j]], "XY"),
            name: "my Icon",
        });

name里面不就可以写你的数据吗？

 // 创建图标特性
        var point = new ol.Feature({
            geometry: new ol.geom.Point([longitude[j], latitude[j]], "XY"),
            name: [longitude[j], latitude[j]],
        });

[weixin_42860692]

引用 4 楼 u011301230 的回复:

 // 创建图标特性
        var point = new ol.Feature({
            geometry: new ol.geom.Point([longitude[j], latitude[j]], "XY"),
            name: "my Icon",
        });

name里面不就可以写你的数据吗？

 // 创建图标特性
        var point = new ol.Feature({
            geometry: new ol.geom.Point([longitude[j], latitude[j]], "XY"),
            name: [longitude[j], latitude[j]],
        });

可以，谢谢了

[weixin_42860692]

是不是不能用这样的方式啊