案例:
设置覆盖物+标注提示文字:
<script>
// 百度地图API功能
var map = new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP });
var point = new BMap.Point(120.55294, 41.665515); // 创建Map实例
map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
/*添加标注++++++开始*/
// 创建标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 将标注添加到地图中,配合覆盖物实现文字提示
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-20)});
marker.setLabel(label);
/*添加标注++++++结束*/
/*添加覆盖物++++++开始*/
var circle = new BMap.Circle(new BMap.Point(120.55294, 41.665515),15,{
fillColor: 'red', //设置圆形的填充颜色为红色
fillOpacity: 0.5, //填充色透明度
strokeColor:"blue", //设置圆形的边框颜色为蓝色
strokeWeight:2, //设置圆形边框的宽度为 2 像素
strokeOpacity:0.1 //设置圆形边框的透明度为 0.1(即 10%透明
});
//创建圆
map.addOverlay(circle);
//给覆盖物添加事件
circle.addEventListener("click",attribute);
function attribute(){
var p = circle.point; //获取marker的位置
window.alert("marker的位置是" + p.lng + "," + p.lat);
}
/*添加覆盖物++++++结束*/
map.setCurrentCity("朝阳"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);
</script>
设置标注的跳动动画的效果和重新设置标注提示的内容,给标注添加点击事件:
<script>
// 百度地图API功能
var map = new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP });
var point = new BMap.Point(120.55294, 41.665515); // 创建Map实例
map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
/*添加标注++++++开始*/
//自定义marker---Size为图片大小,anchor为偏移量
// 创建标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 将标注添加到地图中,配合覆盖物实现文字提示
var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(-18,-20)});
marker.setLabel(label);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.addEventListener("click", function() {
// 在这里添加点击事件的处理逻辑
alert("你点击了标记!");
});
function ssa(){
label.setContent("新的文字标注内容");
alert("sjdfk");
// 清除动画效果
marker.setAnimation(null);
}
setTimeout(ssa,5000)
/*添加标注++++++结束*/
/*添加覆盖物++++++开始*/
var circle = new BMap.Circle(new BMap.Point(120.55294, 41.665515),15,{
fillColor: 'green',
strokeColor:"blue",
fillOpacity: 0.3,
strokeWeight:2,
strokeOpacity:0.3
});
//创建圆
map.addOverlay(circle);
//给覆盖物添加事件
circle.addEventListener("click",attribute);
function attribute(){
var p = circle.point; //获取marker的位置
window.alert("marker的位置是" + p.lng + "," + p.lat);
}
/*添加覆盖物++++++结束*/
map.setCurrentCity("朝阳"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);
</script>
增加线
/* 增加折线============开始 */
var polyline = new BMap.Polyline([
new BMap.Point(120.552396, 41.66695),
], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //创建折线
map.addOverlay(polyline); //增加折线