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

最新推荐文章于 2022-08-31 10:25:52 发布

最新推荐文章于 2022-08-31 10:25:52 发布 · 308 阅读

文章标签：

#CSS #Struts #JSP #HTML

企业应用专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Struts2和MapABC API实现的企业用户信息录入与地图标注的应用案例。通过具体代码示例展示了如何获取用户输入的企业信息，并在地图上标注企业位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出于项目的需要，还要继续对MapABC进行研究，昨天看了下地图上加点，结合项目实际写了个例子，用Struts2结合MapABC实现。
　　[color=red]有一点请注意：使用Mapabc的话，页面编码必须是utf-8。[/color]
　　下面是具体的实现页面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);
}