百度地图API学习2----BMapLib.RichMarker

本文档展示了如何使用百度地图API创建并操作RichMarker,包括设置初始位置、添加事件监听器以及修改Marker的样式和交互行为。通过示例代码,你可以了解如何添加自定义HTML内容、设置拖拽功能以及响应不同鼠标事件。

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js "></script>
<div id="container"></div> 

<script type="text/javascript"> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(121.479048,31.240008);  // 创建点坐标  
map.centerAndZoom(point, 11);// 初始化地图,设置中心点坐标和地图级别  

map.enableScrollWheelZoom();// 设置地图可缩放大小

//BMapLib.RichMarker(content, position, RichMarkerOptions)//设置标注的方法 如下所示

var htm = "<div style='background:#E7F0F5;color:#0082CB;border:1px solid #333;width:145px;'>"
              +     "上海意逗信息技术有限公司"
              +     "<img src='http://www.eadou.cn/statics/index/images/logo.png' border='0' />"
              + "</div>";
var myRM= new BMapLib.RichMarker(htm, point,{"anchor" : new BMap.Size(-72, -84),"enableDragging" : true});

//{"anchor" : {BMap.Size} Marker的的位置偏移值, "enableDragging" : {Boolean} 是否启用拖拽,默认为false}

myRM.disableDragging();//设置Marker不能拖拽 否则是enableDragging();

map.addOverlay(myRM);// 设置显示覆盖物标志

//map.removeOverlay(myRM);//map.removeOverlay方法移除覆盖物

myRM.addEventListener("onclick", function(e) { 
   alert(e.type); //点击Marker时,派发事件的接口 --{"target : {BMap.Overlay} 触发事件的元素, "type:{String} 事件类型}
});

myRM.addEventListener("ondblclick", function(e) { 
    alert(e.point);  //双击Marker时,派发事件的接口 target触发事件的元素 / type事件类型 / point鼠标的物理坐标 / pixel鼠标的像素坐标
});

myRM.addEventListener("ondragend", function(e) { 
    alert(e.type);  //拖拽Marker结束时,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("ondragstart", function(e) { 
    alert(e.type);  //拖拽Marker开始时,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("ondragging", function(e) { 
    alert(e.type);  //拖拽Marker的过程中,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("onmousedown", function(e) { 
    alert(e.type);  //在Marker上按下鼠标时,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("onmouseout", function(e) { 
    alert(e.type);  //鼠标移出Marker时,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("onmouseover", function(e) { 
    alert(e.type);  //鼠标移到Marker上时,派发事件的接口target 、type、point、pixel
});

myRM.addEventListener("onmouseup", function(e) { 
    alert(e.type);  //在Marker上弹起鼠标时,派发事件的接口target 、type、point、pixel
});



/**********************************

myRM.getContent();//获取当前maker的内容

myRM.getHeight();//获取当前maker的高度

myRM.getPosition();//获取当前maker的位置

myRM.getwidth();//获取当前maker的宽度

myRM.isDraggable(); //获取当前maker能否被拖曳的状态  true/false;

myRM.setAnchor(new BMap.Size(-72, -84));//设置Marker的偏移量

myRM.setContent("ssssssssss");//设置Marker的内容
myRM.setHeight(height);//设置Marker的高度
myRM.setWidth(width);//设置Marker的宽度
myRM.setPosition(new BMap.Point(116.30816, 40.056863));//设置Marker的位置
*/
</script> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值