Question

JavaScript

有50个点及点对应的属性，请问如何把这50个点显示在Web地图上？且当点击图上的点时，弹出对应信息框，信息框里有对应的文字和图片。

Answer 1

您好，您可以遍历输出点图层，用marker添加标记，并且添加click事件，编辑popup里面的内容即可，您可以参考以下我写的这段代码，传入的queryEventArgs是查询后返回的点图层数组：

function processCompleted(queryEventArgs){ 
					 var result = queryEventArgs.result;
						if (result && result.totalCount>0) {
							  var resultTable="";
							  for (var i =0;i<result.recordsets.length;i++) {
									if (result.recordsets[i].features) {
										var arrFields = new Array();
										var intFieldCount=result.recordsets[i].fields.length;
										resultTable +="<table id='datatable' align='left' style='position:relative;width:300px;height:300px;overflow-y:auto;' border='1'>";
										var strTableHead="";
											for(var n=0;n<intFieldCount;n++)
											{   var fieldName=result.recordsets[i].fields[n];
												strTableHead +="<td>";
												strTableHead +=fieldName;
												arrFields.push(fieldName);
											}
											strTableHead +="<td>";
											strTableHead +="<input type='submit' value='refresh' >";
										    resultTable +="<tr>"+strTableHead+"</tr>";
											for(var k=0;k<result.recordsets[i].features.length;k++)
											{  var point = result.recordsets[i].features[k].geometry,
											   size = new SuperMap.Size(22, 20),
											   offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
											   icon2 = new SuperMap.Icon("../theme/images/marker-gold.png", size, offset);
											   var feature=new SuperMap.Feature.Vector();
											   feature=result.recordsets[i].features[k]; 
											   var marker=new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon2);
											   marker.chao=feature;
											   markerLayerSQL.addMarker(marker);
                                               marker.events.on({//注册点击事件的处理方法
                                                                  "click":openInfoWin,
                                                                  "mouseout": setTimeout111,
                                                                  "scope": marker
                                                                 });
											   resultTable += "<tr>";
												for(var j=0;j<intFieldCount;j++){
													resultTable +="<td>";
													resultTable += feature.attributes[arrFields[j]];
													if (j%2==1){
													  resultTable +="<td>";
													  resultTable +="<input type='checkbox' >";
													}
													resultTable +="</td>";
													
												}
												resultTable +="</tr>";
											}
									}
							  }
						}
						else{ resultTable="<p>无查询结果</p>";} 
						document.getElementById("queryResultPanel").innerHTML=resultTable;
						
				    }
                    var infowin = null;
		           function	openInfoWin() {
		           	      closeInfoWin()
                                 //关闭之前打开的窗口。
                          var marker = this;
                          var lonlat = marker.lonlat;
                          var rainObj=marker.chao;
                          var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
                              contentHTML += "<div>"+rainObj.attributes.name+ "</div>"
                            var size = new SuperMap.Size(0, 33);
                            var offset = new SuperMap.Pixel(0, -size.h);
                            var icon2 = new SuperMap.Icon("../theme/images/marker-gold.png", size, offset);
                            var popup = new SuperMap.Popup.FramedCloud("popwin",
                                      new SuperMap.LonLat(lonlat.lon,lonlat.lat),
                                              null,
                                              contentHTML,
                                              icon2,
                                              false);
 
                            infowin = popup;
                            map.addPopup(popup);
		           }

Answer 2

您好！首先，将这个50个点实例化成点要素，渲染到矢量图层上，然后用selectFeature控件实现点击事件，回调函数里面写弹窗事件，弹窗的内容就是获取点要素的属性！