现在的项目中要用到地图。头叫我看一下mapabc的网站，看看api什么的。api蛮简单的，自己看看没有什么问题。
http://code.mapabc.com/reference.htmlapi
地址。
我把代码贴出来吧，其中有几个功能。自己可以跑一下看一下。
其中的小弹出窗在firefox下的位置是正常的，但是在ie下不一定能正常，这方面的高手可以把我修正一下啊，呵呵。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<style type="text/css">
#win {
border: 1px red solid;
width: 153px;
height: 39px;
background-color: green;
position: absolute;
display: none;
}
body {
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图标注</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js">
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.3&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3
">
</script>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.3&key=fd9451c6128710ffbc37d9481b002ff36665d039d0b1f2d7c20b8a1fa79ec6681181632b36b152a3
">
</script>
<script type="text/javascript">
var mapObj = null;
var mapOptions=null;
$(document).ready(function() {
//设置地图初始化参数对象
mapOptions = new MMapOptions();
//设置要加载的地图的缩放级别，范围为从3到17
mapOptions.zoom = 10;
//设置中心点为上海人民广场
//121.47600173950195,31.229536674364116人民广场坐标,类型为明码坐标
mapOptions.center = new MLngLat(121.47600173950195,31.229536674364116,COORD_TYPE_OFFSET);
//设置中心点为上海 加载的地图的缩放级别
mapOptions.zoom = 13;
//工具条默认
mapOptions.toolbar = DEFAULT;
//工具条的位置
mapOptions.toolbarPos = new MPoint(0, 0);
//设置要加载的鹰眼。此属性的取值范围是DEFAULT或者BLACK
mapOptions.overviewMap = DEFAULT;
//创建地图对象
mapObj = new MMap("mapObj", mapOptions);
});
function onClick(e) {
//构造一个经纬度坐标对象
var jwd = new MLngLat(e.eventX,e.eventY);
//通过经纬度坐标及参数选项确定标注信息
var marker = new MMarker(jwd);
//获取对象编号，也是对象的唯一标识
marker.id = "marker";
//向地图添加覆盖物
mapObj.addOverlay(marker);
//描述标注显示的位置
var xy = marker.lnglat.lngX + "," + marker.lnglat.latY;
//给显示坐标的hdMapFlag添加内容
$("#hdMapFlag").val(xy);
showwin();
};
function registMouseAddMarker() {
//添加(注册)事件处理函数，当MOUSE_CLICK事件发生时，执行mapObj对象的onClick方法。
//可以向一个事件注册多个事件处理函数，在事件发生时，事件处理函数按注册时的顺序执行。
mapObj.addEventListener(mapObj,MOUSE_CLICK,onClick);
$("#mapObj").click(
function(event){
$("#win").css("top",event.screenY-138);
$("#win").css("left",event.screenX);
}
);
};
function addMarkerByMouseTool() {
//鼠标标点
var test=mapObj.setCurrentMouseTool(ADD_MARKER);
}
function drawLineByMouseTool() {
//鼠标画线
var test=mapObj.setCurrentMouseTool(DRAW_LINE);
}
function drawRectByMouseTool() {
//鼠标画矩形
var test=mapObj.setCurrentMouseTool(DRAW_RECTANGLE);
}
function drawCircleByMouseTool() {
//鼠标画圆
var test=mapObj.setCurrentMouseTool(DRAW_CIRCLE);
}
function drawPolygonByMouseTool() {
//鼠标画多边形
var test=mapObj.setCurrentMouseTool(DRAW_POLYGON);
}
function panWheelzoomByMouseTool() {
var test=mapObj.setCurrentMouseTool(PAN_WHEELZOOM);
}
function rulerByMouseTool() {
//鼠标测距离
var option={};
option.hasCircle=false;
option.hasPrompt=true;
var test=mapObj.setCurrentMouseTool(RULER,option);
}
function computeAreaByMouseTool() {
//鼠标测面积
var test=mapObj.setCurrentMouseTool(COMPUTE_AREA);
}
function zoomInByWheel() {
var test=mapObj.setCurrentMouseTool(WHEEL_ZOOM);
}
function zoomInByMouseTool(){
//拉框放大
var test=mapObj.setCurrentMouseTool(FRAME_ZOOMIN);
}
function zoomOutByMouseTool(){
//拉框缩小v2.3才有的新功能，奶奶的一开始用2.2搞死出不来
var test=mapObj.setCurrentMouseTool(FRAME_ZOOMOUT);
}
function moveMapByMouseTool(){
//鼠标移图
var test=mapObj.setCurrentMouseTool(PAN_WHEELZOOM);
}
function showwin() {
//找到窗口对应的div节点
var winNode = $("#win");
//让div对应的窗口显示出来
winNode.fadeIn("slow");
}
//隐藏弹出窗的方法
function hide() {
var message = $("#message").val();
alert(message);
var position = $("#hdMapFlag").val();
alert(position);
//找到窗口对应的节点
var winNode = $("#win");
//将窗口隐藏起来
winNode.fadeOut("slow");
//窗口隐藏的同时，也注销flash向外发送的事件。
mapObj.removeEventListener(mapObj,MOUSE_CLICK,onClick);
//此处可用ajax向服务器发送数据保存相应的坐标和次坐标处的信息。
//$.ajax({
//type: "POST",
//url: "some.php",
//data: "position="+position+"&message="+"position",
//success: function(msg){
//alert( "Data Saved: " + msg );
// }
//});
}
</script>
</head>
<body>
<div id="mapObj" class="view" style="width:700px;height:500px"></div>
<input type="button" onClick="javascript:addMarkerByMouseTool();" value="鼠标标点"/>
<input type="button" onClick="javascript:drawLineByMouseTool();" value="鼠标画线"/>
<input type="button" onClick="javascript:drawRectByMouseTool();" value="鼠标画矩形"/>
<input type="button" onClick="javascript:drawCircleByMouseTool();" value="鼠标画圆"/>
<input type="button" onClick="javascript: drawPolygonByMouseTool();" value="鼠标画多边形"/><br>
<input type="button" onClick="javascript:rulerByMouseTool();" value="鼠标测距离"/>
<input type="button" onClick="javascript:computeAreaByMouseTool();" value="鼠标测面积"/>
<input type="button" onClick="javascript:zoomInByMouseTool();" value="拉框放大"/>
<input type="button" onClick="javascript:zoomOutByMouseTool();" value="拉框缩小"/>
<input type="button" onClick="javascript:moveMapByMouseTool();" value="鼠标移图"/>
<input type="button" onClick="javascript:registMouseAddMarker();" value="填充信息"/>
<input type="hidden" id="hdMapFlag" name="hdMapFlag" />
<div id="win">
<span>请填此处信息</span>  <span id="close" onclick="hide()">确定</span>
<input type="text" id="message"/><br/>
</div>
</body>
</html>
代码注释我写的很清楚。如果有什么问题，谢谢修正！~
分享到：
相关推荐
MapABC地图免费使用手册，可以支持地图历史轨迹回放，实时跟踪车辆示例讲解
MapABC的基础使用 多点添加 地图交互 工具条样式修改 弹出信息泡泡等
MapABC地图使用手册,MapABC地图使用手册,MapABC地图使用手册,MapABC地图使用手册,MapABC地图使用手册
MapABC API 地图应用开发文档 开发文档
MapABC地图API介绍幻灯片。介绍了MapABC地图API的组成，简单使用，应用案例等。
MapABC_API_JavaScript具有mapabc地图javascript版本的所有的api，为开发提供的方便。希望对各位有用！
MapABC地图API JavaScript版
mapabc文档--方法，函数，使用方法
1.了解MapABC地图 ...6.如何使用MapABC Ajax API（Ajax地图展现） ？ 7.如何使用MapABC Ajax API（Ajax地图展现）关键字搜索？ 8.使用MapABC Ajax API（Ajax地图展现）积累 9.总结开发过程中出现的问题以及解决方法
对于初学者而言很实用，第一部分，如何获取MapABC API 密钥。 第二部分，什么时签名证书。 第三部分，如何获取一个 API 密钥。 第四部分，如何在 Mapview 布局（LayOut）文件中添加 userAgent 属性。 第五部分，...
一步步教你MapABC地图在android平台上的使用。
mapabc API 支持地图定位，设置坐标范围等
MapABC-API（Ajax） 示例整理，有意者请下载使用！
2008年2月25日，中国知名电子地图服务商Mapabc正式发布地图API（http://code.mapabc.com），为日渐升温的中国电子地图及本地搜索市场开辟了新蓝海。
mapabc 文档 MapABC 静态地图 API采用javaScript面向对象方式，对Mapabc POI 查询出的点生成静态图片以最快方式显示给用户。
花了很长时间找到的MapABC Flex API 2.4用户手册资料，可方便学习。
高德MapABC_API_for_Android参考手册
MAPABC电子地图代码，内有三个地图代码文件，供有需要的朋友下载。
花了一星期整理的MapABC Flex API 示例代码 用户手册 开发包等资料，可方便学习。
MAPABC_FLEX_API_WEB_V2.4