mapabc的使用

     现在的项目中要用到地图。头叫我看一下mapabc的网站,看看api什么的。api蛮简单的,自己看看没有什么问题。

http://code.mapabc.com/reference.htmlapi 地址。

     我把代码贴出来吧,其中有几个功能。自己可以跑一下看一下。

     其中的小弹出窗在firefox下的位置是正常的,但是在ie下不一定能正常,这方面的高手可以把我修正一下啊,呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<style type="text/css">
    #win {
    border: 1px red solid;
    width: 153px;
    height: 39px;
    background-color: green;
    position: absolute;
    display: none;
 }
body {
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图标注</title> 
    <script type="text/javascript" src="script/jquery-1.3.2.min.js"> 
 <script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.3&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3 ">
 </script>
    <script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.3&key=fd9451c6128710ffbc37d9481b002ff36665d039d0b1f2d7c20b8a1fa79ec6681181632b36b152a3 ">
    </script>
    <script type="text/javascript"> 
    var mapObj = null;
    var mapOptions=null;  
    $(document).ready(function() {  
        //设置地图初始化参数对象  
        mapOptions = new MMapOptions();
        //设置要加载的地图的缩放级别,范围为从3到17    
        mapOptions.zoom = 10;  
        //设置中心点为上海人民广场  
       //121.47600173950195,31.229536674364116人民广场坐标,类型为明码坐标
        mapOptions.center = new MLngLat(121.47600173950195,31.229536674364116,COORD_TYPE_OFFSET); 
        //设置中心点为上海 加载的地图的缩放级别
        mapOptions.zoom = 13;  
        //工具条默认
        mapOptions.toolbar = DEFAULT;  
        //工具条的位置
        mapOptions.toolbarPos = new MPoint(0, 0); 
        //设置要加载的鹰眼。此属性的取值范围是DEFAULT或者BLACK
        mapOptions.overviewMap = DEFAULT;  
        //创建地图对象  
        mapObj = new MMap("mapObj", mapOptions);  
    });
   function onClick(e) {    
     //构造一个经纬度坐标对象
        var jwd = new MLngLat(e.eventX,e.eventY);  
        //通过经纬度坐标及参数选项确定标注信息
        var marker = new MMarker(jwd);
        //获取对象编号,也是对象的唯一标识 
        marker.id = "marker";  
        //向地图添加覆盖物
        mapObj.addOverlay(marker);
        //描述标注显示的位置 
        var xy = marker.lnglat.lngX + "," + marker.lnglat.latY;
        //给显示坐标的hdMapFlag添加内容 
        $("#hdMapFlag").val(xy);
        showwin();
    };  
     
    function registMouseAddMarker() {
     //添加(注册)事件处理函数,当MOUSE_CLICK事件发生时,执行mapObj对象的onClick方法。  
       //可以向一个事件注册多个事件处理函数,在事件发生时,事件处理函数按注册时的顺序执行。
        mapObj.addEventListener(mapObj,MOUSE_CLICK,onClick);
        $("#mapObj").click(
         function(event){
          $("#win").css("top",event.screenY-138);
          $("#win").css("left",event.screenX);
         }
        );  
    };
  function  addMarkerByMouseTool() {
   //鼠标标点
   var test=mapObj.setCurrentMouseTool(ADD_MARKER);
 }
 function drawLineByMouseTool() {
  //鼠标画线
    var test=mapObj.setCurrentMouseTool(DRAW_LINE);
 }
 function  drawRectByMouseTool() {
  //鼠标画矩形
    var test=mapObj.setCurrentMouseTool(DRAW_RECTANGLE);
 }
  function drawCircleByMouseTool() {
   //鼠标画圆
    var test=mapObj.setCurrentMouseTool(DRAW_CIRCLE);
 }
 function drawPolygonByMouseTool() {
  //鼠标画多边形
    var test=mapObj.setCurrentMouseTool(DRAW_POLYGON);
 }
 function panWheelzoomByMouseTool() {
    var test=mapObj.setCurrentMouseTool(PAN_WHEELZOOM);
 }
 function  rulerByMouseTool() {
  //鼠标测距离
    var option={};
    option.hasCircle=false;
    option.hasPrompt=true;
    var test=mapObj.setCurrentMouseTool(RULER,option);
 }
 function  computeAreaByMouseTool() {
  //鼠标测面积
    var test=mapObj.setCurrentMouseTool(COMPUTE_AREA);
 }
 function  zoomInByWheel() {
    var test=mapObj.setCurrentMouseTool(WHEEL_ZOOM);    
 }
 function zoomInByMouseTool(){
  //拉框放大
    var test=mapObj.setCurrentMouseTool(FRAME_ZOOMIN);
   }
 function zoomOutByMouseTool(){
  //拉框缩小v2.3才有的新功能,奶奶的一开始用2.2搞死出不来
    var test=mapObj.setCurrentMouseTool(FRAME_ZOOMOUT);
   }
 function moveMapByMouseTool(){
  //鼠标移图
    var test=mapObj.setCurrentMouseTool(PAN_WHEELZOOM);
 }
 function showwin() {
     //找到窗口对应的div节点
     var winNode = $("#win");
     //让div对应的窗口显示出来
     winNode.fadeIn("slow");
 }
 //隐藏弹出窗的方法
 function hide() {
  var message = $("#message").val();
        alert(message);
        var position = $("#hdMapFlag").val();
        alert(position);
     //找到窗口对应的节点
     var winNode = $("#win");
     //将窗口隐藏起来
     winNode.fadeOut("slow");
     //窗口隐藏的同时,也注销flash向外发送的事件。
     mapObj.removeEventListener(mapObj,MOUSE_CLICK,onClick);
     //此处可用ajax向服务器发送数据保存相应的坐标和次坐标处的信息。
     //$.ajax({
     //type: "POST",
     //url: "some.php",
     //data: "position="+position+"&message="+"position",
     //success: function(msg){
       //alert( "Data Saved: " + msg );
      // }
   //});
 }
    </script> 
</head> 
<body> 
    <div id="mapObj" class="view" style="width:700px;height:500px"></div> 
    <input type="button" onClick="javascript:addMarkerByMouseTool();" value="鼠标标点"/>
  <input type="button" onClick="javascript:drawLineByMouseTool();" value="鼠标画线"/>
   <input type="button" onClick="javascript:drawRectByMouseTool();" value="鼠标画矩形"/>
   <input type="button" onClick="javascript:drawCircleByMouseTool();" value="鼠标画圆"/>
   <input type="button" onClick="javascript: drawPolygonByMouseTool();" value="鼠标画多边形"/><br>
   <input type="button" onClick="javascript:rulerByMouseTool();" value="鼠标测距离"/>
   <input type="button" onClick="javascript:computeAreaByMouseTool();" value="鼠标测面积"/>
   <input type="button" onClick="javascript:zoomInByMouseTool();"  value="拉框放大"/>
   <input type="button" onClick="javascript:zoomOutByMouseTool();"  value="拉框缩小"/>
   <input type="button" onClick="javascript:moveMapByMouseTool();"  value="鼠标移图"/>
   <input type="button" onClick="javascript:registMouseAddMarker();"  value="填充信息"/>
    <input type="hidden" id="hdMapFlag" name="hdMapFlag" />
    <div id="win">
     <span>请填此处信息</span>&nbsp;&nbsp<span id="close" onclick="hide()">确定</span>
        <input type="text" id="message"/><br/>
    </div>
</body> 
</html> 

代码注释我写的很清楚。如果有什么问题,谢谢修正!~

你可能感兴趣的:(JavaScript,jquery,Ajax,css,IE)