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

最新推荐文章于 2023-07-13 19:23:53 发布

置顶 shenqiang198956

最新推荐文章于 2023-07-13 19:23:53 发布

阅读量1k

点赞数

分类专栏： gis api简介室内定位 andriod java web ios javascript 文章标签：地图开发地理信息 webgis 电子地图 javascript api

本文链接：https://blog.csdn.net/shenqiang198956/article/details/38701921

版权

gis api简介同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

室内定位

8 篇文章 0 订阅

订阅专栏

andriod

7 篇文章 0 订阅

订阅专栏

<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 οncοntextmenu="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='#' οnclick='zoomIn(map)'>放大</a><br><a href='javascript:void(0)' οnclick='zoomOut(map)'>缩小</a> <hr><a href='javascript:void(0)' οnclick='zoomMax(map)'>放置到最大</a><hr><a href='javascript:void(0)' οnclick='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>