百度地图demo

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(106.20647861, 38.50262101), 13); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
//map.centerAndZoom("银川",13); // 初始化地图,用城市名设置地图中心点
map.enableScrollWheelZoom(); //开启鼠标滚轮缩放    
cdBz();//右键菜单选择标注
gjllqdw();//根据浏览器定位    
//addMathMarker();//随机添加标注    
addMarkerWindow();//给点不同标注添加不同信息窗口
console.log(map);

//图标标注
function showInfo(e){
//alert(e.point.lng + ", " + e.point.lat);
//console.log(e.point.lng + ", " + e.point.lat);
var point=new BMap.Point(e.point.lng , e.point.lat);
addBz(point); //创建标注    
}
//单击获取点击的经纬度    
function addClick(){
map.addEventListener("click", showInfo);
}
//单击取消获取点击的经纬度    
function removeClick(){
map.removeEventListener("click", showInfo);
}

//创建标注    
function addBz(point){
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.disableDragging(); // 不可拖拽
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
addyjcd(marker,point);//标注添加右键菜单

} 

// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
addCkNr(marker,point);//给标注添加信息框
}

//获取覆盖物位置
function attribute(e){
var p = e.target;
alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat); 
} 

//右键菜单选择
function cdBz(){
var menu = new BMap.ContextMenu();//创建右侧菜单
var txtMenuItem = [
{
text:'开始标注',
callback:function(){addClick()}
},{
text:'完成标注',
callback:function(){removeClick()}
}
];
for(var i=0; i < txtMenuItem.length; i++){//循环给右侧菜单添加功能选项
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
}
//给标注添加信息窗口
function addCkNr(marker,point){
var infoWindow = new BMap.InfoWindow('位置坐标:'+point.lng+','+point.lat, opts); // 创建信息窗口对象 
marker.addEventListener("click", function(){ 
map.openInfoWindow(infoWindow,point); //开启信息窗口
});    
}

function getBzZb(){
console.log(marker.point);
} 
//根据浏览器定位 
function gjllqdw(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);//创建浏览器坐标点 标注
map.addOverlay(mk);//添加到 地图上
map.panTo(r.point);
addCkNr(mk,r.point);//给标注添加 窗口
mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
alert('您的位置：'+r.point.lng+','+r.point.lat);
console.log('您的位置：'+r.point.lng+','+r.point.lat);
return r.point;
}
else {
alert('failed'+this.getStatus());
} 
},{enableHighAccuracy: true})

}
//给标注添加右键菜单
function addyjcd(marker,point){
var removeMarker = function(e,ee,marker){//右键菜单 删除方法
map.removeOverlay(marker);
}
//创建右键菜单
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));//给菜单添加删除选项
var txtMenuItem = [
{    
text:'移动标注',
callback:function(){marker.enableDragging()}
},{
text:'不可移动标注',
callback:function(){marker.disableDragging()}
}
];
for(var i=0; i < txtMenuItem.length; i++){//循环给右侧菜单添加功能选项
markerMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}

marker.addContextMenu(markerMenu);//给标注添加 右侧菜单

marker.addEventListener("dragend", function(e){ //监听标注移动后坐标 
alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})
}

//随机创建标注
function addMathMarker(){
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
console.log(bounds);
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
var data_info=new Array()
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);
var myArray=new Array()
myArray[0]=point.lng;    
myArray[1]=point.lat;    
myArray[2]="标注坐标："+point.lng+","+point.lat+'<a href="https://www.baidu.com">百度'+i+':https://www.baidu.com</a>';
myArray[3]=point;
data_info[i]=myArray;
}
return data_info;
}

//给点不同标注添加不同信息窗口
function addMarkerWindow(){
//坐标和信息
var data_info = addMathMarker();

for(var i=0;i<data_info.length;i++){
//设置自定义图片
var myIcon=null;
/* 
if(i<26){
myIcon= new BMap.Icon("../js/map-marker-flag-3-right-pink.png", new BMap.Size(300,157));
}
if(i<20){
myIcon= new BMap.Icon("../js/map-marker-flag-3-right-chartreuse.png", new BMap.Size(300,157));
}
if(i<10){
myIcon= new BMap.Icon("../js/map-marker-flag-3-right-azure.png", new BMap.Size(300,157));
}
*/
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])/* ,{icon:myIcon} */); // 创建标注
var content = data_info[i][2];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
addyjcd(marker,data_info[i][3]);//标注添加右键菜单
}
}
//给该标注添加监听事件
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); //开启信息窗口
}


//窗口样式
var opts = {
width : 300, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};