mapabc 图吧地图在线API调用例子有截图有源码

基本信息

源码名称：mapabc 图吧地图在线API调用例子有截图有源码

源码大小：0.01M

文件格式：.rar

开发语言：js

更新时间：2013-08-06

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

Internet Explorer 8.0 版本中存在兼容问题，需要在网页 <head> 标签间增加 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 标签以保证地图折线功能正确执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> 地图测试 </title>
 <script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></script>
 <script type="text/javascript">
    var maplet=null;//地图对象
    var marker=null;//标记对象
    var le=null;//缩放级别
    var myEventListener=null;//地图click事件句柄
    function initMap()//初始化函数
    {  //转帖请注明出处 http://Qbit.cnblogs.com
       le=10; //默认缩放级别
       maplet = new Maplet("mapbar");
       //这里可以初始化地图坐标比如从数据库中读取 然后在页面上使用小脚本的形式
       //如: maplet.centerAndZoom(new MPoint(<%=维度%>, <%=经度%>),<%=缩放级别%>);
       maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地图中心点坐标并设定缩放级别       
       maplet.addControl(new MStandardControl());  
    } 
    function setp()
    {
       if (marker)//判定是否已经添加标记
       {
        alert("已经添加过标记了");
        return;
       } 
       maplet.setMode("bookmark");//设定为添加标记模式
       
       maplet.setCursorIcon("tb1.gif"); //添加鼠标跟随标签

       myEventListener = MEvent.bind(maplet, "click", this, addp); //注册click事件句柄
    } 
    //这里的参数要写全即使你不使用event
function addp(event,point){  
       if(!marker){  
       marker = new MMarker( point,  //坐标 
                        new MIcon("mark.gif", 24, 24),//标签ICO(图片,大小)
                        new MInfoWindow("蔡瑞福庄河市", "史上最佳"),//标注对象
                        new MLabel("蔡瑞福")//小标签
                        );
            marker.bEditable=true;
            marker.dragAnimation=true; 
            maplet.addOverlay(marker);//添加标注
            marker.setEditable(true); //设定标注编辑状态   
            maplet.setMode("pan"); //设定地图为拖动(正常)状态
            le= maplet.getZoomLevel(); //获取当前缩放级别
            document.getElementById("findp").style.display="block";
            document.getElementById("delp").style.display="block";
            document.getElementById("savep").style.display="block";
             MEvent.removeListener(myEventListener);//注销事件
            } 
        }
        //查找标记
        function find(){
            maplet.centerAndZoom(marker.pt, le);//定位标记
        }
        //移除所有标记
         function del(){
            //移除已经设定的坐标
             maplet.clearOverlays(true);
            location.reload(); //在重新添加的时候有点bug 我这里是直接刷新页面 来重置 
          /*document.getElementById("findp").style.display="none";
            document.getElementById("delp").style.display="none";
            document.getElementById("savep").style.display="none";
            maplet=null;
            marker=null;
            myEventListener=null; 
            initMap();*/
        }
        //提取标记数据
        function savep()
        {
            alert("当前坐标点\n经度:" marker.pt.lon "\n维度:" marker.pt.lat "\n缩放级别:" le);
        }            
   </script>                                              
  </head>                         
<body onload="initMap()"> 
<table width="501">
<tr><td><input type="button" value="添加标注" onclick="setp()"/></td>
<td><input type="button" id="findp" value="查看标记" style="display:none;" onclick="find()"/></td>
<td><input type="button" id="delp" value="删除标记" style="display:none;" onclick="del()"/></td>
<td><input type="button" id="savep" value="保存" style="display:none;" onclick="savep()"/></td>
</tr>
<tr><td colspan="4"><div id="mapbar" style="width:500px;height:300px"></div>
</td></tr>
</table>
</body>
</html>