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

最新推荐文章于 2024-10-18 19:35:06 发布

jackzhangyunjie

最新推荐文章于 2024-10-18 19:35:06 发布

阅读量127

点赞数

分类专栏：企业应用文章标签： json 算法企业应用 Ajax 生活

企业应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

　　这是电子地图研究的第二部分。
　　普通用户使用地图无非就是查询出行路线、公交线路查询、日常生活查询，但对于商家而言就要多一种功能，那就是对自己位置的标注，以及内容的描述。
　　本次要研究的就是对商家有用的地图的编辑功能。
　　下面是个具体的例子：
<!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>
如果结合数据库存储的话，就可以把商家描述的信息保存对数据库中，以备下次使用。