Lzugis--arcgis Server for JavaScript API's own definition Infowindow

The ArcGIS Server for JavaScript API must know Infowindow. When you use Infowindow, you will find various problems, such as problems that cannot be fully displayed, problems covering objects, and so on. So I was in the realization of this function when the brain, I want to use DIV+CSS to get one, Daoteng for a long time, made up a for example, see the following:

Do more ugly, the style has to work hard. Things are almost the same realization, the following talk about ideas:

First of all. div definition, this style, I have defined 5 div, each of which is infowin,title,colse,content. Arrow, among them. Infowin is the big frame of the whole Infowindow, title is the headline. Close is the main content for closing button,content, Arrow is the following small tail. We can make this little tail a bit longer. In case the object is obscured, the code is:

    <div id= "Mapdiv" >    <div id= "Infowin" >        <div id= "Close" onclick= "Closeinfowin ()" >x</div >            <div id= "title" ></div>            <div id= "content" ></div>            <div id= "Arrow" > </div>        </div>    </div>

A div is defined to be laid out. The style is defined, and the style is:

    <style>          html, body, #mapDiv   {                padding:0;                margin:0;                height:100%;font-size:10px;position:relative;          }  #infowin  {    display:none;  z-index:10000;    }  #close  {  float:right;  padding-top:10px;  Font-weight:bold;  font-size:12px;  Color: #FFF;  border: #000 1px solid;  height:20px;  width:20px;  Text-align:center;  }   #close: hover  {  cursor:pointer;  }  #title  {  background-color: #666;  padding:10px;  Font-weight:bold;  font-size:12px;  }  #content  {  padding-left:10px;  padding-top:10px;  Background-color: #999;  height:200px;  }  #arrow  {  background-image:url (arrow.png);  height:30px;  }    </style>

After the style is defined, you have to consider the event, which is usually infowindow when you click on an object, so we have to define the object layer's Click event:

function Leftclick (evt) {infowin.style.display= "none"; var strtitle= "city name"  var strcontent = "* * * * * is a beautiful city <br ><br>**** is a good-looking city <br><br>**** is a rich city <br><br>**** is a beautiful city "; infowin.style.left = (EVT.CLIENTX-WIDTH/2) + "px"; infowin.style.top= (evt.clienty-height-50) + "px"; infowin.style.position= "Absolute"; infowin.style.width=width+ "px"; infowin.style.height=height+ "px"; infowin.style.display= "Block"; title.innerhtml = strtitle;content.innerhtml = strcontent;} Mouse click Featurelayercity.on ("click", Leftclick);

Click on the object to appear in the mouse click position. So we have to set the position style of infowin to absolute. and defines left and top respectively as Clientx and Clienty, and sets its display to block, displays it, implements the specific code such as the following:

<! DOCTYPE html>Now just achieve here, there are the following issues to be resolved: 1, the map after dragging Infowin with the map linkage. 2, map after zooming Infowin with the map linkage, 3, the content is not in the visual range of the movement, 4, style. It's pretty ugly. Hope that someone realized after sharing the code for the benefit of the whole giser.

Lzugis



 
Lzugis--arcgis Server for JavaScript API's own definition Infowindow