电子地图--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>
style.css是样式文件,很简单的:
@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文件中:
//创建一个MmapOptions对象var mapOptions = new MMapOptions();//设置地图组件的IdmapOptions.mapId = "fmptest";//设置地图的初始Zoom值mapOptions.zoomLevel = 15;//创建地图对象var mapObj = new MMap("mapMsg", mapOptions);//使用组件APIvar 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);}以上就是全部的代码,后面会把这些坐标存储至数据库中,下次用户看的时候就可以直接显示信息啦。 1 楼 piaochunzhi 2008-08-28 赞一个!!!!!! 2 楼 yongjun_feng 2008-10-07 好资料,顶起来 3 楼 hanfeng870223 2008-11-06 lz非常感谢啊 ,最近我也在项目是要用的地图,呵呵,多谢你的资料哦 4 楼 linuxgao 2008-11-06 楼主就在做工商局市场主体的gis系统吗?