现在的项目中要用到地图。头叫我看一下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>
代码注释我写的很清楚。如果有什么问题,谢谢修正!~