首頁 > 開發者 > JavaScript
標籤：simple name ios render *** ext cal href cursor
用過Arcgis Server for JavaScript API肯定知道InfoWIndow。你在用InfoWindow的時候會發現各種問題，比如不能全然顯示的問題，遮蓋對象的問題等等。所以呢我在實現這個功能的時候動了下腦子，想自己用div+css弄一個，倒騰了半天，弄出來了一個例如以下所看到的的：
做的比較醜陋，樣式方面還得好好下下功夫。東西是差點兒相同實現了，以下說說思路：
首先。DIV定義，這個樣式，我定義了5個div，各自是infowin，title，colse，content。arrow，當中。infowin是整個InfoWindow的大架構，title為標題。close為關閉button，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>
<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
lzugis——Arcgis Server for JavaScript API之自己定義InfoWindow
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
