实例介绍
【实例简介】
Internet Explorer 8.0 版本中存在兼容问题，需要在网页 <head> 标签间增加 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 标签以保证地图折线功能正确执行。
【核心代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 地图测试 </title>
<script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></script>
<script type="text/javascript">
var maplet=null;//地图对象
var marker=null;//标记对象
var le=null;//缩放级别
var myEventListener=null;//地图click事件句柄
function initMap()//初始化函数
{ //转帖请注明出处 http://Qbit.cnblogs.com
le=10; //默认缩放级别
maplet = new Maplet("mapbar");
//这里可以初始化地图坐标比如从数据库中读取 然后在页面上使用小脚本的形式
//如: maplet.centerAndZoom(new MPoint(<%=维度%>, <%=经度%>),<%=缩放级别%>);
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地图中心点坐标并设定缩放级别
maplet.addControl(new MStandardControl());
}
function setp()
{
if (marker)//判定是否已经添加标记
{
alert("已经添加过标记了");
return;
}
maplet.setMode("bookmark");//设定为添加标记模式
maplet.setCursorIcon("tb1.gif"); //添加鼠标跟随标签
myEventListener = MEvent.bind(maplet, "click", this, addp); //注册click事件句柄
}
//这里的参数要写全即使你不使用event
function addp(event,point){
if(!marker){
marker = new MMarker( point, //坐标
new MIcon("mark.gif", 24, 24),//标签ICO(图片,大小)
new MInfoWindow("蔡瑞福庄河市", "史上最佳"),//标注对象
new MLabel("蔡瑞福")//小标签
);
marker.bEditable=true;
marker.dragAnimation=true;
maplet.addOverlay(marker);//添加标注
marker.setEditable(true); //设定标注编辑状态
maplet.setMode("pan"); //设定地图为拖动(正常)状态
le= maplet.getZoomLevel(); //获取当前缩放级别
document.getElementById("findp").style.display="block";
document.getElementById("delp").style.display="block";
document.getElementById("savep").style.display="block";
MEvent.removeListener(myEventListener);//注销事件
}
}
//查找标记
function find(){
maplet.centerAndZoom(marker.pt, le);//定位标记
}
//移除所有标记
function del(){
//移除已经设定的坐标
maplet.clearOverlays(true);
location.reload(); //在重新添加的时候有点bug 我这里是直接刷新页面 来重置
/*document.getElementById("findp").style.display="none";
document.getElementById("delp").style.display="none";
document.getElementById("savep").style.display="none";
maplet=null;
marker=null;
myEventListener=null;
initMap();*/
}
//提取标记数据
function savep()
{
alert("当前坐标点\n经度:" marker.pt.lon "\n维度:" marker.pt.lat "\n缩放级别:" le);
}
</script>
</head>
<body onload="initMap()">
<table width="501">
<tr><td><input type="button" value="添加标注" onclick="setp()"/></td>
<td><input type="button" id="findp" value="查看标记" style="display:none;" onclick="find()"/></td>
<td><input type="button" id="delp" value="删除标记" style="display:none;" onclick="del()"/></td>
<td><input type="button" id="savep" value="保存" style="display:none;" onclick="savep()"/></td>
</tr>
<tr><td colspan="4"><div id="mapbar" style="width:500px;height:300px"></div>
</td></tr>
</table>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论