baidu map api note
地图级别控制
// 百度地图API功能
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时,关闭底图可点功能
// 初始化地图,设置中心点坐标(城市名)和地图级别
map.centerAndZoom("上海",15);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 移动地图到中心点
map.panTo(new BMap.Point(113.262232,23.154345));
// 设置缩放级别
map.setZoom(14);
// 开启地图缩放
map.enableScrollWheelZoom();
// 可以拖拽
marker.enableDragging();
// 不可以拖拽
marker.disableDragging();
获取两点之间距离
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)+' 米。'); //获取两点距离
添加 图形,点,线,面 文字
// marker是随着地图缩放级别,尺寸变化的
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, 1500,
{strokeColor: "blue",
fillColor: "#ccc",
strokeWeight: 2,
strokeOpacity: 0.5,
fillOpacity: 0.7}
);
// 多边形
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});
// 开启(关闭)点线面的编辑(可以拖拽,移动点)
polygon.enableEditing()
polygon.disableEditing()
// 文字label
var opts = {
position : new BMap.Point(116.417854,39.921988), // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("欢迎使用百度地图,这是一个简单的文本标注哦~", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
// 覆盖物显示,隐藏
marker.show()
marker.hide()
// 添加覆盖物
map.addOverlay(marker);
// 清除覆盖物
map.clearOverlays();
删除指定覆盖物
getOverlays方法可以获取 覆盖物数组,getLabel方法可以,获取他的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;
}
}
}
marker 自定义icon
// 创建小狐狸icon
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
加载海量点
// data source
var data = {"data":[[74.438,39.006,1]]}
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var points = []; // 添加海量点数据
for (var i = 0; i < data.data.length; i++) {
points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
}
var options = {
size: BMAP_POINT_SIZE_SMALL,
shape: BMAP_POINT_SHAPE_STAR,
color: '#d340c3'
}
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
pointCollection.addEventListener('click', function (e) {
alert('单击点的坐标为:' + e.point.lng + ',' + e.point.lat); // 监听点击事件
});
map.addOverlay(pointCollection); // 添加Overlay
} else {
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}
两点之间 画弧线 圆弧
// 引入一个库
var points = []
points.push( new BMap.Point(116.432045,39.910683) )
points.push( new BMap.Point(120.129721,30.314429) )
points.push( new BMap.Point(121.491121,25.127053) )
var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能
// centre:椭圆中心点,X:横向经度,Y:纵向纬度
function add_oval(centre,x,y){
var assemble= []
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);
画行政区
function getBoundary(){
var bdary = new BMap.Boundary();
console.log(bdary)
bdary.get("上海市徐汇区", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
// rs.boundaries 是一个数组,每个元素,是地理位置的字符串 "12,12;123,23"
var count = rs.boundaries.length;
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
console.log(rs.boundaries)
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i],
{
strokeWeight: 2,
strokeColor: "#ff0000",
fillColor: 'blue'
}
); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
console.log(pointArray)
}
map.setViewport(pointArray); //调整视野
addlabel();
});
}
自定义覆盖物
// 复杂的自定义覆盖物
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(http://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);
点聚合(放大缩小)
// markers 是一个marker数组
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
矢量图 图标
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 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
})
});
信息弹窗
var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海底捞王府井店" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
});
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
鼠标右键
除了地图,marker也支持加右键
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);
鼠标测距
// 引入插件
var myDis = new BMapLib.DistanceTool(map);
map.addEventListener("load",function(){
myDis.open(); //开启鼠标测距
//myDis.close(); //关闭鼠标测距大
});
// 获取点击点坐标
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});