案例:
设置覆盖物+标注提示文字:
<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); //增加折线