您的位置：首页 > 其它

教你怎么快速掌握GIS（电子地图）引擎的开发，并且快速实现相应的功能特效

2014-08-20 09:48 363 查看

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://www.forbst.com"></script>

<title>siteMap地图右击事件</title>

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}

a{

text-decoration: none;

line-height:1.5;

font-size:13px;

color: #000000;

}

a:HOVER {

color: #4F94CD;

}

#test{

width:120px;height:auto;background:#ffffff; border: 1px solid #AEEEEE;

}

</style>

</head>

<body oncontextmenu="return false" >

<div>

</div>

<div id="div_map" style=" width:100%;height:100%; border: 1px solid red;" ></div>

<script type="text/javascript">

var map=null;

var xx=null;

var yy=null;

map=new STMapObj("div_map");

map.locateMap(new STMapPoint(121.43745399,31.211535),7);

map.setCollectionSize(new STMapSize(20,20));

map.setZoomCompVisible(true);

map.setScaleCompVisible(true);

map.addEventListner("rightclick",clickfun);

//回调函数

function clickfun(obj,x,y)

{

var point1=map.screen2LonLat(new STMapPoint(x-15,y-32));

xx= point1.x;

yy=point1.y;

var point=map.screen2LonLat(new STMapPoint(x+50,y+100));

//alert(point.x+","+point.y);

var poly = new STMapCustomOverObj();

poly.id="zidingyi1";

poly.point=new STMapPoint(point.x,point.y);

poly.html="<div id='test'><a href='#' onclick='zoomIn(map)'>放大</a><br><a href='javascript:void(0)' onclick='zoomOut(map)'>缩小</a> <hr><a href='javascript:void(0)' onclick='zoomMax(map)'>放置到最大</a><hr><a href='javascript:void(0)' onclick='LocationPoint(map)'>在此添加标注</a>
</div>";

poly.anchor=new STMapPoint(50,100);

poly.size = new STMapSize(100,100);

poly.infowin=false;

map.addOverlay(poly,false);

}

function zoomIn(map){

var Zoom=map.getZoom();

if(Zoom>1){

map.setZoom(Zoom-1);

var d=document.getElementById('test');

d.style.display="none";

}else{

alert("已经放到最大");

var d=document.getElementById('test');

d.style.display="none";

}

}

function zoomOut(map){

var Zoom=map.getZoom();

if(Zoom<17){

map.setZoom(Zoom+1);

var d=document.getElementById('test');

d.style.display="none";

}else{

alert("已经放到最小");

var d=document.getElementById('test');

d.style.display="none";

}

}

function zoomMax(map){

map.setZoom(1);

var d=document.getElementById('test');

d.style.display="none";

}

function LocationPoint(map){

// alert(xx+","+yy);

var poly = new STMapMarker();

poly.id="testline777"; //【必选】对象 id

poly.point=new STMapPoint(xx,yy); //【必选】经纬度坐标 STMapPoint 类型

poly.img="../img/carAPI.png"; //【必选】对象的图片地址 url

poly.label=""; //【可选】鼠标提示

poly.size="" //【可选】图片长宽参数为 STMapSize 类型，默认为图片本身尺寸

poly.anchor="BC" // 【可选】定位锚点，BC （下边中心点）BL （左下角）BR （右下角）TL （左上角）TC （上边中心点）TR （右上角）ML （左边中心点）MR （右边中心点）CENTER （图片中心点）

poly.infowin=true; //【可选】是否点击显示信息窗口，默认为 true。

poly.title=""; //属性信息库标题，支持 html 代码

poly.content="我是的添加的图片"; //属性信息框内容，支持 html 代码

poly.moveable = false; //是否可以拖动

map.addOverlay(poly);

var d=document.getElementById('test');

d.style.display="none";

}

//左击效果

map.addEventListner("click",clickfun1);

//回调函数

function clickfun1(obj,x,y)

{

var d=document.getElementById('test');

d.style.display="none";

}

</script>

<div style="display: none">

<script type="text/javascript">

var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1000501913'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1000501913' type='text/javascript'%3E%3C/script%3E"));

</script>

</div>

</body>

</html>

教你怎么快速掌握GIS（电子地图）引擎的开发，并且快速实现相应的功能特效

查看运行效果

更多案例详情……