电子地图--MapABC研究(一)
MapABC是由北京图盟科技有限公司提供的,为实现互联网和移动终端互动地图服务提供了最为有效的解决方案,Mapabc基于此系统构建的基础地图服务运营平台,可不间断地、快速地应对大并发访问请求,完全满足电信运营商和搜索引擎的苛刻性能指标。
Mapabc已经成为中国市场占有率最高、平台响应速率最快、地图数据最丰富的基础地图服务提供商。
要使用MapABC API就必须要有MapABC的帐号,并申请MapABC的Key,申请页面要求输入您的网址,这个网址即可以是真实的网址,也可以是自己本地的,比如说可以是http://localhost这样的(刚开始的时候也以为一定要是域名才可以使用的,这样在开发的时候就很方便)。
申请完成后,得到Key就可以在本地使用啦。
下面是一个简单的例子:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <!--必须导入的,后面的Key值即是你申请得到的Key-->
- <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>
- <!--使用组件API要导入-->
- <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: 500px; height: 400px"></div>
- <script type="text/javascript">
-
- var mapOptions = new MMapOptions();
-
-
- mapOptions.mapId = "fmptest";
-
-
- mapOptions.zoomLevel = 15;
-
-
-
-
- var mapObj = new MMap("mapObj", mapOptions);
-
-
-
-
-
- mapObj.showFullScreenButton(true);
-
-
- var mapComponent = new MapComponent(mapObj);
-
-
- mapComponent.setMapCityCenter("0371");
- </script>
-
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--必须导入的,后面的Key值即是你申请得到的Key-->
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=f6c97a7f64063cfee7c2dc2157847204d4dbf09385481afc98c532e3a8066ae5f1a785336235b092"></script>
<!--使用组件API要导入-->
<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: 500px; height: 400px"></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);
//设置是否使用鹰眼
//mapObj.showNavigator(false);
//设置是否显示全屏按钮
mapObj.showFullScreenButton(true);
//创建组件API对象
var mapComponent = new MapComponent(mapObj);
//设置城市中心为郑州,建议使用此形式,可以不用记大量的坐标
mapComponent.setMapCityCenter("0371");
</script>
</body>
</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:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <%@ page language="java" pageEncoding="utf-8"%>
- <%@ taglib prefix="s" uri="/struts-tags"%>
- <%
- String path = request.getContextPath();
- %>
-
- <html>
- <head>
- <title>企业用户基本信息</title>
- <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>
- <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/mapcomponent.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>
- <link href="<%=path %>/common/style.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div id="inforContent">
- <div id="inforMsg">
- <s:form action="/user/enRegister.action">
- <table align="center">
- <tr>
- <th colspan="2" align="center">企业用户信息填写</th>
- </tr>
- <tr>
- <td>企业名称:</td>
- <td><input type="text" name="enterprise"></td>
- </tr>
- <tr>
- <td>企业电话:</td>
- <td><input type="text" name="tel"></td>
- </tr>
- <tr>
- <td>企业地址:</td>
- <td><input type="text" name="address"></td>
- </tr>
- <tr>
- <td>企业描述:</td>
- <td><textarea rows="5" cols="15" name="description"></textarea></td>
- </tr>
- <tr>
- <td>经营范围:</td>
- <td><input name="dealInArea" type="checkbox" value="餐饮">餐饮
- <input name="dealInArea" type="checkbox" value="娱乐">娱乐
- <input name="dealInArea" type="checkbox" value="休闲">休闲 </td>
- </tr>
- <tr>
- <td>纬度坐标:</td>
- <td>
- <input type="text" id="enLat" name="enLat" disabled="disabled">
- </td>
- </tr>
- <tr>
- <td>经度坐标:</td>
- <td>
- <input type="text" id="enLng" name="enLng" disabled="disabled">
- </td>
- </tr>
- <tr>
- <td colspan="2" align="center">
- <input type="submit" value="提交">
- <input type="reset" value="重写">
- </td>
- </tr>
- </table>
- </s:form>
- </div>
- <div id="mapControl">
- <div id="mapMsg"> 地图显示区域 </div>
- <div id="control">
- <input type="button" value="标注所在地" onclick="beginDrawPointOnMap();">
- </div>
- </div>
- <!--注意加载位置,一定要在DIV声明之后-->
- <script type="text/javascript" src="<%=path%>/common/map.js"></script>
- </div>
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>企业用户基本信息</title>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>
<script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/mapcomponent.js?key=a12d3fe7926bb4d1e88a902e53a13c4e0cd06cdf83c3e5925aed194ee24cca1ee1168fc5032b616a"></script>
<link href="<%=path %>/common/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="inforContent">
<div id="inforMsg">
<s:form action="/user/enRegister.action">
<table align="center">
<tr>
<th colspan="2" align="center">企业用户信息填写</th>
</tr>
<tr>
<td>企业名称:</td>
<td><input type="text" name="enterprise"></td>
</tr>
<tr>
<td>企业电话:</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td>企业地址:</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>企业描述:</td>
<td><textarea rows="5" cols="15" name="description"></textarea></td>
</tr>
<tr>
<td>经营范围:</td>
<td><input name="dealInArea" type="checkbox" value="餐饮">餐饮
<input name="dealInArea" type="checkbox" value="娱乐">娱乐
<input name="dealInArea" type="checkbox" value="休闲">休闲 </td>
</tr>
<tr>
<td>纬度坐标:</td>
<td>
<input type="text" id="enLat" name="enLat" disabled="disabled">
</td>
</tr>
<tr>
<td>经度坐标:</td>
<td>
<input type="text" id="enLng" name="enLng" disabled="disabled">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重写">
</td>
</tr>
</table>
</s:form>
</div>
<div id="mapControl">
<div id="mapMsg"> 地图显示区域 </div>
<div id="control">
<input type="button" value="标注所在地" onclick="beginDrawPointOnMap();">
</div>
</div>
<!--注意加载位置,一定要在DIV声明之后-->
<script type="text/javascript" src="<%=path%>/common/map.js"></script>
</div>
</body>
</html>
style.css是样式文件,很简单的:
- @charset "utf-8";
-
-
- #inforContent{
- background:#999999;
- width:90%;
- }
- #inforMsg{
- width:40%;
- float:left;
- }
- #mapControl{
- width:60%;
- height:400px;
- float:left;
- }
- #mapMsg{
- width:100%;
- height:350px;
- float:left;
- }
- #control{
- width:100%;
- height:50px;
- float:left;
- }
@charset "utf-8";
/* CSS Document */
#inforContent{
background:#999999;
width:90%;
}
#inforMsg{
width:40%;
float:left;
}
#mapControl{
width:60%;
height:400px;
float:left;
}
#mapMsg{
width:100%;
height:350px;
float:left;
}
#control{
width:100%;
height:50px;
float:left;
}
具体的地图操作位于map.js文件中:
-
- var mapOptions = new MMapOptions();
-
-
- mapOptions.mapId = "fmptest";
-
-
- mapOptions.zoomLevel = 15;
-
-
- var mapObj = new MMap("mapMsg", mapOptions);
-
-
- var mapComponent = new MapComponent(mapObj);
-
-
- mapComponent.setMapCityCenter("0371");
-
-
- mapObj.addEventListener(MMap.EVENT_POINT_DRAWN,getCenterLatLng);
-
-
- function getCenterLatLng(event){
- var center = mapObj.getCenterByLatLng();
-
- document.getElementById("enLat").value=center.lat;
-
- document.getElementById("enLng").value=center.lng;
-
- mapObj.quitMouseDraw();
- }
-
-
- function fillPointContent() {
- var defaultPointStyle = new MStyle();
- defaultPointStyle.canBeTop = false;
- return defaultPointStyle;
- }
-
- function beginDrawPointOnMap()
- {
- var pointStyle = fillPointContent();
- pointStyle.textContent = "鼠标画点";
- mapObj.beginDrawPointOnMap(pointStyle);
- }
//创建一个MmapOptions对象
var mapOptions = new MMapOptions();
//设置地图组件的Id
mapOptions.mapId = "fmptest";
//设置地图的初始Zoom值
mapOptions.zoomLevel = 15;
//创建地图对象
var mapObj = new MMap("mapMsg", mapOptions);
//使用组件API
var mapComponent = new MapComponent(mapObj);
//设置城市中心点
mapComponent.setMapCityCenter("0371");
//企业用户标注自己位置事件
mapObj.addEventListener(MMap.EVENT_POINT_DRAWN,getCenterLatLng);
//得到标点的经纬度坐标
function getCenterLatLng(event){
var center = mapObj.getCenterByLatLng();
//对enLat文本进行赋值
document.getElementById("enLat").value=center.lat;
//对enLng文本进行赋值
document.getElementById("enLng").value=center.lng;
//画点结束后,结束画点操作
mapObj.quitMouseDraw();
}
//对进入编辑模式下的tip进行填充内容
function fillPointContent() {
var defaultPointStyle = new MStyle();
defaultPointStyle.canBeTop = false;
return defaultPointStyle;
}
//开始在地图上画点
function beginDrawPointOnMap()
{
var pointStyle = fillPointContent();
pointStyle.textContent = "鼠标画点";
mapObj.beginDrawPointOnMap(pointStyle);
}
以上就是全部的代码,后面会把这些坐标存储至数据库中,下次用户看的时候就可以直接显示信息。