1 // 百度地图API功能 2 var map = new BMap.Map("allmap"); // 创建Map实例 3 map.centerAndZoom(new BMap.Point(106.20647861, 38.50262101), 13); // 初始化地图,设置中心点坐标和地图级别 4 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 5 //map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 6 //map.centerAndZoom("银川",13); // 初始化地图,用城市名设置地图中心点 7 map.enableScrollWheelZoom(); //开启鼠标滚轮缩放 8 cdBz();//右键菜单选择标注 9 gjllqdw();//根据浏览器定位 10 //addMathMarker();//随机添加标注 11 addMarkerWindow();//给点不同标注添加不同信息窗口 12 console.log(map); 13 14 //图标标注 15 function showInfo(e){ 16 //alert(e.point.lng + ", " + e.point.lat); 17 //console.log(e.point.lng + ", " + e.point.lat); 18 var point=new BMap.Point(e.point.lng , e.point.lat); 19 addBz(point); //创建标注 20 } 21 //单击获取点击的经纬度 22 function addClick(){ 23 map.addEventListener("click", showInfo); 24 } 25 //单击取消获取点击的经纬度 26 function removeClick(){ 27 map.removeEventListener("click", showInfo); 28 } 29 30 //创建标注 31 function addBz(point){ 32 var marker = new BMap.Marker(point);// 创建标注 33 map.addOverlay(marker); // 将标注添加到地图中 34 marker.disableDragging(); // 不可拖拽 35 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 36 addyjcd(marker,point);//标注添加右键菜单 37 38 } 39 40 // 编写自定义函数,创建标注 41 function addMarker(point){ 42 var marker = new BMap.Marker(point); 43 map.addOverlay(marker); 44 addCkNr(marker,point);//给标注添加信息框 45 } 46 47 //获取覆盖物位置 48 function attribute(e){ 49 var p = e.target; 50 alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat); 51 } 52 53 //右键菜单选择 54 function cdBz(){ 55 var menu = new BMap.ContextMenu();//创建右侧菜单 56 var txtMenuItem = [ 57 { 58 text:'开始标注', 59 callback:function(){addClick()} 60 },{ 61 text:'完成标注', 62 callback:function(){removeClick()} 63 } 64 ]; 65 for(var i=0; i < txtMenuItem.length; i++){ //循环给右侧菜单添加功能选项 66 menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); 67 } 68 map.addContextMenu(menu); 69 } 70 //给标注添加信息窗口 71 function addCkNr(marker,point){ 72 var infoWindow = new BMap.InfoWindow('位置坐标:'+point.lng+','+point.lat, opts); // 创建信息窗口对象 73 marker.addEventListener("click", function(){ 74 map.openInfoWindow(infoWindow,point); //开启信息窗口 75 }); 76 } 77 78 function getBzZb(){ 79 console.log(marker.point); 80 } 81 //根据浏览器定位 82 function gjllqdw(){ 83 var geolocation = new BMap.Geolocation(); 84 geolocation.getCurrentPosition(function(r){ 85 if(this.getStatus() == BMAP_STATUS_SUCCESS){ 86 var mk = new BMap.Marker(r.point);//创建浏览器坐标点 标注 87 map.addOverlay(mk);//添加到 地图上 88 map.panTo(r.point); 89 addCkNr(mk,r.point);//给标注添加 窗口 90 mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 91 alert('您的位置:'+r.point.lng+','+r.point.lat); 92 console.log('您的位置:'+r.point.lng+','+r.point.lat); 93 return r.point; 94 } 95 else { 96 alert('failed'+this.getStatus()); 97 } 98 },{enableHighAccuracy: true}) 99 100 }101 //给标注添加右键菜单102 function addyjcd(marker,point){103 var removeMarker = function(e,ee,marker){ //右键菜单 删除方法104 map.removeOverlay(marker);105 }106 //创建右键菜单107 var markerMenu=new BMap.ContextMenu();108 markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));//给菜单添加删除选项109 var txtMenuItem = [110 { 111 text:'移动标注',112 callback:function(){marker.enableDragging()}113 },{114 text:'不可移动标注',115 callback:function(){marker.disableDragging()}116 }117 ];118 for(var i=0; i < txtMenuItem.length; i++){ //循环给右侧菜单添加功能选项119 markerMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));120 }121 122 marker.addContextMenu(markerMenu);//给标注添加 右侧菜单123 124 marker.addEventListener("dragend", function(e){ //监听标注移动后坐标 125 alert("当前位置:" + e.point.lng + ", " + e.point.lat); 126 })127 }128 129 //随机创建标注130 function addMathMarker(){131 // 随机向地图添加25个标注132 var bounds = map.getBounds();133 var sw = bounds.getSouthWest();134 var ne = bounds.getNorthEast();135 console.log(bounds);136 var lngSpan = Math.abs(sw.lng - ne.lng);137 var latSpan = Math.abs(ne.lat - sw.lat);138 var data_info=new Array()139 for (var i = 0; i < 25; i ++) { //循环添加标注140 var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));141 //addMarker(point);142 var myArray=new Array()143 myArray[0]=point.lng; 144 myArray[1]=point.lat; 145 myArray[2]="标注坐标:"+point.lng+","+point.lat+'百度'+i+':https://www.baidu.com';146 myArray[3]=point;147 data_info[i]=myArray;148 }149 return data_info;150 }151 152 //给点不同标注添加不同信息窗口153 function addMarkerWindow(){154 //坐标和信息155 var data_info = addMathMarker();156 157 for(var i=0;i