简易开发的百度地图API
来源:互联网 发布:hypermill五轴编程招聘 编辑:程序博客网 时间:2024/06/16 17:08
原理
页面引入JS 设置DIV
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fwNaroz6Ddque81aKt9gWkZDTLKSoTWU"></script> <div id="map"></div> <script> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数: function createMap(){ var map = new BMap.Map("map");//在百度地图容器中创建一个地图 var point = new BMap.Point(116.463091,39.918515);//定义一个中心点坐标 map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数: function setMapEvent(){ map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{title:"公司地址",content:"中海广场",point:"116.463046|39.916633",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"四川轮动方程科技有限公司",content:"成都市武侯区科华北路65号桃园广场27楼0007号",point:"104.081514|30.632646",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"成都惠淘车汽车服务有限公司",content:"成都市金牛区二环路西三段181号10层10号",point:"104.044129|30.696186",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"成都惠淘车汽车服务有限公司绵阳分公司",content:"绵阳高新区绵兴东路91号",point:"104.690037|31.472305",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"成都悦成汽车服务有限公司",content:"成都市金牛区二环路西三段181号10层10号",point:"104.043158|30.695813",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"重庆惠淘车汽车服务有限公司",content:"重庆市渝北区龙山街道余松路315号阳光地中海7幢1-门面8",point:"106.495969|29.594064",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"轮动方程(大连)科技有限公司",content:"辽宁省大连市甘井子区汇利街69号25层14号",point:"121.555727|38.961575",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"哈尔滨轮动方程汽车服务有限公司",content:"哈尔滨市道里区城乡路289号",point:"126.589839|45.73459",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"哈尔滨轮动方程汽车有限公司大庆分公司",content:"大庆市萨尔图区万宝三区配套二商服16号",point:"125.10393|46.577939",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"合肥市轮动方程汽车租赁有限公司",content:"合肥市庐阳区濉溪路112号万豪广场A座商250号",point:"117.292431|31.885026",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"合肥市轮动方程汽车租赁有限公司阜阳分公司",content:"阜阳市颍州区文峰路100号",point:"115.835681|32.898838",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"合肥市轮动方程汽车租赁有限公司芜湖分公司",content:"芜湖市镜湖区汇金广场A2206",point:"118.374796|31.342753",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"郑州惠淘车汽车服务有限公司",content:"郑州市金水区花园路39号3号楼2单元7层703号",point:"113.687673|34.80071",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"郑州轮动方程汽车租赁有限公司",content:"郑州市金水区金水路219号1号楼1单元15层1505号",point:"113.655295|34.769189",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"河南轮动鑫方程汽车租赁有限公司",content:"郑州市郑东新区中兴路与相济路交叉口庙张南院19号楼2单元3楼东户",point:"113.781999|34.786469",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"宁波轮动方程汽车服务有限公司嘉兴分公司",content:"浙江省嘉兴市南湖区广益路1338号汽车A厅319号",point:"120.816734|30.742862",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"宁波轮动方程汽车服务有限公司",content:"浙江省宁波市鄞州区彩虹南路16号(8-13)(集中办公区)",point:"121.391551|30.206347",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"宁夏轮动方程科技有限公司",content:"宁夏银川市兴庆区安居工程高台寺住宅区21号楼5单元602室",point:"106.30491|38.461728",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"唐山轮动方程汽车服务有限公司",content:"河北省唐山市路南区新华贸大厦1003号",point:"118.176802|39.631534",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"石家庄轮动汽车租赁有限公司",content:"河北省石家庄市桥西区自强路35号丰辉大厦2003室",point:"114.488336|38.049644",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"长春市越泽汽车服务有限公司",content:"长春市二道区晨宇小区5幢609号房",point:"125.38902|43.893488",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"松原市轮动方程汽车租赁有限公司",content:"吉林省松原市宁江区乌兰大街2286号",point:"124.839434|45.133184",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"南京仑动恒尚汇汽车租赁有限公司徐州分公司",content:"徐州市云龙区绿地世纪城七期办公楼号楼1-501",point:"117.252357|34.252805",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"南京仑动恒尚汇汽车租赁有限公司",content:"南京市玄武区中山东路319号",point:"118.828296|32.045235",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"苏州市轮动方程汽车租赁有限公司",content:"苏州市吴中区木渎镇金枫南路198号6幢101室",point:"120.532942|31.274945",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"扬州市轮动方程汽车租赁有限公司",content:"扬州市邗江区三盛国际广场办公楼14楼1413室",point:"119.401233|32.384978",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"太原市轮动方程汽车租赁有限公司",content:"山西省太原市迎泽区建设南路632号盛饰大厦14层西101室",point:"112.593392|37.830494",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"太原市轮动方程汽车租赁有限公司阳泉分公司",content:"山西省阳泉市郊区李家庄乡李家庄村(阳泉旧机动车交易中心内)",point:"113.587013|37.897699",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"武汉惠淘车汽车服务有限公司",content:"武汉市江岸区滨江苑三期(汉江楼)1栋2单元2层2室",point:"114.324683|30.629281",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"常州市轮动方程汽车租赁有限公司",content:"常州市钟楼区北大街大庙弄2号13楼1305室",point:"119.957562|31.78619",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ,{title:"长沙轮动方程汽车贸易有限公司娄底分公司",content:"娄底市娄星区氐星路乐坪东街1104号",point:"112.007853|27.729252",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}} ]; //创建marker function addMarker(){ for(var i=0;i<markerArr.length;i++){ var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0,p1); var iconImg = createIcon(json.icon); console.log(json.icon) var marker = new BMap.Marker(point,{icon:iconImg}); var iw = createInfoWindow(i); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor:"#808080", color:"#333", cursor:"pointer" }); (function(){ var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",function(){ _marker.getLabel().hide(); }) _iw.addEventListener("close",function(){ _marker.getLabel().show(); }) label.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i){ var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) return icon; } initMap();//创建和初始化地图 </script>
其中ak后面的值是网上免费获取的key值,效果如图
阅读全文
0 0
- 简易开发的百度地图API
- 百度的地图开发API
- 百度地图API开发
- 百度地图开发API
- 百度地图API开发的定位APK
- 百度地图API的开发(1)
- iOS开发 -- 百度地图api的使用
- 百度地图的JS开发API应用
- 基于百度地图API的开发
- 百度地图API开发指南
- IOS开发百度地图API
- 百度地图API开发指南
- iOS 开发-百度地图API
- IOS开发百度地图API
- 百度地图API开发概述
- 百度地图API开发应用
- 百度地图API -- 开发总结
- 百度地图API开发指南
- SDUT-1273-->面向对象程序设计上机练习十一(运算符重载)
- 【转载】图解冒泡排序
- scrapy-redis所有request爬取完毕,如何解决爬虫空跑问题?
- libgif-dev : Depends: libgif4 (= 4.1.6-11) but 4.1.6-11ubuntu0.14.04.1 is to be installed
- Altium Designer v15.07 64位汉化破解版
- 简易开发的百度地图API
- Exception:java.lang.OutOfMemoryError: Java heap space
- Android ViewPager+Fragment超高仿微信主界面
- 分析函数入门over(Partition by...)
- EventBus的使用
- Oracle表空间
- Capstone训练营13
- 2017/12/22 第十三天培训
- etcd-v2第三集