简易开发的百度地图API
2024-05-08 05:12:45
原理
页面引入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}}];//创建markerfunction 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);}})()}}//创建InfoWindowfunction 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;}//创建一个Iconfunction 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值,效果如图
简易开发的百度地图API相关推荐
- Android开发-基于百度地图API开发仿滴滴出行APP界面的实现
前 言 近年来,由于移动互联网快速的发展以及基于移动设备的APP的普及,移动互联网改变了人们的生活方式.从线上的电子支付到线下的出行,移动互联网是当今社会人们生活不可或缺的一部分,而线下出行的网约车的 ...
- 百度地图api php开发教程,百度地图API使用方法详解_PHP
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/js ...
- 百度地图api php开发教程,百度地图API使用方法详解_php实例
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/js ...
- IOS开发 之百度地图API环境搭建
1 前言 由于工作需要,要开始捣腾百度地图了,今天上午初始牛刀,各种碰壁,无奈之下,中午睡了一觉,养精蓄锐,以备下午大战三百回合,所幸下午中午把百度地图Demo捣腾出来了,在此与大家分享,环境搭建教程 ...
- android 百度室内地图开发,androidsdk | 百度地图API SDK
更新时间:2020-06-23 室内地图简介 自v4.0版起,百度地图SDK室内图功能正式上线,辅助开发者实现全新的地理位置服务体验,室内地图与百度地图App同步更新. 支持的公众建筑包含购物商场.机 ...
- 百度地图api开发详解(android版).pdf,百度地图API开发指南原版.pdf
百度地图API开发指南原版 百度地图 API 开发指南 百度地图 API 开发指南 目录 简介 3 什么是百度地图 API 3 面向的读者 3 获取 API 3 开发移动平台上的地图应用 3 兼容性 ...
- java调用百度地图API依据地理位置中文获取经纬度
百度地图api提供了非常多地图相关的免费接口,有利于地理位置相关的开发,百度地图api首页:http://developer.baidu.com/map/. 博主使用过依据地理依据地理位置中文获取经纬 ...
- android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
- 【百度地图API】——如何用label制作简易的房产标签
摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产标签的方法呢? 答案当然是有的啦~ 我们可以利用label嘛! ...
- Android中应用百度地图API开发地图APP实例-显示百度地图
场景 效果 在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY http://lbsyun.baidu.com/index.php 申请API_KEY 登录百度开放平台后找到控制台下 ...
最新文章
- 向量算子优化Vector Operation Optimization
- [ZZ]STM32之RCC
- 遍历Newtonsoft.Json.Linq.JObject
- 计算机生活工作原理,计算机基本工作原理是什么？
- Mysql数据库，表，字符集，主外键等创建的sql模板
- java jxl 写 excel文件_Java使用jxl写入Excel文件
- 计算机组成原理第二章数据,计算机组成原理第二章数据在计算机中的表示
- 米度教育零基础三个月学会机器学习视频总结
- Intellij IDEA 添加jar包的三种方式
- Django里URL配置中name参数的作用
- android app运行显示两个图标
- java调用vissim的com接口_VISSIM 高级应用COM接口开发初级入门
- oracle数据库单张表备份,oracle数据库如何备份一张表
- python实现明星专家系统：人脸识别自动比对
- like语句太慢 sqlserver_MySQL Like模糊查询速度太慢如何解决
- 供应链管理的五大策略
- 了解CI/CD流水线
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
- 工业面阵相机及镜头的选择（笔记）
- GUI(Graphical User Interface)