`

利用JavaScript实现图片标注——SearchMapIdentityTask

阅读更多

功能:功能实现了现在网络流行的定位后在地图上画一个图标,点击图标后弹出消息框。

思路:根据查询条件获得一个点的地图坐标,然后转换为屏幕坐标,利用js脚本动态图片到相应位置。

效果图如下:

 

主要实现步骤:

1、SearchMapIdentity.cs,该类主要实现查询获取点的地图坐标,地图坐标转换为屏幕坐标的方法,点击小图标时的回发调用,代码如下:

using System;
using System.Data;
using System.Collections;
using System.Collections.Specialized;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using ESRI.ArcGIS.ADF.Web;
using ESRI.ArcGIS.ADF.Web.UI.WebControls;
using ESRI.ArcGIS.ADF.Web.DataSources;
using ESRI.ArcGIS.ADF.Web.Geometry;
using ESRI.ArcGIS.ADF.Web.Display.Graphics;
using System.Collections.Generic;

namespace SearchMapIdentityTask{

   public class SearchMapIdentity
    {
        #region 私有字段
       private Page m_page;
       private Map m_map;
       private ArrayList mapPoints = null;
       private string content;
       
       private string m_callbackInvocation = "";
       private string m_filePath = "";
       private string queryText = "";
       private DataTable queryResult = null;
       private string queryField = "";
       private string readFields = "";
      #endregion

        #region 相关属性
        public Map Map
        {
            get { return m_map; }
            set { m_map = value; }
        }

        public Page Page
        {
            get { return m_page; }
            set { m_page = value; }
        }


        public string ClientCallbackInvocation
        {
            get { return m_callbackInvocation; }
            set { m_callbackInvocation = value; }
        }

        public string FilePath
        {
            get { return m_filePath; }
            set { m_filePath = value; }
        }

        public string QueryText
        {
            get { return queryText; }
            set { queryText = value; }
        }

        public ArrayList MapPoints
        {
            get { return mapPoints; }
            set { mapPoints = value; }
        }
        public string Content
        {
            get { return content; }
            set { content = value; }
        }

       public DataTable QueryResult
       {
           get { return queryResult; }
           set { queryResult = value; }
       }
       //需要用来作为Where条件的查询字段
       public string QueryField
       {
           get { return queryField; }
           set { queryField = value; }
       }
       //需要显示在详细信息里的字段
       public string ReadFields
       {
           get { return readFields; }
           set { readFields = value; }
       }
        #endregion

        #region 构造函数

        public SearchMapIdentity()
        {
        }

        public SearchMapIdentity(Map map)
        {
            if (map != null)
            {
                m_map = map;
            }
        }

        public SearchMapIdentity(Map map, string filePath)
        {
            m_map = map;
            m_filePath = filePath;

        }
        #endregion

        #region 处理点击查询回调的函数

        public void Identify(bool isFirstIdentify,string layername)
        {
            int x = 0;
            int y = 0;
            ArrayList xy = null;
            if (this.MapPoints == null || isFirstIdentify == true)
            {
                xy = GetXY(this.Map,layername);
            }
            else
            {
                xy = this.MapPoints as ArrayList;
            }
            foreach (object o in xy)
            {
                object[] arrayPoints = o as object[];
                ESRI.ArcGIS.ADF.Web.Geometry.Point p = (ESRI.ArcGIS.ADF.Web.Geometry.Point)arrayPoints[0];
                System.Drawing.Point screenPoint = MapToScreenPoint(p.X, p.Y);
                x = screenPoint.X;
                y = screenPoint.Y;
                string content = arrayPoints[1] as string;
                string oa = string.Format("ReDrawZommToPoint({0},{1},{2},{3},\'{4}\');", x, y, p.X, p.Y, content);
                CallbackResult cr1 = new CallbackResult(null, null, "javascript", oa);
                this.Map.CallbackResults.Add(cr1);
            }
        }
        #endregion

        #region 处理点击小图片时回调的函数
        public void DrawInfoWin(double mapX, double mapY, string content)
        {
            System.Drawing.Point screen_point = MapToScreenPoint(mapX, mapY);
            int[] rate = { screen_point.X, screen_point.Y - 38 };
            object[] oa = new object[1];
            string sa = "showInfoWindow(" + rate[0].ToString() + "," + rate[1].ToString() + ",'" + content + "');";
            oa[0] = sa;
            CallbackResult cr1 = new CallbackResult(null, null, "javascript", oa);
            this.Map.CallbackResults.Add(cr1);
        }
        #endregion

        #region 获得查询点的结果集
        public ArrayList GetXY(Map Map1,string layername)
        {
            ArrayList XY = new ArrayList();
            IEnumerable func_enum = Map1.GetFunctionalities();
            System.Data.DataTable datatable = null;

            foreach (ESRI.ArcGIS.ADF.Web.DataSources.IGISFunctionality gisfunctionality in func_enum)
            {
                ESRI.ArcGIS.ADF.Web.DataSources.IGISResource gisresource = gisfunctionality.Resource;

                if (gisfunctionality.Resource.DataSource.DataSourceDefinition == "In Memory")
                {
                    continue;
                }

                bool supported = gisresource.SupportsFunctionality(typeof(ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality));

                if (supported)
                {
                    ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality qfunc;

                    qfunc = (ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality)gisresource.CreateFunctionality(
                       typeof(ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality), null);

                    string[] lids;
                    string[] lnames;
                    qfunc.GetQueryableLayers(null, out lids, out lnames);

                    int layer_index = -1;
                    for (int i = 0; i < lnames.Length; i++)
                    {
                        if (lnames[i] == layername)
                        {
                            layer_index = i;
                            break;
                        }
                    }

                    if (layer_index == -1)
                    {
                        continue;
                    }

                    ESRI.ArcGIS.ADF.Web.SpatialFilter spatialfilter = new ESRI.ArcGIS.ADF.Web.SpatialFilter();
                    spatialfilter.Geometry = Map1.GetFullExtent();
                    spatialfilter.ReturnADFGeometries = true;
                    spatialfilter.MaxRecords = 1000;
                    spatialfilter.WhereClause = this.QueryField + " like '%" + this.QueryText + "%'";  //txtSearch.Text; 查询条件

                    datatable = qfunc.Query(null, lids[layer_index], spatialfilter);
                    this.QueryResult = datatable;

                    if (datatable != null)
                    {
                        int intShape = -1;
                        foreach (System.Data.DataColumn col in datatable.Columns)
                        {
                            if (col.DataType == typeof(Geometry))
                            {
                                intShape = col.Ordinal;
                                break;
                            }
                        }

                        for (int i = 0; i < datatable.Rows.Count; i++)
                        {
                            ESRI.ArcGIS.ADF.Web.Geometry.Point point2 = (ESRI.ArcGIS.ADF.Web.Geometry.Point)datatable.Rows[i].ItemArray[intShape];
                            //让地图以某个点居中
                            this.Map.CenterAt(point2);
                            Array readFieldPairs = this.ReadFields.Split(";".ToCharArray());
                            string[] readFieldValue;
                            //循环构造Content属性
                            if (readFieldPairs.Length > 0)
                            {
                                for (int j = 0; j < readFieldPairs.Length-1; j++)
                                {
                                    readFieldValue = readFieldPairs.GetValue(j).ToString().Split(":".ToCharArray());
                                    this.Content += readFieldValue[0] + ":" + datatable.Rows[i][readFieldValue[1]].ToString()+"<br>";
                                }
                            }                            
                            object[] arraryPoint = new object[2];
                            arraryPoint[0] = point2;
                            arraryPoint[1] = this.Content;
                            //将Content属性清空
                            this.Content = "";
                            XY.Add(arraryPoint);
                        }
                    }
                }
            }
            this.MapPoints = XY;
            return XY;

        }
        #endregion

        #region 由地图坐标经过转换得到屏幕坐标的点
        public System.Drawing.Point MapToScreenPoint(double mapX, double mapY)
        {
            ESRI.ArcGIS.ADF.Web.Geometry.Point adf_point = new ESRI.ArcGIS.ADF.Web.Geometry.Point(mapX, mapY);
            ESRI.ArcGIS.ADF.Web.Geometry.TransformationParams transformationParameters = this.Map.GetTransformationParams(ESRI.ArcGIS.ADF.Web.Geometry.TransformationDirection.ToScreen);
            System.Drawing.Point screen_point = adf_point.ToScreenPoint(transformationParameters);
            return screen_point;
        }

        #endregion

    }
}

 

2、SearchMapIdentityTask.cs,这个就是包装Task的类,主要代码如下

using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using ESRI.ArcGIS.ADF.Web.UI.WebControls;
using ESRI.ArcGIS.ADF.Web.DataSources;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Web.UI;
using System.Collections;
using System.Collections.Specialized;
using System.Data;
using System.ComponentModel;
using System.Text.RegularExpressions;

namespace SearchMapIdentityTask
{
   
    public class SearchMapIdentityTask : FloatingPanelTask
    {
        private TextBox textBox = null;
        private HtmlInputButton button = null;
        private HtmlSelect selLayers = null;
        private HtmlInputButton clear = null;

        SearchMapIdentity searchMapIdentity = null;
        private string queryField = "";        
        private string readFileds = "";

        #region 相关属性
        [Description("用户where条件中要查询的字段")]
        public string QueryField
        {
            get { return queryField; }
            set { queryField = value; }
        }
        [Description("设置需要在详细信息中显示的字段,格式为(字段1中文名:字段1数据库表名;字段2中文名:字段2数据库表名)")]
        public string ReadFileds
        {
            get { return readFileds; }
            set { readFileds = value; }
        }
        #endregion

        #region 构造函数
        public SearchMapIdentityTask()
        {
            this.Width = Unit.Pixel(200);
        }
        #endregion

        #region 构建子控件
        protected override void CreateChildControls()
        {
            Controls.Clear();
            base.CreateChildControls();
            textBox = new TextBox();
            textBox.ID = "textBox";
            textBox.Width=200;
            button = new HtmlInputButton();
            button.ID = "button";
            button.Value = "查询";
            clear = new HtmlInputButton();
            clear.ID = "clear";
            clear.Value = "清除结果";
            selLayers = new HtmlSelect();
            selLayers.ID = "sellayer";  
            Controls.Add(selLayers);
            Controls.Add(textBox);
            Controls.Add(button);
            Controls.Add(clear);

            string argument = string.Format("'args='+document.getElementById('{0}').value", selLayers.ClientID);
            argument += string.Format("+':'+strTrim(document.getElementById('{0}').value)", textBox.ClientID);

            string onClick = string.Format("executeTask({0},\"{1}\");", argument, base.CallbackFunctionString);
            //调用SearchMapIdentity.js里的clearIdentifyDiv函数,清楚上一次查询产生的div
            onClick += "clearIdentifyDiv();";
            string onKeyDown = string.Format(" if(event.keyCode==13) {{{0} return false;}}", onClick);
            button.Attributes.Add("onclick", onClick);
            //点击clear按钮时,调用清除查询结果的js函数
            clear.Attributes.Add("onclick", "clearIdentifyDiv()");
            textBox.Attributes.Add("onkeydown", onKeyDown);


            //调用填充下拉框函数
            FillLayerSelect();
        }
        #endregion
        
        #region OnLoad—初始化一些初始变量
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            //进行相关属性检查
            if (this.QueryField == "")
            {
                throw new Exception("QueryField属性未设置");
            }

            Regex regex = new Regex("^(\\S+:\\S+;)+$");
            if (this.ReadFileds == "")
            {
                throw new Exception("ReadFileds属性未设置");
            }
            else if (!regex.IsMatch(this.ReadFileds))
            {
                throw new Exception("ReadFileds格式不正确,请查看描述后修改!");
            }

            this.MapInstance.ScaleChanged += new MapScaleChangeEventHandler(Map_ScaleChanged);
            searchMapIdentity = new SearchMapIdentity(this.MapInstance);
            searchMapIdentity.QueryField = this.QueryField;
            searchMapIdentity.ReadFields = this.ReadFileds;
            //searchMapIdentity.SetupIdentify();
            if (this.Page.Session["MapPoints"] != null)
            {
                searchMapIdentity.MapPoints = this.Page.Session["MapPoints"] as ArrayList;
            }
        }
        #endregion

        #region OnPreRender - 加载客户端脚本和设置属性

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (this.Page != null)
            {
                //注册SearchMapIdentity脚本
                ClientScriptManager scriptMgr = Page.ClientScript;
                Type controlType = this.GetType();
                string fileName = controlType.Namespace + ".SearchMapIdentity.js";
                scriptMgr.RegisterClientScriptResource(controlType, fileName);
                //注册回调的字符串
                System.Text.StringBuilder sb = new System.Text.StringBuilder();                
                sb.Append("<script language=\"javascript\" type=\"text/javascript\">var MapSearchIdentifyCallbackStr = \"" + base.CallbackFunctionString + "\";</script>\n");
                if (!Page.ClientScript.IsClientScriptBlockRegistered("MapSearchIdentify"))
                    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "MapSearchIdentify", sb.ToString());
            }            
        }
        #endregion

        #region 回调处理函数
        //得到传递进来的参数,赋给base.Input
        public override string GetCallbackResult()
        {
            NameValueCollection keyValCol1 = CallbackUtility.ParseStringIntoNameValueCollection(_callbackArg);
            if (keyValCol1["EventArg"] == "executeTask")
            {
                string sInArgs = keyValCol1["args"];
                string delim = ":";
                char[] delchar = delim.ToCharArray();
                string[] args = sInArgs.Split(delchar);
                object[] inputs = new object[2];
                inputs[0] = args[0];
                inputs[1] = args[1];
                base.Input = inputs;
            }
            else if (keyValCol1["EventArg"] == "startTaskActivityIndicator")
            {
            }
            else if (keyValCol1["EventArg"] == "hidden")
            {
            }
            //自己添加的分支,用户处理点击小图片是的回发处理
            else if (keyValCol1["EventArg"] == "ShowInfoWin")
            {
                double MapX = Convert.ToDouble(keyValCol1["MapX"]);
                double MapY = Convert.ToDouble(keyValCol1["MapY"]);
                string content = keyValCol1["Content"];
                searchMapIdentity.DrawInfoWin(MapX, MapY, content);
                return this.MapInstance.CallbackResults.ToString();
            }
            return base.GetCallbackResult();
        }
        #endregion

        #region 执行TASK
        public override void ExecuteTask()
        {
            if (Input == null) return;
            object[] inputs = Input as object[];
            string selLayer = inputs[0] as string;
            string queryTxt = (string)inputs[1];
            ViewState["selLayer"] = selLayer;
            ViewState["queryTxt"] = queryTxt;
            searchMapIdentity.QueryText = queryTxt;
            searchMapIdentity.Identify(true, selLayer);
            DataTable datatable = searchMapIdentity.QueryResult as DataTable;
            DataSet ds = new DataSet();
            ds.Tables.Add(datatable);            
            ds.DataSetName = "查询"+ queryTxt +"的结果为:";
            Page.Session["MapPoints"] = searchMapIdentity.MapPoints;
            base.Results = ds;
        }
        #endregion

        #region 处理依赖资源
        public override List<GISResourceItemDependency> GetGISResourceItemDependencies()
        {
            throw new Exception("The method or operation is not implemented.");
        }
        #endregion

        #region 渲染控件格式
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Table);

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            this.selLayers.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.AddStyleAttribute(HtmlTextWriterStyle.WhiteSpace, "nowrap");
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            if (!string.IsNullOrEmpty(this.Input as string))
            {
                this.textBox.Text = this.Input as string;
            }
            else
            {
                this.textBox.Text = "";
            }
            this.textBox.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();            

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            this.button.RenderControl(writer);
            writer.Write("  ");
            this.clear.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();

            writer.RenderEndTag();
        }
        #endregion

        #region 辅助函数
        Map _map = null;
        TaskResults _taskResults = null;
        private Map MapInstance
        {
            get
            {
                if (_map == null)
                {
                    for (int i = 0; i < base.TaskResultsContainers.Count; i++)
                    {
                        _taskResults = Utility.FindControl(TaskResultsContainers[i].Name, Page) as TaskResults;
                        if (_taskResults != null && _taskResults.Map != null && _taskResults.Map.Length > 1)
                        {
                            _map = Utility.FindControl(_taskResults.Map, this.Page) as Map;
                        }
                        if (_map != null)
                            break;
                    }
                }
                return _map;
            }
        }

        private TaskResults getTaskResults()
        {
            if (_taskResults == null)
                _map = MapInstance;
            return _taskResults;
        }

        //填充selLayers下拉框
        private void FillLayerSelect()
        {
            ListItem layerItem;
            IMapFunctionality mf = MapInstance.GetFunctionality(0);
            if (mf == null)
            {
                layerItem = new ListItem("<no layers found>", "null");
                selLayers.Items.Add(layerItem);
                return;
            }
            IGISResource gisresource = mf.Resource;
            bool supported = gisresource.SupportsFunctionality(typeof(IQueryFunctionality));
            selLayers.Items.Clear();
            if (supported)
            {
                IQueryFunctionality qfunc = gisresource.CreateFunctionality(typeof(IQueryFunctionality), null) as IQueryFunctionality;
                string[] lids;
                string[] lnames;                
                qfunc.GetQueryableLayers(null, out lids, out lnames, ESRI.ArcGIS.ADF.Web.FeatureType.Point);
                int i = 0;
                while (i < lnames.Length)
                {
                    layerItem = new ListItem(lnames[i], lnames[i]);
                    selLayers.Items.Add(layerItem);
                    i++;
                }
            }
        }


        #endregion

        #region 地图比例尺变化以后要执行的函数
        protected void Map_ScaleChanged(object sender, ESRI.ArcGIS.ADF.Web.UI.WebControls.ScaleEventArgs args)
        {
            if (Page.IsPostBack || Page.IsCallback)
            {
                if (ViewState["selLayer"] != null && ViewState["queryTxt"] != null)
                {
                    searchMapIdentity.QueryText = "四川";
                    searchMapIdentity.Identify(false, ViewState["selLayer"] as string);
                }
            }
        }
#endregion

    }
}

 

3、SearchMapIdentity.js,主要是些动态创建和定位div的js脚本

//显示详细信息的服务器回调函数
function DrawInfowindow(mapX,mapY,content)
 {
    if (mapX==null||mapY==null) return;
    var argument="EventArg=ShowInfoWin&MapX=" + mapX + "&MapY=" + mapY + "&Content=" + content;
    var context = Maps["Map1"].controlName;
    eval(MapSearchIdentifyCallbackStr); 
 }


//删除已经标示的DIV
function clearIdentifyDiv()
{
    var o = map.overlayObject
    while (o.hasChildNodes())
     { 
       o.removeChild(o.lastChild); 
     } 
}

//将图片定位到指定点
function showZoomToPoint(x,y,mapX,mapY,content)
{
    map = Maps["Map1"];
	var pointdiv = document.createElement("div"); 
	pointdiv.style.position="absolute";	
	pointdiv.style.zIndex=2;
	// point is bottom center... 2 pixels up for shadow
	var cWidth = Math.floor(pointdiv.clientWidth / 2);
	var cHeight = pointdiv.clientHeight;
	if (cWidth==0) cWidth = 20;
	if (cHeight==0) cHeight = 38;
	var idLeft = x - parseInt(map.divObject.style.left)-cWidth/2;
	var idTop = y - parseInt(map.divObject.style.top) - cHeight + 2; 	
    pointdiv.innerHTML='<img src=images/blank.gif alt="" border="0"  hspace="0" vspace="0" onclick=\'DrawInfowindow(' + mapX + ',' + mapY + ',"' + content + '");\' style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/icon_info.png\');cursor:hand;" />\n';
	map.overlayObject.appendChild(pointdiv);  
	pointdiv.style.left= idLeft;
    pointdiv.style.top=idTop;
	return false;
}

//重新将图片定位到指定点
function ReDrawZommToPoint(x,y,mapX,mapY,content)
 {           
    window.setTimeout("showZoomToPoint(" + x + "," + y + "," + mapX + "," + mapY + ",\'" + content + "\')",1000);
 }


//显示详细信息的函数
function showInfoWindow(x,y,content)
{
	var div = document.getElementById("InfoWindow");
	if (div==null) {
	    addInfowindow();
	}
	window.status=content;
	document.getElementById("infowindowTitle").innerHTML="<b><font color='black'>详细信息</font></b>"
	var infoContentHtml="<font color='black'>" + content + "</font><br>";
	var oNearQuery=document.getElementById("tr_NearQuery");

	infoContentHtml += "<span style=\"cursor:hand;\" onclick=\"alert('call js functions u need');\"><u>点我吧</u></span> ";

	document.getElementById("infowindowContent").innerHTML= infoContentHtml ;
	var div = document.getElementById("InfoWindow");
	var cWidth = Math.floor(div.clientWidth / 2);
	var cHeight = div.clientHeight;

	if (cWidth==0) cWidth = 235;
	if (cHeight==0) cHeight = 148;
	var idLeft = x - parseInt(map.divObject.style.left) ;//- cWidth;
	var idTop = y - parseInt(map.divObject.style.top) - cHeight + 2; 
    window.setTimeout('moveLayer("InfoWindow", ' + idLeft + ', ' + idTop + '); showLayer("InfoWindow");', 0);
	return false;
	
}

//添加显示信息的div
function addInfowindow()
{
    var content="";   
    content = '<div id="InfoWindow" style="z-index:3;position:absolute; width:235px; height:148px;left: 0px; top: 0px; visibility: hidden;  overflow:hidden; background-image: url(images/Info.gif); layer-background-image: url(images/Info.gif); border: 1px none #000000; cursor:default  "><table   border="0" cellpadding="0" cellspacing="0">'; 
    content += '<tr> ';
    content += '    <td valign="top"><table width="235" border="0" cellspacing="0" cellpadding="0"> ';
    content += '      <tr> ';
    content += '        <td><table  border="0" style="overflow: hidden;height: 20px; width:235px;" cellspacing="0" cellpadding="0"> ';
    content += '          <tr> ';
    content += '            <td  id ="infowindowTitle" width="218" style="overflow: hidden; width:218px; height:20px; font:宋体;  font-size:12px; color:black; padding-left:10px; " valign="middle"></td> ';
    content += '            <td width="17" valign="middle"><img style="cursor:hand;" onclick=\'closeInfoWindow();\' onmouseover="this.src=\'images/close2.png\'" onmouseout="this.src=\'images/close1.png\'" src="images/close1.png" width="8" height="6" /></td> ';
    content += '          </tr> ';
    content += '        </table></td> ';
    content += '      </tr> ';
    content += '      <tr> ';
    content += '        <td > ';
    content += '			<table align="center" width="220" border="0" cellspacing="0" cellpadding="0"> ';
    content += '			  <tr> ';
    content += '				<td background="images/h-line.png"  style="height:1px; padding:10px"></td> ';
    content += '			  </tr>';
    content += '			</table> ';
    content += '		</td> ';
    content += '      </tr> ';
    content += '      <tr> ';
    content += '        <td style="height:125px; overflow:hidden; " valign="top"> ';
    content += '		<table width="230" style="width:230px; height:125px; overflow: hidden;" border="0" cellpadding="0" cellspacing="0"> ';
    content += '          <tr> ';
    content += '            <td valign="top"> ';
    content += '			<div  id="infowindowContent" style="overflow: hidden;height:75px; width:230px;  font-size:12px ;padding-left:10px;padding-top:10px" ></div> ';
    content += '			</td> ';
    content += '          </tr>';
    content += '        </table></td> ';
    content += '      </tr> ';
    content += '    </table></td> ';
    content += '  </tr>';
    content += '</table></div>';
    map.overlayObject.insertAdjacentHTML("BeforeEnd", content);
}

//关闭显示详细信息的div
function closeInfoWindow()
{
    var div = document.getElementById("InfoWindow");
	if (div!=null)
	{
        hideLayer("InfoWindow");
    }
}

//辅助函数——清除字符串空格
function strTrim(s)
{
    var reg=/(^\s*)|(\s*$)/g;
    var ss=s.replace(reg,"");
    return ss;
}

  

使用注意事项:

1、要把附件中的图片Info.gif、close1.png、close2.png、h-line.png、icon_info.png拷贝到测试项目的根目录下的images文件夹下面。

2、要在mxd中添加1个以上点图层。

 

分享到:
评论
2 楼 feihuangzhaodian 2009-05-14  
请问博主map.overlayObject.insertAdjacentHTML 应该也能像Google Earth一样弹出个图片来吧?
1 楼 mingkof 2009-03-08  
ReDrawZommToPoint

收藏 。研究

相关推荐

    教你一天玩转JavaScript(三)——使用JavaScript完成图片轮播的效果

    4. **CSS样式操作**:通过JavaScript修改元素的CSS样式,如`display`属性,来改变图片的可见性,实现图片的切换效果。 5. **数组和索引管理**:将所有图片的URL存储在一个数组中,通过索引来跟踪当前显示的图片。在...

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    JavaScript代码生成器——Coffee Script.pdf

    JavaScript代码生成器——Coffee Script CoffeeScript是一种基于Ruby语言的编程语言,旨在通过简洁的编码方式生成JavaScript代码。它结合了Ruby的简洁和JavaScript的灵活性,使开发者可以通过简洁易读的语法撰写...

    在线h5图片标注源码

    总结来说,"在线H5图片标注源码"利用了HTML5 Canvas的强大功能,提供了一个轻量级、高效的图片标注平台。通过JavaScript的事件处理和Canvas绘图API,用户可以方便地在网页上进行图片编辑和标注,这对于许多需要视觉...

    JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3

    JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传

    利用Google翻译实现网站国际化——js插件.rar

    【标题】:“利用Google翻译实现网站国际化——js插件” 在网页开发中,为了使网站内容能够被全球用户理解和访问,网站国际化是一个重要的步骤。这个主题涉及到如何利用Google翻译API来构建一个支持多语言的网站。...

    Android使用Html实现登录功能——重点掌握Webview js的使用

    这种方式灵活性高,可以利用HTML和CSS的强大能力构建美观的界面,同时借助JavaScript与Android的交互实现业务功能。需要注意的是,为了安全起见,避免XSS攻击,我们应该始终使用`addJavascriptInterface`的`@...

    教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验

    在“教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验”这个主题中,我们将深入探讨如何利用JavaScript进行有效的数据验证。 首先,我们需要了解JavaScript的基本语法和特性。JavaScript是一种解释型...

    JavaScript动态网页开发详解——JavaScript特效

    在“JavaScript动态网页开发详解——JavaScript特效”这一主题中,我们将深入探讨JavaScript如何实现各种炫酷的网页效果。 一、JavaScript基础 在讨论特效之前,我们需要了解JavaScript的基础。JavaScript语法与...

    JAVASCRIPT实现的多媒体电子相册——附操作说明

    本项目“JAVASCRIPT实现的多媒体电子相册”充分利用了JavaScript的强大功能,为用户提供了一种新颖且便捷的方式来浏览和管理他们的本地照片。 首先,让我们深入了解一下JavaScript在多媒体电子相册中的应用。...

    JavaScript网页开发——体验式学习教程

    理解DOM树的概念以及如何通过JavaScript操作DOM对于实现动态网页至关重要。 脚本编程技术在教程中占有重要地位。学习者将学会如何使用事件监听器响应用户交互,如点击按钮、滚动页面等。此外,还会接触到AJAX...

    jquery图片标注插件增强.zip

    本项目聚焦于一个特定的需求——"jquery图片标注插件增强",这涉及到使用JavaScript库,尤其是jQuery,来实现对图片的标注功能,以便记录图片上的水印位置。以下是对这个主题的详细阐述: 首先,`cropper`是一个...

    jQuery图片标注提示插件.zip

    - 插件的JavaScript源代码(如`jquery.imageannotate.js`):这是实现标注功能的核心代码,可能包含了上述提到的各种功能。 - CSS样式文件(如`jquery.imageannotate.css`):定义了标注提示的外观和布局。 - 示例...

    图片显示特效javascript

    本主题主要围绕"图片显示特效javascript"展开,探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载:JavaScript可以监测图片的加载状态,例如使用`onload`事件来处理图片加载完成后执行的代码,确保...

    JavaScript网页开发——体验式学习教程.pdf

    这份"JavaScript网页开发——体验式学习教程.pdf"提供了一个深入理解JavaScript语法和实践的平台,帮助初学者和有一定基础的开发者提升技能。 教程首先会介绍JavaScript的基础知识,包括变量、数据类型(如字符串、...

    Applet与Javascript的对话——让你的Javascript代码和Java Applet融洽地合作.pdf

    标题中的“Applet与Javascript的对话——让你的Javascript代码和Java Applet融洽地合作”指的是一种技术实现,即如何让JavaScript与Java Applet在Web应用中进行交互。这两种技术在早期Web开发中常常结合使用,以利用...

    基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript

    该项目名为“基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站”,旨在通过HTML5、CSS以及JavaScript技术构建一个旅游酒店预订网站,以满足大学生网页设计课程作业的需求。该网站涵盖了多种场景,包括...

    jQuery自定义图片标注插件.zip

    jQuery作为一个轻量级、高性能的JavaScript库,提供了丰富的API来实现各种交互效果,包括图片标注。本篇文章将详细探讨一款基于jQuery的自定义图片标注插件,它允许用户在图片上选择区域并进行编辑,为图片添加个性...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

Global site tag (gtag.js) - Google Analytics