從開始使用js API，就一直使用infowindow，最近需要自定義的時候才發現裡面問題和方法還挺多的，沒有android端這麼清晰，最近看了些博文和官網，自己總結了方法如下：
一、繼承infowindowbase
這個方法是官網公布的方法，大家可以去官網下載下傳網址如下：連接配接，也可以直接下載下傳我自己的資源點選打開連結
主要原理是通過自己寫一個類繼承infowindowbase，并設定css樣式，然後通過require引入使用，填充到map的infowindow屬性。最主要的是setContent來設定infowindow中的主要内容。
下圖是檔案結構：
下圖是使用自定義infowindow方法：
最後為layer設定template或者不設定都可以。
效果圖如下：
二、使用popup定義彈出視窗
同樣有官網位址：位址
使用popup實際上是比上面的方法比較低級别，因為popup是繼承了infowindowbase，是以原則上來講并沒有上述方法靈活
但是使用起來API實作了好多接口，添加直方圖，修改顔色等常用效果比較容易實作。使用方法跟上述方法類似，不再詳細講了。
需要注意的是，需要注意的是，需要注意的是：
我們平時提的infowindow指的就是彈出視窗，但是API中一般把兩者分開，分别叫infowindow和popup，但但是他們實際上都是繼承了infowindowbase，而且使用方法一樣，都填充到map中的infowindow屬性，這樣map中的infowindow就改變了，然後你可以選擇在layer圖層中是否設定template（popuptemplate或者infotemplate）
三、html自定義視窗
這個基本原理就是：首先在map中添加一個隐藏div，然後每次點選的時候填充該div并show出來撒地方，最後在拖拽縮放的事件中添加相應的方法改變div位置。原理比較簡單，感覺實際上API内部應該也是這麼做的。
該方法其實就是将第一種方法自己用jquery實作了一遍（第一種有些用了dojo的方法不好看懂）。
下面上代碼，參考的是lzgis的例子，小改了一下，大家可以修改下圖檔和服務，試一下
效果如下:
html中在map的div中添加infowin
<div id="map">
<div id="infowin">
<div id="close" onClick="closeInfoWin()">X</div>
<div id="title"></div>
<div id="content"></div>
<div id="arrow"></div>
</div>
</div>
添加infowindow的css樣式
#infowin {
height:237px;
width: 400px;
display: none;
z-index: 10000;
}
#close {
float: right;
padding-top: 10px;
font-weight: bold;
font-size: 12px;
color: #FFF;
/*
border: #000 1px solid;
*/
height: 30px;
width: 30px;
text-align: center;
}
#close:hover {
cursor: pointer;
}
#title {
background-color: #1097ff;
padding: 10px;
font-weight: bold;
font-size: 12px;
}
#content {
padding-left: 10px;
padding-top: 10px;
background-color: #FFFFFF;
height: 200px;
color:#000000;
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-top: 30px solid #FFFFFF;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
left: 190px;
bottom: -30px;
}
在js中require子產品外定義變量和函數
var isWindowShow=0;
var closeInfoWin = function (evt){
infowin=document.getElementById("infowin");
infowin.style.display="none";
isWindowShow=0;
};
在require子產品中定義infowindow的操作
//對話框
var infowin,colse,title,content;
var width=400,height=237,offset=30;
var beforePoint;
var beforeMapPoint;
infowin = document.getElementById("infowin");
colse = document.getElementById("close");
title = document.getElementById("title");
content = document.getElementById("content");
function showinfowindow(x,y){
infowin.style.left=(x-width/2)+"px";
infowin.style.top=(y-height-offset)+"px";
infowin.style.position="absolute";
infowin.style.width=width+"px";
infowin.style.height=height+"px";
infowin.style.display="block";
}
function leftClick(evt){
infowin.style.display="none";
var strtitle="城市名稱";
var strcontent = "名稱：1111111<br><br>年代：1991<br><br>省份：balabala<br><br>曆史沿革：不詳";
title.innerHTML = strtitle;
content.innerHTML = strcontent;
var screenpoint = map.toScreen(evt.mapPoint);
beforeMapPoint = evt.mapPoint;
beforePoint=screenpoint;
showinfowindow(screenpoint.x,screenpoint.y);
isWindowShow=1;
}
//滑鼠單擊
map.on("click", leftClick);
map.on("pan",function(pan){
if(beforePoint!=null&&isWindowShow==1)
{
var movePoint=pan.delta;
showinfowindow((beforePoint.x+movePoint.x),(beforePoint.y+movePoint.y))
}
});
map.on("pan-end",function(panend){
if(beforePoint!=null&&isWindowShow==1)
{
var movedelta=panend.delta;
beforePoint.x=beforePoint.x+movedelta.x;
beforePoint.y=beforePoint.y+movedelta.y;
}
});
map.on("zoom",function(){
if(beforePoint!=null&&isWindowShow==1)
{
infowin.style.display="none";
}
});
map.on("zoom-end",function(){
if(beforePoint!=null&&isWindowShow==1)
{
var zoomPoint = map.toScreen(beforeMapPoint);
showinfowindow(zoomPoint.x,zoomPoint.y);
beforePoint=zoomPoint;
}
});
總結下：第二種方法不太好用，第一種方法熟悉dojo的比較友善，填充的時候内容得以字元串的形式添加；第三種方法比較容易看懂了解，一般前端的都可以搞定，而且定制化程度比較高，可以在infowindow中添加元素。
希望有好的方法大神們再共享下==