首页 > 代码库 > lzugis——Arcgis Server for JavaScript API之自定义InfoWindow（续）

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow（续）

2024-07-05 21:50:50   223人阅读

同样的标题后面加了一个括弧，不是为了增减博文数量，而确实是上个功能的完善，标注为续，意思是继续上次的内容，来说说如何自定义InfoWindow。


在上一讲中，实现了InfoWindow的显示，但是并没有实现地图拖动地图InfoWindow随着联动，以及缩放地图InfoWindow随着联动的问题，在本文章中，就上述两个问题提供一个解决思路。


首先，说说拖动地图InfoWindow的联动。拖动地图时，地图并未做缩放，所以只是做一个位置的偏移，因此，定义一个公共变量，记录InfoWindow出来时候的屏幕位置，拖动鼠标时获取鼠标的相对变化，再讲InfoWindow做一相对应的偏移即可：

var beforePoint; //定义InfoWindow出现的上一位置
function leftClick(evt){
    infowin.style.display="none";			
    var strtitle="城市名称"			
    var strcontent = "****是一座美丽的城市<br><br>****是一座好看的城市<br><br>****是一座富饶的城市<br><br>****是一座漂亮的城市";					
    title.innerHTML = strtitle;
    content.innerHTML = strcontent;
    var screenpoint = map.toScreen(evt.mapPoint);
    beforeMapPoint = evt.mapPoint;
    beforePoint=screenpoint;
    showinfowindow(screenpoint.x,screenpoint.y);
}
map.on("pan",function(pan){
	var movePoint=pan.delta;
	showinfowindow((beforePoint.x+movePoint.x),(beforePoint.y+movePoint.y))
})		  
map.on("pan-end",function(panend){
	var movedelta=panend.delta;
	beforePoint.x=beforePoint.x+movedelta.x;
	beforePoint.y=beforePoint.y+movedelta.y;
})
这样，拖动鼠标，infoWindow会随着鼠标的移动而移动。


接着，我们说说缩放时InfoWindow的联动。缩放时的联动的逻辑是记录InfoWindow首次出现的地图点的坐标，当缩放结束后将首次出现的地图点转换为屏幕坐标，再将其显示出来。

map.on("zoom-end",function(){
	var zoomPoint = map.toScreen(beforeMapPoint);
	showinfowindow(zoomPoint.x,zoomPoint.y);
	beforePoint=zoomPoint;
})

怎么样，很简单吧，下面一并将全的代码附上：

<!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://www.mamicode.com/"http://localhost/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/claro/claro.css">>


联系
我们