用過Arcgis Server for JavaScript API肯定知道InfoWIndow，你在用InfoWindow的時候會發現各種問題，例如不能完全顯示的問題，遮蓋對象的問題等等，所以呢我在實現這個功能的時候動了下腦子，想自己用div+css弄一個，倒騰了半天，弄出來了一個如下所示的：
做的比較醜陋，樣式方面還得好好下下功夫，東西是差不多實現了，下面說說思路：
首先，DIV定義，這個樣式，我定義了5個div，分別是infowin，title，colse，content，arrow，其中，infowin是整個InfoWindow的大框架，title爲標題，close爲關閉按鈕，content爲主要內容，arrow爲下面的小尾巴，我們可以將這個小尾巴做的長一點，以免對象被遮蓋的情況，代碼爲：
<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>定義了div就得進行佈局，定義樣式了，樣式爲：
<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>樣式定義完之後就得考慮事件了，一般InfoWindow是在點擊某個對象時彈出來的，所以我們得定義對象圖層的click事件：
function leftClick(evt){
infowin.style.display="none";
var strtitle="城市名稱"
var strcontent = "****是一座美麗的城市<br><br>****是一座好看的城市<br><br>****是一座富饒的城市<br><br>****是一座漂亮的城市";
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;
}
//鼠標單擊
featurelayercity.on("click", leftClick);點擊對象，在鼠標的點擊位置出現，所以我們得將infowin的position樣式設爲absolute，並定義left和top分別爲clientX和clientY，並將其display設置爲block，將其顯示，實現的詳細代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Feature Layer - display results as an InfoWindow onHover</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css">
<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>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var infowin,colse,title,content;
var width=400,height=230;
var closeInfoWin = function (evt){
infowin=document.getElementById("infowin");
infowin.style.display="none";
};
require([
"esri/map", //地圖
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",//特徵層
"esri/symbols/PictureMarkerSymbol",//圖片點符號
"esri/renderers/SimpleRenderer", //簡單渲染
"esri/graphic", //圖片
"esri/lang",
"dojo/domReady!"
], function(
Map,ArcGISTiledMapServiceLayer,FeatureLayer,PictureMarkerSymbol,SimpleRenderer,esriLang
) {
var map = new Map("mapDiv", {
logo:false,
center: [106.6854, 35.8364],
zoom: 4,
slider: true
});
var shpServiceURL="***************************************";
var shpTitlelayer=new ArcGISTiledMapServiceLayer(shpServiceURL);
map.addLayer(shpTitlelayer);
//--------------------------------------------------------------------------------------------------------
var featurelayercity = new FeatureLayer("******************************************************", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var pmsRed = new PictureMarkerSymbol('../images/location_icon_blue.png', 20, 20).setOffset(0, 15);
//簡單渲染
var sr=new SimpleRenderer(pmsRed);
featurelayercity.setRenderer(sr);
map.addLayer(featurelayercity);
infowin = document.getElementById("infowin");
colse = document.getElementById("close");
title = document.getElementById("title");
content = document.getElementById("content");
function leftClick(evt){
infowin.style.display="none";
var strtitle="城市名稱"
var strcontent = "****是一座美麗的城市<br><br>****是一座好看的城市<br><br>****是一座富饒的城市<br><br>****是一座漂亮的城市";
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;
}
//鼠標單擊
featurelayercity.on("click", leftClick);
});
</script>
</head>
<body class="tundra">
<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>
</body>
</html>目前只實現到了這兒， 還有以下問題待解決：1、地圖拖動後infowin隨着地圖的聯動；2、地圖縮放後infowin隨着地圖的聯動；3、內容不在可視範圍時候的移動；4、樣式，挺難看的。希望有人實現後共享下代碼，造福全GISer。
lzugis