博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图demo
阅读量:4656 次
发布时间:2019-06-09

本文共 4555 字,大约阅读时间需要 15 分钟。

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

 

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

你可能感兴趣的文章
AS3全局与局部坐标转换
查看>>
Java内部类详解
查看>>
初识Twisted(一)
查看>>
linux 软件安装篇
查看>>
Sql server数据库大小写敏感设置
查看>>
JAVA多线程-内存模型、三大特性、线程池
查看>>
RxJS速成 (下)
查看>>
无锁栈与无锁队列
查看>>
微信开发第8章 通过accesstoken将长连接转换为短链接
查看>>
[刷题]Codeforces 785D - Anton and School - 2
查看>>
四川红油的制法
查看>>
Java重写《C经典100题》 --21
查看>>
【Android基础】Fragment 详解之Fragment生命周期
查看>>
链表(裸题)
查看>>
11运算符重载
查看>>
磁盘系统的管理
查看>>
C/S
查看>>
Http Get/Post请求的区别
查看>>
STM32一键下载电路设计原理
查看>>
C语言中函数返回字符串的四种方法
查看>>