电子地图--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();

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


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

你可能感兴趣的:(html,jsp,css,struts)