ArcGIS實現打點彈窗

引用的資源：

<link rel="stylesheet" type="text/css"	href="app/templates/manage/arcgis319/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"	href="app/templates/manage/arcgis319/esri/css/esri.css" />
<script type="text/javascript"	src="app/templates/manage/arcgis319/init.js"></script>

初始化地圖：

var map,g;
require([
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/map",
"dojo/on",
"esri/graphic",
"esri/geometry/Point",
"dojo/domReady!"
], function(
		ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,SimpleMarkerSymbol, Map, on,Graphic,Point
) {
	var longitude =114.29055;
	var latitude =36.1822;
	$.ajax({
		url:"${basePath}city/getCityCoordinateByUserName",
		dataType:"json",
		success:function(result){
			longitude = result.city.longitude;
			latitude = result.city.latitude;
		},
		error:function(data){
			keyflag=false;
			$.messager.alert("提示", "加載地圖失敗", "info",function(){
			keyflag=true;
			});
		}
	})
	  map = new Map("map",{
	    //basemap: "osm",
	    center: [longitude, latitude],
	    zoom: 10,
	    logo:false
	  });
});

具體例子：根據查詢條件篩選符合條件的點並顯示在地圖上：

//查詢按鈕功能
function queryFuc() {
	map.graphics.clear();
	if(clusterLayer!=undefined){
		map.removeLayer(clusterLayer);
	}
	$.ajax({
		url:'gis/tt',
		data:{month:$('#search_date').val(),city:$('#cityName').combobox('getValue')},
		success : function(data) {
			var obj= $.parseJSON(data);
			if(obj.length<1){
				alert("當前條件下未查詢到數據");
				return false;
			}
			 require([
		        "esri/layers/ArcGISTiledMapServiceLayer",
		        "esri/layers/ArcGISDynamicMapServiceLayer",
		        "esri/symbols/PictureMarkerSymbol",
		        "esri/map",
		        "dojo/on",
		        "esri/graphic",
		        "esri/geometry/Point",
		        "esri/Color",
		        "esri/InfoTemplate"
		      ], function (ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,PictureMarkerSymbol, Map, on,Graphic,Point,Color,InfoTemplate){
				 var resultUnionExtent;    
				 var multipoint = new esri.geometry.Multipoint();
				 $.each(obj,function(i, item) {							
					 g=new Graphic();
					 simpleMarkerSymbol = new PictureMarkerSymbol({
		        	    "url":"${basePath}app/templates/manage/arcgis319/img/marker.png",
		        	    "height":15,
		        	    "width":20,
		        	    "type":"esriPMS",
		        	    "angle": 0,
		        	  });
					  var point=new Point([item.LONGITUDE, item.LATITUDE]); 
					  multipoint.addPoint(point);  
					  g.setGeometry(point);
				      g.setSymbol(simpleMarkerSymbol);
				     /*  g.setInfoTemplate(infoTemplate); */
				      map.graphics.add(g);						
				}); 

				//根據當前所有點的範圍來動態縮放地圖顯示比例
				 if(multipoint.points.length > 0){
				    if(resultUnionExtent == null){
				    	resultUnionExtent = multipoint.getExtent();
				    }else{
				    	resultUnionExtent = resultUnionExtent.union(multipoint.getExtent());
				    }
				 }
				 map.setExtent(resultUnionExtent.expand(1.2)); 
			 });			 
		}
	});
}

給一個infoTemplate的參考：

  							var contentHTML = "<div style='font-size:0.3em; opacity: 0.8; overflow-y:hidden;'>";
							contentHTML += "<div>" + "資源名稱："
									+ rainObj[0]["resName"] + "<br>類型： "+rainObj[0]["resKind"]
									+ "<br> 所屬局站："
									+ rainObj[0]["baseStation"]
									+ "<br> 具體地址：" + rainObj[0]["address"]
									+ "<br> 站點緯度：" + rainObj[0]["latitude"]
									+ "   站點經度："
									+ rainObj[0]["longitude"]
									+ "</div></div>";
						    var json = {content : contentHTML};
						    var infoTemplate = new InfoTemplate(json);