百度地图demo

  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+'<a href="https://www.baidu.com">百度'+i+':https://www.baidu.com</a>';
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<data_info.length;i++){
158 //设置自定义图片
159 var myIcon=null;
160 /* 
161 if(i<26){
162 myIcon= new BMap.Icon("../js/map-marker-flag-3-right-pink.png", new BMap.Size(300,157));
163 }
164 if(i<20){
165 myIcon= new BMap.Icon("../js/map-marker-flag-3-right-chartreuse.png", new BMap.Size(300,157));
166 }
167 if(i<10){
168 myIcon= new BMap.Icon("../js/map-marker-flag-3-right-azure.png", new BMap.Size(300,157));
169 }
170 */
171 var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])/* ,{icon:myIcon} */); // 创建标注
172 var content = data_info[i][2];
173 map.addOverlay(marker); // 将标注添加到地图中
174 addClickHandler(content,marker);
175 addyjcd(marker,data_info[i][3]);//标注添加右键菜单
176 }
177 }
178 //给该标注添加监听事件
179 function addClickHandler(content,marker){
180 marker.addEventListener("click",function(e){//事件监听
181 openInfo(content,e)}
182 );
183 }
184 //获取该标注 坐标 并创建窗口 并开启 
185 function openInfo(content,e){
186 var p = e.target;
187 var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
188 var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 
189 map.openInfoWindow(infoWindow,point); //开启信息窗口
190 }
191 
192 
193 //窗口样式
194 var opts = {
195 width : 300, // 信息窗口宽度
196 height: 100, // 信息窗口高度
197 title : "信息窗口" , // 信息窗口标题
198 enableMessage:true//设置允许信息窗发送短息
199 };

 

转载于:https://www.cnblogs.com/bowei/p/8258137.html