龙v战

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
电子地图－MapABC研究

电子地图－－MapABC研究（一）

　　MapABC是由北京图盟科技有限公司提供的，为实现互联网和移动终端互动地图服务提供了最为有效的解决方案，Mapabc基于此系统构建的基础地图服务运营平台，可不间断地、快速地应对大并发访问请求，完全满足电信运营商和搜索引擎的苛刻性能指标。
　　Mapabc已经成为中国市场占有率最高、平台响应速率最快、地图数据最丰富的基础地图服务提供商。
　　要使用MapABC　API就必须要有MapABC的帐号，并申请MapABC的Key，申请页面要求输入您的网址，这个网址即可以是真实的网址，也可以是自己本地的，比如说可以是http://localhost这样的（刚开始的时候也以为一定要是域名才可以使用的，这样在开发的时候就很方便）。
　　申请完成后，得到Key就可以在本地使用啦。
　　下面是一个简单的例子：

Java代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>   
  3. <head>   
  4. <!--必须导入的,后面的Key值即是你申请得到的Key-->   
  5. <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>   
  6. <!--使用组件API要导入-->   
  7. <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/mapcomponent.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>   
  8. </head>   
  9. <body>   
  10. <div id="mapObj" style="width: 500px; height: 400px"></div>   
  11. <script type="text/javascript">   
  12. //创建一个MmapOptions对象   
  13. var mapOptions = new MMapOptions();   
  14.   
  15. //设置地图组件的Id   
  16. mapOptions.mapId = "fmptest";   
  17.   
  18. //设置地图的初始Zoom值   
  19. mapOptions.zoomLevel = 15;   
  20. //设置地图的中心点，参数第一个代表纬度、第二个代表经度，已经太经过加密   
  21. //mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");   
  22.   
  23. //创建地图对象   
  24. var mapObj = new MMap("mapObj", mapOptions);   
  25.   
  26. //设置是否使用鹰眼   
  27. //mapObj.showNavigator(false);   
  28.   
  29. //设置是否显示全屏按钮   
  30. mapObj.showFullScreenButton(true);   
  31.   
  32. //创建组件API对象   
  33. var mapComponent = new MapComponent(mapObj);   
  34.   
  35. //设置城市中心为郑州，建议使用此形式，可以不用记大量的坐标   
  36. mapComponent.setMapCityCenter("0371");   
  37. </script>   
  38.   
  39. </body>   
  40. </html>  


感兴趣的朋友也可以去MapABC的官网上去看他的进阶教程。
哦，对啦，还有一个关于城市坐标的文件，我已经放在附件里啦，大家可以下下来看看，是城市名、城市的经纬度和城市代码，朋友们可以自己进行修改城市的区域代码，也可以通过城市坐标得到城市中心。

附件：city.rar

 

 

电子地图－－MapABC研究（二）地图编辑

这是电子地图研究的第二部分。
　　普通用户使用地图无非就是查询出行路线、公交线路查询、日常生活查询，但对于商家而言就要多一种功能，那就是对自己位置的标注，以及内容的描述。
　　本次要研究的就是对商家有用的地图的编辑功能。
　　下面是个具体的例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/mapcomponent.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>
</head>
<body>
<div id="mapObj" style="width: 700px; height: 500px"></div>
<script type="text/javascript">

//创建一个MmapOptions对象
var mapOptions = new MMapOptions();

//设置地图组件的Id
mapOptions.mapId = "fmptest";

//设置地图的初始Zoom值
mapOptions.zoomLevel = 15;

//设置地图的中心点
//mapOptions.center = new MLatLng("LQGXRMMVKHDLL", "JIOMSTNTPOLHLH");

//创建地图对象
var mapObj = new MMap("mapObj", mapOptions);

//使用组件API
var mapComponent = new MapComponent(mapObj);

//设置城市中心点
mapComponent.setMapCityCenter("0371");

//注册导出地图数据事件 后执行 onexportMapData 方法
mapObj.addEventListener(MMap.EVENT_EXPORT_MAP_DATA, onexportMapData);


function editMode(){
//设置地图为编辑模式
mapObj.setMapMode(MMapMode.EDIT);
}

//编辑模式下 添加点
function createPoint(){
//MStyle是一个图样式类
var defaultPointStyle = new MStyle();
defaultPointStyle.canBeTop = true;
mapObj.addGeometry(MGeometry.TYPE_POINT, defaultPointStyle);
}

//导出地图数据事件处理函数
function onexportMapData(event){
alert(event.args);
/**
event.type=”onExportMapData”
event.args=mapId,jsonString
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
jsonString：整个地图的几何对象的JSON 字符串。
**/
}
　
//导出点的数据方法
function exportMapData(){
mapObj.exportMapData();
}

//导出地图数据事件处理函数
function onexportMapData(event){
alert(event.args);
/**
event.type=”onExportMapData”
event.args=mapId,jsonString
args 的值是一个以“,”分隔的字符串，其中：
mapId：地图的Id
jsonString：整个地图的几何对象的JSON 字符串。
**/
}

</script>
操作方法: 先在 地图上左键标点 并填入标题 内容点击确定. 然后点击导出数据<br /><br />


<input type="button" onClick="javascript:editMode();" value="进入编辑模式" />
<input type="button" onClick="javascript:createPoint();" value="添加点" />
<input type="button" onClick="javascript:exportMapData();" value="导出数据" />

</body>
</html>
如果结合数据库存储的话，就可以把商家描述的信息保存对数据库中，以备下次使用。

 

 

 

电子地图－－MapABC研究（三）为地图上添加点并得到中心坐标

出于项目的需要，还要继续对MapABC进行研究，昨天看了下地图上加点，结合项目实际写了个例子，用Struts2结合MapABC实现。
　　有一点请注意：使用Mapabc的话，页面编码必须是utf-8。
　　下面是具体的实现页面enInfor.jsp:

Java代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <%@ page language="java" pageEncoding="utf-8"%>   
  3. <%@ taglib prefix="s" uri="/struts-tags"%>   
  4. <%   
  5. String path = request.getContextPath();   
  6. %>   
  7.   
  8. <html>   
  9. <head>   
  10. <title>企业用户基本信息</title>   
  11. <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>   
  12. <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/mapcomponent.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>   
  13. <link href="<%=path %>/common/style.css" rel="stylesheet" type="text/css" />   
  14. </head>   
  15. <body>   
  16. <div id="inforContent">   
  17.   <div id="inforMsg">   
  18.     <s:form action="/user/enRegister.action">   
  19.       <table align="center">   
  20.         <tr>   
  21.           <th colspan="2" align="center">企业用户信息填写</th>   
  22.         </tr>   
  23.         <tr>   
  24.           <td>企业名称：</td>   
  25.           <td><input type="text" name="enterprise"></td>   
  26.         </tr>   
  27.         <tr>   
  28.           <td>企业电话：</td>   
  29.           <td><input type="text" name="tel"></td>   
  30.         </tr>   
  31.         <tr>   
  32.           <td>企业地址：</td>   
  33.           <td><input type="text" name="address"></td>   
  34.         </tr>   
  35.         <tr>   
  36.           <td>企业描述：</td>   
  37.           <td><textarea rows="5" cols="15" name="description"></textarea></td>   
  38.         </tr>   
  39.         <tr>   
  40.           <td>经营范围：</td>   
  41.           <td><input name="dealInArea" type="checkbox" value="餐饮">餐饮   
  42.             <input name="dealInArea" type="checkbox" value="娱乐">娱乐   
  43.           <input name="dealInArea" type="checkbox" value="休闲">休闲          </td>   
  44.         </tr>   
  45.         <tr>   
  46.             <td>纬度坐标：</td>   
  47.             <td>   
  48.                 <input type="text" id="enLat" name="enLat" disabled="disabled">   
  49.             </td>   
  50.         </tr>   
  51.         <tr>   
  52.             <td>经度坐标：</td>   
  53.             <td>   
  54.                 <input type="text" id="enLng" name="enLng" disabled="disabled">   
  55.             </td>   
  56.         </tr>   
  57.         <tr>   
  58.             <td colspan="2" align="center">   
  59.                 <input type="submit" value="提交">   
  60.                 <input type="reset" value="重写">   
  61.             </td>   
  62.         </tr>   
  63.       </table>   
  64.     </s:form>   
  65.   </div>   
  66.   <div id="mapControl">   
  67.     <div id="mapMsg"> 地图显示区域 </div>   
  68.     <div id="control">   
  69.         <input type="button" value="标注所在地" onclick="beginDrawPointOnMap();">   
  70.     </div>   
  71.   </div>   
  72.   <!--注意加载位置，一定要在DIV声明之后-->   
  73.   <script type="text/javascript" src="<%=path%>/common/map.js"></script>   
  74. </div>   
  75. </body>   
  76. </html>  


style.css是样式文件，很简单的：

Java代码 复制代码
  1. @charset "utf-8";   
  2. /* CSS Document */  
  3.   
  4. #inforContent{   
  5.     background:#999999;   
  6.     width:90%;   
  7. }   
  8. #inforMsg{   
  9.    width:40%;   
  10.    float:left;   
  11. }   
  12. #mapControl{   
  13.     width:60%;   
  14.     height:400px;   
  15.     float:left;   
  16. }   
  17. #mapMsg{   
  18.    width:100%;   
  19.    height:350px;   
  20.    float:left;   
  21. }   
  22. #control{   
  23.     width:100%;   
  24.     height:50px;   
  25.     float:left;   
  26. }  


具体的地图操作位于map.js文件中：

Java代码 复制代码
  1. //创建一个MmapOptions对象   
  2. var mapOptions = new MMapOptions();   
  3.   
  4. //设置地图组件的Id   
  5. mapOptions.mapId = "fmptest";   
  6.   
  7. //设置地图的初始Zoom值   
  8. mapOptions.zoomLevel = 15;   
  9.   
  10. //创建地图对象   
  11. var mapObj = new MMap("mapMsg", mapOptions);   
  12.   
  13. //使用组件API   
  14. var mapComponent = new MapComponent(mapObj);   
  15.   
  16. //设置城市中心点   
  17. mapComponent.setMapCityCenter("0371");   
  18.   
  19. //企业用户标注自己位置事件   
  20. mapObj.addEventListener(MMap.EVENT_POINT_DRAWN,getCenterLatLng);   
  21.   
  22. //得到标点的经纬度坐标   
  23. function getCenterLatLng(event){   
  24.     var center = mapObj.getCenterByLatLng();   
  25.          //对enLat文本进行赋值   
  26.     document.getElementById("enLat").value=center.lat;   
  27. 　　　　　//对enLng文本进行赋值   
  28.     document.getElementById("enLng").value=center.lng;   
  29.          //画点结束后，结束画点操作   
  30.     mapObj.quitMouseDraw();   
  31. }   
  32.   
  33. //对进入编辑模式下的tip进行填充内容   
  34. function fillPointContent() {   
  35.     var defaultPointStyle = new MStyle();   
  36.     defaultPointStyle.canBeTop = false;   
  37.     return defaultPointStyle;   
  38. }   
  39. //开始在地图上画点   
  40. function beginDrawPointOnMap()   
  41. {   
  42.     var pointStyle = fillPointContent();   
  43.     pointStyle.textContent = "鼠标画点";   
  44.     mapObj.beginDrawPointOnMap(pointStyle);   
  45. }  


以上就是全部的代码，后面会把这些坐标存储至数据库中，下次用户看的时候就可以直接显示信息。

posted on 2010-03-23 09:36  龙v战  阅读(2018)  评论(0)  编辑  收藏  举报