`

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

CSSStrutsJSPHTML 
阅读更多
   出于项目的需要，还要继续对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();

//设置地图组件的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);
}

以上就是全部的代码，后面会把这些坐标存储至数据库中，下次用户看的时候就可以直接显示信息啦。
分享到：
| 电子地图－－MapABC研究（二）地图编辑
评论
4 楼 linuxgao 2008-11-06  
楼主就在做工商局市场主体的gis系统吗？
3 楼 hanfeng870223 2008-11-06  
lz非常感谢啊 ，最近我也在项目是要用的地图，呵呵，多谢你的资料哦
2 楼 yongjun_feng 2008-10-07  
好资料，顶起来
1 楼 piaochunzhi 2008-08-28  
赞一个！！！！！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics