百度地图API 接口
//注意 一定要看事例中是否添加了其他 JS文件
点坐标 经 ：右侧变大 纬：上方变大
地图案例展示 注意：要填写秘钥
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 //添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
异步加载地图 window.onload = loadJScript; //异步加载地图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <title>异步加载地图</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> //百度地图API功能 function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "//api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init"; document.body.appendChild(script); } function init() { var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); map.enableScrollWheelZoom(); //启用滚轮放大缩小 } window.onload = loadJScript; //异步加载地图 </script>
同时加载两个地图 注意css的写法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #map1_container,#map2_container {width:100%;height:50%;float:left;overflow: hidden;margin:0;} #allmap1{margin:0 0 3px;height:100%;} #allmap2{margin:3px 0 0;height:100%;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>同时加载两个地图</title> </head> <body> <div id="map1_container"><div id="allmap1"></div></div> <div id="map2_container"><div id="allmap2"></div></div> </body> </html> <script type="text/javascript"> //百度地图API功能 //加载第一张地图 var map1 = new BMap.Map("allmap1"); // 创建Map实例 var point1 = new BMap.Point(116.404, 39.915); map1.centerAndZoom(point1,15); map1.enableScrollWheelZoom(); //启用滚轮放大缩小 //加载第二张地图 var map2 = new BMap.Map("allmap2"); // 创建Map实例 var point2 = new BMap.Point(116.404, 39.915); map2.centerAndZoom(point2,15); map2.enableScrollWheelZoom(); //启用滚轮放大缩小 </script>
直接永城市名设置地图中心 map.centerAndZoom("上海",15);
设置地图最大最小级别 var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
移动地图 map.panTo(new BMap.Point(113.262232,23.154345)); 注意 settimeout函数的写法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>移动地图</title> </head> <body> <div id="allmap"></div> <p>初始化地图，中心点为（116.4035,39.915），缩放级别为8的北京市地图，2秒后，通过改变中心点坐标，地图平移到广州</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.4035,39.915),8); setTimeout(function(){ map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州 }, 2000); </script>
缩放地图
setTimeout(function(){
map.setZoom(14);
}, 2000); //2秒后放大到14级
拖拽地图
map.disableDragging(); //禁止拖拽
setTimeout(function(){
map.enableDragging(); //两秒后开启拖拽
//map.enableInertialDragging(); //两秒后开启惯性拖拽
}, 2000);
设置地图显示范围 注意要添加<script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> 点（左下，右上）（经（横向），纬（纵向））
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> <title>设置地图显示范围</title> </head> <body> <div id="allmap"></div> <p>将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回。</p> </body> </html> <script type="text/javascript"> //百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); map.enableScrollWheelZoom(); var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349)); try { BMapLib.AreaRestriction.setBounds(map, b); } catch (e) { alert(e); } </script>
获取坐标显示范围 .lng 是京都 .lat是维度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>获取地图显示范围</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.4035,39.915), 14); var bs = map.getBounds(); //获取可视区域 var bssw = bs.getSouthWest(); //可视区域左下角 var bsne = bs.getNorthEast(); //可视区域右上角 alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat); </script>
获取两点之间的距离 .toFixed(2)是保留两位小数
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>测距</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom("重庆",12); //初始化地图,设置城市和地图级别。 var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区 var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区 alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离,保留小数点后两位 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线 map.addOverlay(polyline); //添加折线到地图上 </script> 注意map.getDistance(pointA,pointB)).toFixed(2) alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //获取两点距离,保留小数点后两位 var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线 map.addOverlay(polyline); //添加折线到地图上
构造底图时关闭底图可点功能 var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时关闭底图可点功能
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
地图控件事例 (注意同时加载两个的时候不好使）
加载/删除
工具条，比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
//添加控件和比例尺
function add_control(){
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
//移除控件和比例尺
function delete_control(){
map.removeControl(top_left_control);
map.removeControl(top_left_navigation);
map.removeControl(top_right_navigation);
}
地图类型，缩略图空间
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
//添加地图类型和缩略图
function add_control(){
map.addControl(mapType1); //2D图，混合图
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
}
//移除地图类型和缩略图
function delete_control(){
map.removeControl(mapType1); //移除2D图，混合图
map.removeControl(overView);
map.removeControl(overViewOpen);
}
定位相关控件 包含了比例尺
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:100%;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加定位相关控件</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 添加带有定位的导航控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 启用显示定位 enableGeolocation: true }); map.addControl(navigationControl); // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; alert("当前定位地址为：" + address); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); map.addControl(geolocationControl); </script>
添加第三方版权控件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加版权控件</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //设置版权控件位置 map.addControl(cr); //添加版权控件 var bs = map.getBounds(); //返回地图可视区域 cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>", bounds: bs}); //Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数 </script>
添加自定义控件 BOM
重点
// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
添加城市列表 可以在修改城市前后 添加功能
var size = new BMap.Size(10, 20);
mp.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
// 切换城市之前事件
// onChangeBefore: function(){
// alert('before');
// },
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
覆盖物示例
添加、删除覆盖物（包含 点 折线 圆 多边形的画法） map.addOverlay( ); //增加**
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加/删除覆盖物</title> </head> <body> <div id="allmap"></div> <div id="r-result"> <input type="button" onclick="add_overlay();" value="添加覆盖物" /> <input type="button" onclick="remove_overlay();" value="删除覆盖物" /> </div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点 var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线 var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆 var polygon = new BMap.Polygon([ new BMap.Point(116.387112,39.920977), new BMap.Point(116.385243,39.913063), new BMap.Point(116.394226,39.917988), new BMap.Point(116.401772,39.921364), new BMap.Point(116.41248,39.927893) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形 var pStart = new BMap.Point(116.392214,39.918985); var pEnd = new BMap.Point(116.41478,39.911901); var rectangle = new BMap.Polygon([ new BMap.Point(pStart.lng,pStart.lat), new BMap.Point(pEnd.lng,pStart.lat), new BMap.Point(pEnd.lng,pEnd.lat), new BMap.Point(pStart.lng,pEnd.lat) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形 //添加覆盖物 function add_overlay(){ map.addOverlay(marker); //增加点 map.addOverlay(polyline); //增加折线 map.addOverlay(circle); //增加圆 map.addOverlay(polygon); //增加多边形 map.addOverlay(rectangle); //增加矩形 } //清除覆盖物 function remove_overlay(){ map.clearOverlays(); } </script>
这线上添加箭头 想创建sy-->icon----->创建折线点（不能相同）----》添加箭头
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>折线上添加方向箭头</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.6,//图标缩放大小 strokeColor:'#fff',//设置矢量图标的线填充颜色 strokeWeight: '2',//设置线宽 }); var icons = new BMap.IconSequence( sy, '10', '30'); // 创建polyline对象 var pois = [ new BMap.Point(116.350658,39.938285), new BMap.Point(116.386446,39.939281), new BMap.Point(116.389034,39.913828), new BMap.Point(116.442501,39.914603) ]; var polyline =new BMap.Polyline(pois, { enableEditing: false,//是否启用线编辑，默认为false enableClicking: true,//是否响应点击事件，默认为true icons:[icons], strokeWeight:'8',//折线的宽度，以像素为单位 strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1 strokeColor:"#18a45b" //折线颜色 }); map.addOverlay(polyline); //增加折线 </script>
添加弹跳动点
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
设置点的新图标 size图片尺寸
//创建小狐狸
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
设置线，面可编辑 编辑功能 在button click 的方法里
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height:500px; width: 100%;} #control{width:100%;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>设置线、面可编辑</title> </head> <body> <div id="allmap"></div> <div id="control"> <button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button> <button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button> </div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); map.enableScrollWheelZoom(); var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.423493, 39.907445) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线 map.addOverlay(polyline); //增加折线 var polygon = new BMap.Polygon([ new BMap.Point(116.387112,39.920977), new BMap.Point(116.385243,39.913063), new BMap.Point(116.394226,39.917988), new BMap.Point(116.401772,39.921364), new BMap.Point(116.41248,39.927893) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形 map.addOverlay(polygon); //增加多边形 </script>
显示/隐藏 和 添加/删除 有区别
设置覆盖物显示/隐藏 先把图形加到map.addOverlay hideOver()先隐藏 -----》 调用函数显示 调用函数隐藏
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #l-map{height:500px;width:100%;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>设置覆盖物的显示与隐藏</title> </head> <body> <div id="l-map"></div> <div id="r-result"> <input type="button" onclick="showOver()" value="显示" /> <input type="button" onclick="hideOver()" value="隐藏" /> </div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("l-map"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); map.addOverlay(polyline); //增加折线 var circle = new BMap.Circle(point,500); map.addOverlay(circle); //增加圆 hideOver(); function showOver(){ marker.show(); polyline.show(); circle.show(); } function hideOver(){ marker.hide(); polyline.hide(); circle.hide(); } </script>
添加文字标签
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>文本标注</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.417854,39.921988); map.centerAndZoom(point, 15); var opts = { position : point, // 指定文本标注所在的地理位置 offset : new BMap.Size(30, -30) //设置文本偏移量 } var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts); // 创建文本标注对象 label.setStyle({ color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微软雅黑" }); map.addOverlay(label); </script>
添加覆盖物的文字标签 先创建一个maker --》marker.setLabel(label);
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>带文字标签的覆盖物</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.400244,39.92556); map.centerAndZoom(point, 12); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); </script>
获取覆盖物的信息 maker监听click marker.getPosition(); .lng .lat
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>获取覆盖物的信息</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.400244,39.92556); map.centerAndZoom(point, 12); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.addEventListener("click",getAttr); function getAttr(){ var p = marker.getPosition(); //获取marker的位置 alert("marker的位置是" + p.lng + "," + p.lat); } </script>
添加多个点
function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); } // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 25; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point); }
从多个点删除特定点 设置覆盖物文字标签
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>从多个点删除指定点</title> </head> <body> <div id="allmap"></div> <input type="button" onclick="deletePoint()" value="删除id=1"/> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); map.disableDoubleClickZoom(true); // 编写自定义函数,创建标注 function addMarker(point,label){ var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(label); } // 随机向地图添加25个标注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 10; i++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)}); addMarker(point,label); } function deletePoint(){ var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length -1; i++){ if(allOverlay[i].getLabel().content == "我是id=1"){ map.removeOverlay(allOverlay[i]); return false; } } } </script>
加载闪烁点
？？
加载海量点
？？
添加弧线
注意需要引入 其他js 创建几个点-----》添加到point数组中---》创建对象BMapLib.CurveLine---》添加到地图map.addOverlay(curve);-------》开启可编辑功能 可以创建多个点 但是点与点之间是按照point数组中的顺序连接点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>添加弧线</title> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> <style type="text/css"> html,body{ width:100%; height:100%; margin:0; overflow:hidden; font-family:"微软雅黑"; } </style> </head> <body> <div style="width:100%;height:100%;border:1px solid gray" id="container"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(118.454, 32.955), 6); map.enableScrollWheelZoom(); var beijingPosition=new BMap.Point(116.432045,39.910683), hangzhouPosition=new BMap.Point(120.129721,30.314429), taiwanPosition=new BMap.Point(121.491121,25.127053); var points = [beijingPosition,hangzhouPosition, taiwanPosition]; var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象 map.addOverlay(curve); //添加到地图中 curve.enableEditing(); //开启编辑功能 </script>
添加椭圆
创建36个点 （x,y）为圆心 创建dot 创建椭圆 添加地图
//centre:椭圆中心点,X:横向经度,Y:纵向纬度 function add_oval(centre,x,y) { var assemble=new Array(); var angle; var dot; var tangent=x/y; for(i=0;i<36;i++) { angle = (2* Math.PI / 36) * i; dot = new BMap.Point(centre.lng+Math.sin(angle)*y*tangent, centre.lat+Math.cos(angle)*y); assemble.push(dot); } return assemble; } var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); map.addOverlay(oval);
添加行政区域
？？？？
添加自定义覆盖物 自定义 需要 ComplexCustomOverlay.prototype = new BMap.Overlay(); DOM添加标签
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加自定义覆盖物</title> </head> <body> <div id="allmap"></div> <p>图示中为房产覆盖物，鼠标移到覆盖物上，自动显示房屋套数</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var mp = new BMap.Map("allmap"); mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15); mp.enableScrollWheelZoom(); // 复杂的自定义覆盖物 function ComplexCustomOverlay(point, text, mouseoverText){ this._point = point; this._text = text; this._overText = mouseoverText; } ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map){ this._map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = "#EE5D5B"; div.style.border = "1px solid #BC3B3A"; div.style.color = "white"; div.style.height = "18px"; div.style.padding = "2px"; div.style.lineHeight = "18px"; div.style.whiteSpace = "nowrap"; div.style.MozUserSelect = "none"; div.style.fontSize = "12px" var span = this._span = document.createElement("span"); div.appendChild(span); span.appendChild(document.createTextNode(this._text)); var that = this; var arrow = this._arrow = document.createElement("div"); arrow.style.background = "url(//map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat"; arrow.style.position = "absolute"; arrow.style.width = "11px"; arrow.style.height = "10px"; arrow.style.top = "22px"; arrow.style.left = "10px"; arrow.style.overflow = "hidden"; div.appendChild(arrow); div.onmouseover = function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#0000ff"; this.getElementsByTagName("span")[0].innerHTML = that._overText; arrow.style.backgroundPosition = "0px -20px"; } div.onmouseout = function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; this.getElementsByTagName("span")[0].innerHTML = that._text; arrow.style.backgroundPosition = "0px 0px"; } mp.getPanes().labelPane.appendChild(div); return div; } ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px"; this._div.style.top = pixel.y - 30 + "px"; } var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套" ; var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "银湖海岸城",mouseoverTxt); mp.addOverlay(myCompOverlay); </script>
添加和删除地面叠加层 注意css样式 添加button按钮
找点，设置属性groundOverlayOption---》初始化groundOverlay 单击双击事件 添加移除
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加/删除地面叠加层</title> </head> <body> <div id="allmap"></div> <div id="r-result"> <input type="button" onclick="addGroundOverlay();" value="添加" /> <input type="button" onclick="removeGroundOverlay();" value="删除" /> </div> </body> </html> <script type="text/javascript"> var TianAnMen = new BMap.Point(116.404449, 39.914889); // 创建Map实例 var map = new BMap.Map("allmap"); // 居中放大 map.centerAndZoom(TianAnMen, 12); // 启用滚轮放大缩小 map.enableScrollWheelZoom(); // 西南角和东北角 var SW = new BMap.Point(116.29579,39.837146); var NE = new BMap.Point(116.475451,39.9764); groundOverlayOptions = { opacity: 1, displayOnMinLevel: 10, displayOnMaxLevel: 14 } // 初始化GroundOverlay var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions); // 设置GroundOverlay的图片地址 groundOverlay.setImageURL('/jsdemo/img/si-huan.png'); // 单击事件 groundOverlay.addEventListener('click', function (clickEvent) { // console.log('clickEvent', clickEvent); }); // 双击事件 groundOverlay.addEventListener('dblclick', function (dblclickEvent) { // console.log('dblclickEvent', dblclickEvent); }); function addGroundOverlay() { // 添加GroundOverlay map.addOverlay(groundOverlay); } function removeGroundOverlay() { // 移除GroundOverlay map.removeOverlay(groundOverlay); } </script>
点聚合
添加了2个其他 js文件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <title>点聚合</title> </head> <body> <div id="allmap"></div> <p>缩放地图，查看点聚合效果</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); map.enableScrollWheelZoom(); var MAX = 10; var markers = []; var pt = null; var i = 0; for (; i < MAX; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); markers.push(new BMap.Marker(pt)); } //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); </script>
添加热力图
引入了其他 js文件
{"lng":116.418261,"lat":39.921984,"count":50}, coun的值越大颜色越深 "radius":50热成像范围；max:100权重
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script> <title>热力图功能示例</title> <style type="text/css"> ul,li{list-style: none;margin:0;padding:0;float:left;} html{height:100%} body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";} #container{height:500px;width:100%;} #r-result{width:100%;} </style> </head> <body> <div id="container"></div> <div id="r-result"> <input type="button" onclick="openHeatmap();" value="显示热力图"/><input type="button" onclick="closeHeatmap();" value="关闭热力图"/> </div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.418261, 39.921984); map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 var points =[ {"lng":116.418261,"lat":39.921984,"count":50}, {"lng":116.423332,"lat":39.916532,"count":51}, {"lng":116.419787,"lat":39.930658,"count":15}, {"lng":116.418455,"lat":39.920921,"count":40}, {"lng":116.418843,"lat":39.915516,"count":100}, {"lng":116.42546,"lat":39.918503,"count":6}, {"lng":116.423289,"lat":39.919989,"count":18}, {"lng":116.418162,"lat":39.915051,"count":80}, {"lng":116.422039,"lat":39.91782,"count":11}, {"lng":116.41387,"lat":39.917253,"count":7}, {"lng":116.41773,"lat":39.919426,"count":42}, {"lng":116.421107,"lat":39.916445,"count":4}, {"lng":116.417521,"lat":39.917943,"count":27}, {"lng":116.419812,"lat":39.920836,"count":23}, {"lng":116.420682,"lat":39.91463,"count":60}, {"lng":116.415424,"lat":39.924675,"count":8}, {"lng":116.419242,"lat":39.914509,"count":15}, {"lng":116.422766,"lat":39.921408,"count":25}, {"lng":116.421674,"lat":39.924396,"count":21}, {"lng":116.427268,"lat":39.92267,"count":1}, {"lng":116.417721,"lat":39.920034,"count":51}, {"lng":116.412456,"lat":39.92667,"count":7}, {"lng":116.420432,"lat":39.919114,"count":11}, {"lng":116.425013,"lat":39.921611,"count":35}, {"lng":116.418733,"lat":39.931037,"count":22}, {"lng":116.419336,"lat":39.931134,"count":4}, {"lng":116.413557,"lat":39.923254,"count":5}, {"lng":116.418367,"lat":39.92943,"count":3}, {"lng":116.424312,"lat":39.919621,"count":100}, {"lng":116.423874,"lat":39.919447,"count":87}, {"lng":116.424225,"lat":39.923091,"count":32}, {"lng":116.417801,"lat":39.921854,"count":44}, {"lng":116.417129,"lat":39.928227,"count":21}, {"lng":116.426426,"lat":39.922286,"count":80}, {"lng":116.421597,"lat":39.91948,"count":32}, {"lng":116.423895,"lat":39.920787,"count":26}, {"lng":116.423563,"lat":39.921197,"count":17}, {"lng":116.417982,"lat":39.922547,"count":17}, {"lng":116.426126,"lat":39.921938,"count":25}, {"lng":116.42326,"lat":39.915782,"count":100}, {"lng":116.419239,"lat":39.916759,"count":39}, {"lng":116.417185,"lat":39.929123,"count":11}, {"lng":116.417237,"lat":39.927518,"count":9}, {"lng":116.417784,"lat":39.915754,"count":47}, {"lng":116.420193,"lat":39.917061,"count":52}, {"lng":116.422735,"lat":39.915619,"count":100}, {"lng":116.418495,"lat":39.915958,"count":46}, {"lng":116.416292,"lat":39.931166,"count":9}, {"lng":116.419916,"lat":39.924055,"count":8}, {"lng":116.42189,"lat":39.921308,"count":11}, {"lng":116.413765,"lat":39.929376,"count":3}, {"lng":116.418232,"lat":39.920348,"count":50}, {"lng":116.417554,"lat":39.930511,"count":15}, {"lng":116.418568,"lat":39.918161,"count":23}, {"lng":116.413461,"lat":39.926306,"count":3}, {"lng":116.42232,"lat":39.92161,"count":13}, {"lng":116.4174,"lat":39.928616,"count":6}, {"lng":116.424679,"lat":39.915499,"count":21}, {"lng":116.42171,"lat":39.915738,"count":29}, {"lng":116.417836,"lat":39.916998,"count":99}, {"lng":116.420755,"lat":39.928001,"count":10}, {"lng":116.414077,"lat":39.930655,"count":14}, {"lng":116.426092,"lat":39.922995,"count":16}, {"lng":116.41535,"lat":39.931054,"count":15}, {"lng":116.413022,"lat":39.921895,"count":13}, {"lng":116.415551,"lat":39.913373,"count":17}, {"lng":116.421191,"lat":39.926572,"count":1}, {"lng":116.419612,"lat":39.917119,"count":9}, {"lng":116.418237,"lat":39.921337,"count":54}, {"lng":116.423776,"lat":39.921919,"count":26}, {"lng":116.417694,"lat":39.92536,"count":17}, {"lng":116.415377,"lat":39.914137,"count":19}, {"lng":116.417434,"lat":39.914394,"count":43}, {"lng":116.42588,"lat":39.922622,"count":27}, {"lng":116.418345,"lat":39.919467,"count":8}, {"lng":116.426883,"lat":39.917171,"count":3}, {"lng":116.423877,"lat":39.916659,"count":34}, {"lng":116.415712,"lat":39.915613,"count":14}, {"lng":116.419869,"lat":39.931416,"count":12}, {"lng":116.416956,"lat":39.925377,"count":11}, {"lng":116.42066,"lat":39.925017,"count":38}, {"lng":116.416244,"lat":39.920215,"count":91}, {"lng":116.41929,"lat":39.915908,"count":54}, {"lng":116.422116,"lat":39.919658,"count":21}, {"lng":116.4183,"lat":39.925015,"count":15}, {"lng":116.421969,"lat":39.913527,"count":3}, {"lng":116.422936,"lat":39.921854,"count":24}, {"lng":116.41905,"lat":39.929217,"count":12}, {"lng":116.424579,"lat":39.914987,"count":57}, {"lng":116.42076,"lat":39.915251,"count":70}, {"lng":116.425867,"lat":39.918989,"count":8}]; if(!isSupportCanvas()){ alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~') } //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md //参数说明如下: /* visible 热力图是否显示,默认为true * opacity 热力的透明度,1-100 * radius 势力图的每个点的半径大小 * gradient {JSON} 热力图的渐变区间 . gradient如下所示 * { .2:'rgb(0, 255, 255)', .5:'rgb(0, 110, 255)', .8:'rgb(100, 0, 255)' } 其中 key 表示插值的位置, 0~1. value 为颜色值. */ heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20}); map.addOverlay(heatmapOverlay); heatmapOverlay.setDataSet({data:points,max:100}); //是否显示热力图 function openHeatmap(){ heatmapOverlay.show(); } function closeHeatmap(){ heatmapOverlay.hide(); } closeHeatmap(); function setGradient(){ /*格式如下所示: { 0:'rgb(102, 255, 0)', .5:'rgb(255, 170, 0)', 1:'rgb(255, 0, 0)' }*/ var gradient = {}; var colors = document.querySelectorAll("input[type='color']"); colors = [].slice.call(colors,0); colors.forEach(function(ele){ gradient[ele.getAttribute("data-key")] = ele.value; }); heatmapOverlay.setOptions({"gradient":gradient}); } //判断浏览区是否支持canvas function isSupportCanvas(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } </script>
矢量标 自带图形需要更改样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>矢量图标</title> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> </head> <body> <div id="allmap"></div> <div id="control"> <input type="button" onclick="hide()" value="隐藏"> <input type="button" onclick="show()" value="显示"> </div> </body> <script type="text/javascript"> var map = new BMap.Map("allmap"); var point = new BMap.Point(116.473008,39.916605); map.centerAndZoom(point, 16); map.enableScrollWheelZoom(true); //设置marker图标为人字形 var vectorPeoplePath = new BMap.Marker(point, { // 设置自定义path路径25325l99 icon: new BMap.Symbol('m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z', { rotation: 0,//顺时针旋转40度 fillColor: 'green', fillOpacity: 0.8, strokeColor: '#555', strokeWeight: 3//线宽 }) }); var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), { // 初始化方向向上的闭合箭头 icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, { scale: 5, strokeWeight: 1, rotation: 0,//顺时针旋转30度 fillColor: 'red', fillOpacity: 0.8 }) }); var vectorBCArrow = new BMap.Marker(new BMap.Point(point.lng+0.02 , point.lat), { // 初始化方向向下的闭合箭头 icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, { scale: 5, strokeWeight: 1, rotation: 180, fillColor: 'gold', fillOpacity: 0.8 }) }); var vectorFOArrow = new BMap.Marker(new BMap.Point(point.lng +0.03, point.lat), { // 初始化方向向上的开放式箭头 icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, { scale: 5, strokeWeight: 1, rotation: 0, fillColor: "pink", fillOpacity: 0.8 }) }); var vectorBOArrow = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat), { // 初始化方向向下的开放式箭头 icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 5, strokeWeight: 1, rotation: 90, fillColor: 'lightgreen', fillOpacity: 0.8 }) }); //设置marker图标为水滴 var vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.03), { // 指定Marker的icon属性为Symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, { scale: 2,//图标缩放大小 fillColor: "orange",//填充颜色 fillOpacity: 0.8//填充透明度 }) }); //设置marker图标为飞机 var vectorPlane = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat-0.03), { // 初始化小飞机Symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_PLANE, { scale: 3, rotation: 0 }) }); var vectorCLOCK = new BMap.Marker(new BMap.Point(point.lng+0.01,point.lat-0.03), { // 初始化闹钟形状的symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_CLOCK, { scale: 2, strokeWeight: 1, fillColor: 'blue', fillOpacity: 0.8 }) }); var vectorWARNING = new BMap.Marker(new BMap.Point(point.lng+0.02,point.lat-0.03), { // 初始化警告标志的symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_WARNING, { scale: 2, strokeWeight: 1, fillColor: 'pink', fillOpacity: 0.8 }) }); var vectorStar = new BMap.Marker(new BMap.Point(point.lng+0.03,point.lat-0.03), { // 初始化五角星symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, { scale: 5, fillColor: "pink", fillOpacity: 0.8 }) }); map.addOverlay(vectorWARNING); map.addOverlay(vectorPlane); map.addOverlay(vectorFCArrow); map.addOverlay(vectorBCArrow); map.addOverlay(vectorFOArrow); map.addOverlay(vectorBOArrow); map.addOverlay(vectorStar); map.addOverlay(vectorMarker); map.addOverlay(vectorCLOCK); map.addOverlay(vectorPeoplePath); map.setViewport({center:new BMap.Point(116.501035,39.897538),zoom:14}) function hide(){ vectorWARNING.hide(); vectorPlane.hide(); vectorFCArrow.hide(); vectorBCArrow.hide(); vectorFOArrow.hide(); vectorBOArrow.hide(); vectorStar.hide(); vectorCLOCK.hide(); vectorMarker.hide(); vectorPeoplePath.hide(); } function show(){ vectorWARNING.show(); vectorPlane.show(); vectorFCArrow.show(); vectorBCArrow.show(); vectorFOArrow.show(); vectorBOArrow.show(); vectorStar.show(); vectorCLOCK.show(); vectorMarker.show(); vectorPeoplePath.show(); } </script> </html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
添加带检索功能的信息窗口 默认样式是其他三种样式的 综合版本
可以在标点上 添加三种搜索 （不然搜索会跳转页面） 把content 设置为“”空字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height: 500px;width:100%;overflow: hidden;} #result {width:100%;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <title>带检索功能的信息窗口</title> </head> <body> <div id="allmap"> </div> <div id="result"> <input type="button" value="默认样式" onclick="searchInfoWindow.open(marker);"/> <input type="button" value="样式1" onclick="openInfoWindow1()"/> <input type="button" value="样式2" onclick="openInfoWindow2()"/> <input type="button" value="样式3" onclick="openInfoWindow3()"/> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('allmap'); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "百度大厦", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(poi); //创建marker对象 marker.enableDragging(); //marker可拖拽 marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); }) map.addOverlay(marker); //在地图中添加marker //样式1 var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", { title: "信息框1", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //从这里出发 BMAPLIB_TAB_SEARCH //周边检索 ] }); function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(116.319852,40.057031)); } //样式2 var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", { title: "信息框2", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH //周边检索 ] }); function openInfoWindow2() { searchInfoWindow2.open(new BMap.Point(116.324852,40.057031)); } //样式3 var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", { title: "信息框3", //标题 width: 290, //宽度 height: 40, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ ] }); function openInfoWindow3() { searchInfoWindow3.open(new BMap.Point(116.328852,40.057031)); } </script> </body> </html>
给多个点添加信息窗口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>给多个点添加信息窗口</title> </head> <body> <div id="allmap"></div> <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15); var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"], [116.406605,39.921585,"地址：北京市东城区东华门大街"], [116.412222,39.912345,"地址：北京市东城区正义路甲5号"] ]; var opts = { width : 250, // 信息窗口宽度 height: 80, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 }; for(var i=0;i<data_info.length;i++){ var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); // 创建标注 var content = data_info[i][2]; map.addOverlay(marker); // 将标注添加到地图中 addClickHandler(content,marker); } function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); } function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 } </script>
获取信息窗口的内容
------------------------------------------------------------------------------------------------------------------------
右键菜案案例
给地图添加右键菜单
先实例化一个menu --->创建menuitem数组存放多个 {text:'放大',callback:function({map.zoomIn()}},-----》依次添加到Menu中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>给地图添加右键菜单</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point,15); var menu = new BMap.ContextMenu(); var txtMenuItem = [ { text:'放大', callback:function(){map.zoomIn()} }, { text:'缩小', callback:function(){map.zoomOut()} } ]; for(var i=0; i < txtMenuItem.length; i++){ menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); } map.addContextMenu(menu); </script>
给付覆盖物添加右键标签
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>给覆盖物添加右键菜单</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point,15); var removeMarker = function(e,ee,marker){ map.removeOverlay(marker); } //创建右键菜单 var markerMenu=new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker))); var marker = new BMap.Marker(point); map.addOverlay(marker); marker.addContextMenu(markerMenu); </script>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
鼠标示例
设置鼠标样式
handcross是手掌样式
map.setDefaultCursor("url('bird.cur')"); //设置地图默认的鼠标指针样式
鼠标滚轮缩放地图
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.disableScrollWheelZoom(); //dis 禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
鼠标拉框放大地图
需要将引入 其他Js文件
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script> <title>鼠标拉框放大地图</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom("重庆",12); var myDrag = new BMapLib.RectangleZoom(map, { followText: "拖拽鼠标进行操作" }); myDrag.open(); //开启拉框放大 //myDrag.close(); //关闭拉框放大 </script>
鼠标距离（尺子测距离）
需要引入其他 js文件
var myDis = new BMapLib.DistanceTool(map);
map.addEventListener("load",function(){
myDis.open(); //开启鼠标测距
鼠标点击拾取坐标
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
鼠标绘制点线面 （有bug）
需要引入其他 js css 文件
添加drawingModes : [BMAP_DRAWING_RECTANGLE,BMAP_DRAWING_CIRCLE], //设置只显示画矩形、圆的模式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {width: 100%; height:500px; overflow: hidden;} #result {width:100%;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <!--加载鼠标绘制工具--> <script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <!--加载检索信息窗口--> <script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /> <title>鼠标绘制工具</title> </head> <body> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> </div> <div id="result"> <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/> <input type="button" value="清除所有覆盖物" onclick="clearAll()"/> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('map'); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var overlays = []; var overlaycomplete = function(e){ overlays.push(e.overlay); }; var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 } //实例化鼠标绘制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 }, circleOptions: styleOptions, //圆的样式 polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 } </script> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------、
叠加层示例
添加道路图层
需要引入其他js文件
var ctrl = new BMapLib.TrafficControl({ showPanel: false //是否显示路况提示面板 }); map.addControl(ctrl); ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); </script>
添加清华微观图
这个是设置加载瓦片规则
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
return url;
}
其中 var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
最重要，这个的意思是在当前文件夹下有一个tiles文件夹，在tiles文件夹下，有一个zoom 文件夹，在zoom 文件夹下有tilex_y.png(其中x和y根据实际计算得出)
举个例子：url= “tiles/4/tile1_1.png”
可是一般我们用工具切出来的瓦片并非是这样一种格式，像我切出来的是tiles/zoom/X/Y.png(zoom是缩放等级0,1,2,3,4)
所以根据百度的瓦片介绍，如果要显示zoom = 1，坐标为（1,1）的图片，url=“tiles/1/1/1.png”才能正常显示
所以我的var url = 'tile/' + zoom + '/' + x + '/' + y + '.png'; 就能显示出来
不同的切图工具切的瓦片图存放的文件结构也不相同，所以要根据实际的情况设置url。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
#r-result{width:100%;margin-top:5px;}
p{margin:5px; font-size:14px;}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>添加清华校园微观图</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" onclick="add_control();" value="添加" />
<input type="button" onclick="delete_control();" value="删除" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(116.332782, 40.007978), 16);
var tileLayer = new BMap.TileLayer({isTransparentPng: true});
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return '/jsdemo/demo/tiles/' + zoom + '/tile' + x + '_' + y + '.png'; //根据当前坐标，选取合适的瓦片图
}
var copyCtrl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
copyCtrl.addCopyright({id: 1, content: "版权说明：清华校园图片取自互联网"});
map.addControl(copyCtrl);
function add_control(){
map.addTileLayer(tileLayer);
}
function delete_control(){
map.removeTileLayer(tileLayer);
}
add_control();
</script>
添加自定义网格
？？？
-----------------------------------------------------------------------------------------------------------------------------------------
事件 主角（map/marker） 添加监听 监听里有不同的事件 --》函数
图块加载完成时
map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});
单击事件
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
覆盖物注册事件
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
marker.addEventListener("click",attribute);
map.addOverlay(marker); //增加点
function attribute(){
var p = marker.getPosition(); //获取marker的位置
alert("marker的位置是" + p.lng + "," + p.lat);
}
传递事件参数
e.target
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>传递事件参数</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点 map.addOverlay(marker); //增加点 marker.addEventListener("click",overlay_style); var polyline = new BMap.Polyline([ new BMap.Point(116.383752, 39.91334), new BMap.Point(116.38792, 39.920866), new BMap.Point(116.390867, 39.906532) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //创建折线 map.addOverlay(polyline); //增加折线 polyline.addEventListener("click",overlay_style); var circle = new BMap.Circle(new BMap.Point(116.415157, 39.914004),500,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //创建圆 map.addOverlay(circle); //增加圆 circle.addEventListener("click",overlay_style); //获取marker的属性 function overlay_style(e){ var p = e.target; if(p instanceof BMap.Marker){ alert("该覆盖物是点，点的坐标是：" + p.getPosition().lng + "," + p.getPosition().lat); }else if(p instanceof BMap.Circle){ alert("该覆盖物是圆，圆的半径是：" + p.getRadius() + "，圆的中心点坐标是：" + p.getCenter().lng + "," + p.getCenter().lat); }else if(p instanceof BMap.Polyline){ alert("该覆盖物是折线，所画点的个数是：" + p.getPath().length); }else{ alert("无法获知该覆盖物类型"); } } </script>
为多个注册点添加点击事件
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>为多个点注册单击事件</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var json_data = [[116.404,39.915],[116.383752,39.91334],[116.384502,39.932241]]; var pointArray = new Array(); for(var i=0;i<json_data.length;i++){ var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点 map.addOverlay(marker); //增加点 pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]); marker.addEventListener("click",attribute); } //让所有点在视野范围内 map.setViewport(pointArray); //获取覆盖物位置 function attribute(e){ var p = e.target; alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat); } </script>
注销事件
function addClick(){
map.addEventListener("click", showInfo); //添加事件
}
function removeClick(){
map.removeEventListener("click", showInfo);//删除事件
----------------------------------------------------------------------------------------------------------------------
GPS
多点沿线运动
建点，图片--》driving驾车实例---》driving.search（点)显示公交路线--》创建函数
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>多个标注点沿折线的轨迹运动</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var bounds = null; var linesPoints = null; var spoi1 = new BMap.Point(116.380967,39.913285); // 起点1 var spoi2 = new BMap.Point(116.380967,39.953285); // 起点2 var epoi = new BMap.Point(116.424374,39.914668); // 终点 var myIcon = new BMap.Icon("/jsdemo/img/Mario.png", new BMap.Size(32, 70), {imageOffset: new BMap.Size(0, 0)}); function initLine(){ bounds = new Array(); linesPoints = new Array(); map.clearOverlays(); // 清空覆盖物 var driving3 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调 driving3.search(spoi1, epoi); // 搜索一条线路 var driving4 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine}); // 驾车实例,并设置回调 driving4.search(spoi2, epoi); // 搜索一条线路 } function run(){ for(var m = 0;m < linesPoints.length; m++){ var pts = linesPoints[m]; var len = pts.length; var carMk = new BMap.Marker(pts[0],{icon:myIcon}); map.addOverlay(carMk); resetMkPoint(1,len,pts,carMk) } function resetMkPoint(i,len,pts,carMk){ carMk.setPosition(pts[i]); if(i < len){ setTimeout(function(){ i++; resetMkPoint(i,len,pts,carMk); },100); } } } function drawLine(results){ var opacity = 0.45; var planObj = results.getPlan(0); var b = new Array(); var addMarkerFun = function(point,imgType,index,title){ var url; var width; var height var myIcon; // imgType:1的场合，为起点和终点的图；2的场合为车的图形 if(imgType == 1){ url = "/jsdemo/img/dest_markers.png"; width = 42; height = 34; myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - index * height)}); }else{ url = "/jsdemo/img/trans_icons.png"; width = 22; height = 25; var d = 25; var cha = 0; var jia = 0 if(index == 2){ d = 21; cha = 5; jia = 1; } myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(10, (11 + jia)),imageOffset: new BMap.Size(0, 0 - index * height - cha)}); } var marker = new BMap.Marker(point, {icon: myIcon}); if(title != null && title != ""){ marker.setTitle(title); } // 起点和终点放在最上面 if(imgType == 1){ marker.setTop(true); } map.addOverlay(marker); } var addPoints = function(points){ for(var i = 0; i < points.length; i++){ bounds.push(points[i]); b.push(points[i]); } } // 绘制驾车步行线路 for (var i = 0; i < planObj.getNumRoutes(); i ++){ var route = planObj.getRoute(i); if (route.getDistance(false) <= 0){continue;} addPoints(route.getPath()); // 驾车线路 if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){ map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true})); }else{ // 步行线路有可能为0 map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true})); } } map.setViewport(bounds); // 终点 addMarkerFun(results.getEnd().point,1,1); // 开始点 addMarkerFun(results.getStart().point,1,0); linesPoints[linesPoints.length] = b; } initLine(); setTimeout(function(){ run(); },1500); </script>
路书
需要引入其他js文件
注意 在js中绑定button事件
<html lang="en"> <head> <meta charset="utf-8" /> <title>路书</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #map_canvas{width:100%;height:500px;} #result {width:100%} </style> <script src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script> </head> <body> <div id="map_canvas"></div> <div id="result"></div> <button id="run">开始</button> <button id="stop">停止</button> <button id="pause">暂停</button> <button id="hide">隐藏信息窗口</button> <button id="show">展示信息窗口</button> <script> var map = new BMap.Map('map_canvas'); map.enableScrollWheelZoom(); map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); var lushu; // 实例化一个驾车导航用来生成路线 var drv = new BMap.DrivingRoute('北京', { onSearchComplete: function(res) { if (drv.getStatus() == BMAP_STATUS_SUCCESS) { var plan = res.getPlan(0); var arrPois =[]; for(var j=0;j<plan.getNumRoutes();j++){ var route = plan.getRoute(j); arrPois= arrPois.concat(route.getPath()); } map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); map.setViewport(arrPois); lushu = new BMapLib.LuShu(map,arrPois,{ defaultContent:"",//"从天安门到百度大厦" autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon : new BMap.Icon('/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}), speed: 4500, enableRotation:true,//是否设置marker随着道路的走向进行旋转 landmarkPois: [ {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2}, {lng:116.315391,lat:39.964429,html:'高速公路收费<div><img src="//map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3}, {lng:116.381476,lat:39.974073,html:'肯德基早餐',pauseTime:2} ]}); } } }); var start=new BMap.Point(116.404844,39.911836); var end=new BMap.Point(116.308102,40.056057); drv.search(start, end); //绑定事件 $("run").onclick = function(){ lushu.start(); } $("stop").onclick = function(){ lushu.stop(); } $("pause").onclick = function(){ lushu.pause(); } $("hide").onclick = function(){ lushu.hideInfoWindow(); } $("show").onclick = function(){ lushu.showInfoWindow(); } function $(element){ return document.getElementById(element); } </script> </body> </html>
-----------------------------------------------------------------------------------------------------------------------
全景图示例
添加全景控件
addTileLayer添加一个自定义地图图层
PanoramaCoverageLayer() 创建全景覆盖区域
PanoramaControl 切换全景地图的控件
map.addTileLayer(new BMap.PanoramaCoverageLayer());
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);//添加全景控件
显示、隐藏全景导航空间
1 var panorama = new BMap.Panorama('panorama'); //默认为显示导航控件 2 panorama.setPosition(new BMap.Point(116.316169, 40.005567)); 3 4 document.getElementById("hideNavigationControl").onclick = function(){ 5 panorama.setOptions({ 6 navigationControl: false //隐藏导航控件 7 }); 8 }; 9 document.getElementById("showNavigationControl").onclick = function(){ 10 panorama.setOptions({ 11 navigationControl: true //显示导航控件 12 }); 13 };
显示。隐藏全景道路指引控件（东西南北）
var panorama = new BMap.Panorama('panorama'); //默认为显示道路指示控件
panorama.setPosition(new BMap.Point(116.316169, 40.005567));
document.getElementById("hideLinksControl").onclick = function(){
panorama.setOptions({
linksControl: false //隐藏道路指示控件
});
};
document.getElementById("showLinksControl").onclick = function(){
panorama.setOptions({
linksControl: true //显示道路指示控件
});
};
添加删除全景相册控件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #panorama {width:100%; height: 500px;} #result {width:100%;font-size:12px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> <title>添加/删除全景相册控件</title> </head> <body> <div id="panorama"></div> <div id="result"> <div> <button id="hideAlbumsControl">隐藏全景相册控件</button> <button id="showAlbumsControl">显示全景相册控件</button> </div> </div> </body> </html> <script type="text/javascript"> var panorama = new BMap.Panorama('panorama', { albumsControl: true //默认为不显示相册控件，默认值为false }); panorama.setPosition(new BMap.Point(116.316169, 40.005567)); panorama.setPov({pitch: 5.04, heading: 343.92}); //设置相册位置为右上角 panorama.setOptions({ albumsControlOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT } }); //设置偏移量，距离上面15px，距离左边100px（距离那边受anchor位置的影响） panorama.setOptions({ albumsControlOptions: { offset: new BMap.Size(100, 15) } }); //设置相册的长度和图片大小,相册的最大宽度为60%，相册内图片的大小为80px panorama.setOptions({ albumsControlOptions: { maxWidth: '60%', imageHeight: 80 } }); //隐藏相册 document.getElementById("hideAlbumsControl").onclick = function(){ panorama.setOptions({ albumsControl: false }); }; //显示相册 document.getElementById("showAlbumsControl").onclick = function(){ panorama.setOptions({ albumsControl: true }); }; </script>
----------------------------------------------------------------------------------------------------------------------
