标注点
创建标注点对象
var 标注点对象=new BMap.标注点类型(point坐标点);
添加标注点到地图
map.addOverlay(标注对象);
自定义标注点
var 标注点图案对象=new BMap.Icon('img路径',new BMap.Size(设置图案宽,设置团高)); 不带px的数值
var 标注点=new BMap.Marker(point坐标点,{icon:标注点图案对象});
标注点添加事件(onclick等/addEventListener都可以)
标注点对象.on事件/addEventListener();
标注点可拖动(可配合鼠标抬起事件实现动态更新数据效果)
标注点对象.enableDragging();
创建图层(即自动添加交通流量等带颜色的路线信息)
var traffic=new BMap.Trafficlayer();
map.addTileLayer(traffic);
移除图层
map.removeTileLayer(traffic);
代码示例:
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title></title>
<script src='js/underscore.js'></script>
<!-- 引入百度地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=P4GOUWzDBOXMq8sBRabiMTFygL2ltEg7"></script>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#map{height:500px;width:700px;border: solid 1px black;}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="map"></div>
<button>点我加载地图</button>
<script>
document.querySelector('button').onclick=function()
{
// 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id值也可以是元素对象。
var map = new BMap.Map("map");
//经纬度设置中心点
var point = new BMap.Point(103.907379, 30.805303);
//103.907379, 30.805303
//地图初始化，同时设置地图展示级别(1-21),15解决展示街道级别
map.centerAndZoom(point,15);
//自定义标注坐标
var Bpoint = new BMap.Point(103.907379, 30.805);
//构建自定义标注图形
var myicon=new BMap.Icon('img/ts1.jpg',new BMap.Size(30,30));
//构建自定义的标注点
var Bmarker=new BMap.Marker(point,{
icon:myicon
});
var geoc=new BMap.Geocoder();
map.addEventListener('click',function(event){
//获得标注点
var marker=new BMap.Marker(event.point);
//添加标注点到地图
map.addOverlay(marker);
// map.addOverlay(Bmarker);
//标注点添加事件onclick/addEventListener都可以
marker.addEventListener('click',function(event){
alert('是否轰炸该目标'+event.point.lat+'.'+event.point.lng);
console.log(event.point);
marker.enableDragging();
},false)
},false)
//创建图层(即指自动添加交通路线图层)
var traffic=new BMap.TrafficLayer();
map.addTileLayer(traffic);
map.removeTileLayer(traffic);
}
</script>
</body>
</html>
