Ajax地图开发快速入门   ||    Flex地图开发快速入门
欢迎您来到快速入门了解使用天地图·义乌 地图API来搭建您所需的平台。您可以按照以下所介绍的步骤进行。如需要更多帮助请查阅参考手册或者联系我们的技术人员寻求支持。下面就请按照页面及文档所提供的方法开始您的天地图·义乌地图开发之旅吧!

        天地图·义乌 JSAPI二次开发接口库提供了用于实现地图显示、地图操作、地图控件、要素查找、统计分析、距离/面积量测、信息标注、信息窗口、图形绘制等功能的共计89大类、486个API函数接口。
使用天地图·义乌 JSAPI工具包进行Web应用系统开发的方法:
1.创建应用系统页面,在页面的头部引用天地图·义乌 JSAPI二次开发接口库:
<script language="JavaScript"  type="text/javascript"  src="http://127.0.0.1:8719/NewMapServer/API4JS/lib/NewMap.js" />
2.在页面中创建用于显示地图的容器
<div id="viewport" style="width:500px;height:500px;" ></div>
3.在页面<head>标签中添加地图初始化函数
<script  type="text/javascript">
   var map;
   function init(){
       //创建地图对象
      map = new NMap("viewport");
       //设定地图范围
      var extent = new NBounds(50.0622,0.8957,147.4427,56.1607);
      map.maxExtent = extent;
       //设置地图显示比例尺
      map.scales = [147914678,73957339,36978669,18489335,9244667,4622334];
       //初始化地图图层
      var layer = new NCacheLayer( 'testLayer','http://127.0.0.1:8719/cache/customDisk/china_400w/', {layers: 'image', format: 'png', isBasicLayer:true});
       //将图层数据加入到地图中
      map.addLayer(layer);
       //添加导航工具条
      map.addControl(new NPanZoomBarControl());
       //添加地图坐标工具
      map.addControl(new NCursorPositionControl());
      //缩放地图至最大范围
      map.zoomToMaxExtent();
   }
</script>
4.在页面<body>标签中添加地图初始化函数的引用
<body onload="init()">
5.页面完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript"  type="text/javascript"  src="http://127.0.0.1:8719/NewMapServer/API4JS/lib/NewMap.js" />
<script  type="text/javascript">
   var map;
   function init(){
       //创建地图对象
      map = new NMap("viewport");
       //设定地图范围
      var extent = new NBounds(50.0622,0.8957,147.4427,56.1607);
      map.maxExtent = extent;
       //设置地图显示比例尺
      map.scales = [147914678,73957339,36978669,18489335,9244667,4622334];
       //初始化地图图层
      var layer = new NCacheLayer( 'testLayer','http://127.0.0.1:8719/cache/customDisk/china_400w/', {layers: 'image', format: 'png', isBasicLayer:true});
       //将图层数据加入到地图中
      map.addLayer(layer);
       //添加导航工具条
      map.addControl(new NPanZoomBarControl());
       //添加地图坐标工具
      map.addControl(new NCursorPositionControl());
      //缩放地图至最大范围
      map.zoomToMaxExtent();
   }
</script>
</head>
<body onload="init()">
<div id="viewport" style="width:500px;height:500px;" ></div>
</body>
</html>
6.通过浏览器访问页面,截图如下: