mapabc的使用

最新推荐文章于 2012-09-20 09:34:53 发布

最新推荐文章于 2012-09-20 09:34:53 发布 · 612 阅读

文章标签：

#JavaScript #CSS #Ajax #jQuery #IE #ViewUI

其他专栏收录该内容

4 篇文章

订阅专栏

现在的项目中要用到地图。头叫我看一下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<span id="close" onclick="hide()">确定</span>
        <input type="text" id="message"/><br/>
    </div>
</body>
</html>