百度地图开发说明文档.doc
百度地图开发说明文档.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 百度 地图 开发 说明 文档
- 资源描述：
-
百度地图说明文档 1.界面展示 界面整体分为4部分，主地图显示区、鼠标测距地图区、按钮与输入区、结果面板区。 主地图显示区用于除测距以外的功能显示，鼠标测距地图区只用于鼠标测距，结果面板区显示部分查询结果。 功能实现包括基本操作功能：鼠标滚轮放大、缩小、全图、拖拽平移、卫星地图切换、鼠标测距，其他功能有 （1） 定位查询（输入经纬度坐标在图上查询具体位置） （2） 经纬度坐标获取（鼠标点击获取图上经纬度坐标） （3） 快速查询（不同行政区级别点击查询缩放到当前位置，通过城市定位和关键字提示实现） （4） 关键词查询（输入查询内容将查询结果显示到控制面板和图上） （5） 覆盖物叠加（点击按钮将覆盖物添加到图上） （6） 删除覆盖物（点击按钮删除覆盖物，包括关键字查询、路线查询在图上显示的覆盖物，用于清除查询结果，便于二次查询） （7） 信息窗口（点击图上点覆盖物弹出信息窗口） （8） 地址解析/逆解析、添加点线面（直接选用工具条上按钮进行绘制） （9） 编辑功能（点击按钮开启/关闭编辑） （10） 获取绘制的覆盖物个数，清除所有覆盖物 （11） 步行路线规划（包括地图上显示和结果面板显示） （12） 驾车路线规划（信息窗口显示驾车所需时间和行驶距离，地图和结果面板显示路线） （13） 公交车和地铁路线查询（输入公交车或地铁号，在结果面板显示经过的站点及发车信息） （14） 公交车出行路线规划（地图上显示路线） （15） 输入时关键字提示 （16） 右下角打开路况提示 以下为部分功能实现效果截图 关键字查询（结果显示在地图上） 关键字查询结果显示在结果面板 步行路线规划 驾车路线规划 公交车和地铁路线站点查询，结果显示在查询面板 公交路线规划 2.框架 界面先分成左右两部分，container1、container2分别占70%和30%，左侧上部为主地图allmap占70%，下部按钮输入区container3占30%，右侧鼠标测距区allmap1占30%，结果面板r-result占70%。 #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} //主地图 #allmap1{margin:0 0 3px;height:30%;} //鼠标测距地图 #r-result{margin:0 0 3px;height:70%;} 3.关于未实现的功能 点击折线、多边形显示信息窗口，点（marker类）覆盖物有打开/关闭信息窗方法openInfoWindow(infoWnd: InfoWindow)/closeInfoWindow()，但是折线和多边形（Polyline类和Polygon类）覆盖物没有信息窗相关方法，但是有返回折线的点数组的方法getPath()返回值为Array<Point>，然而实施过程中，无法获取到点数组，因此无法继续进行。 获取点线面的坐标以及编辑后的坐标到文本框中，如果上述获取点数组可以实现则可以根据百度地图API中的示例DEMO将提示窗的信息存储到文本框。 附代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #container1{width:70%;height:100%;float:left;overflow: hidden;margin:0;} #container2{width:30%;height:100%;float:left;overflow: hidden;margin:0;} #container3{width:100%;height:30%;float:left;overflow: hidden;margin:0;} #allmap{margin:0 0 3px;height:70%;} #allmap1{margin:0 0 3px;height:30%;} #r-result{margin:0 0 3px;height:70%;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src=" <script type="text/javascript" src=" <script type="text/javascript" src=" <script src=" <script type="text/javascript" src=" <link href=" rel="stylesheet" type="text/css" /> <!--加载鼠标绘制工具--> <script type="text/javascript" src=" <link rel="stylesheet" href=" /> <!--加载检索信息窗口--> <script type="text/javascript" src=" <link rel="stylesheet" href=" /> <title>贾明瑞百度地图</title> </head> <body> <div id="container1"> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> </div> <div id="container3"> <p> <input type="button" onClick="add_control1();" value="显示工具条" /> <input type="button" onClick="delete_control1();" value="隐藏工具条" /> <input type="button" onClick="add_control2();" value="显示地图类型缩略图" /> <input type="button" onClick="delete_control2();" value="隐藏地图类型缩略图" /> <input type="button" onClick="fanwei();" value="获取地图显示范围" /> <input type="button" onClick="distance();" value="打开鼠标测距" /> <input type="button" onClick="distance();" value="关闭鼠标测距" /> <input type="button" onClick="quantu();" value="全图" /> </p> <p> 经度: <input id="longitude" type="text" size="8" /> 纬度: <input id="latitude" type="text" size="8" /> <input type="button" value="坐标定位" onClick="theLocation1()" /> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="城市定位" onClick="theLocation2()" /> <input type="button" value="获取经纬度" onClick="zuobiao()" /> <input type="text" name="dizhi" id="dizhi" width="90px" > <input type="button" onClick="dizhijiexi();" value="地址解析" /> <input type="button" onClick="nidizhijiexi();" value="逆地址解析" /> <p> <input type="button" onClick="add_overlay();" value="添加覆盖物" /> <input type="button" onClick="remove_overlay();" value="删除覆盖物" /> <input type="button" value="开始编辑"onclick = "marker.enableDragging();polyline.enableEditing();polygon.enableEditing();"/> <input type="button" value="停止编辑"onclick = "marker.disableDragging();polyline.disableEditing();polygon.disableEditing();"/> <input type="button" value="获取绘制的覆盖物个数" onClick="alert(overlays.length)"/> <input type="button" value="清除所有覆盖物" onClick="clearAll()"/> <input type="text" name="textfield" id="textfield" > <input name="button" type="submit" id="button" onClick="search2() " value="关键字查询"> <input name="button" type="submit" id="button" onClick="search1() " value="查询面板"> </p> <p> <input type="text" id="start_point" size="12" > <input type="text" id="end_point" size="12" > <input type="button" id="result1" onClick="walk1() " value="步行路线规划" /> <input type="button" id="result2" onClick="walk2() " value="步行路线面板" /> <input type="text" id="sop" size="12" > <input type="text" id="eop" size="12" > <input type="button" id="result1" onClick="drive1() " value="驾车距离与时间" /> <input type="button" id="result2" onClick="drive2() " value="驾车路线面板" /> </p> <p> <label>输入公交地铁编号</label><input type="text" name="bus" id="bus" > <input name="button2" type="submit" id="button2" onClick="search3() " value="公交地铁站点查询"> <select> <option value="0">最少时间</option> <option value="1">最少换乘</option> <option value="2">最少步行</option> <option value="3">不乘地铁</option> </select> <input type="text" id="start" size="12" > <input type="text" id="end" size="12" > <input type="button" id="result" onClick="search() " value="公交路线查询" /> </p> </div> </div> <div id="container2"> <div id="allmap1"></div> <p>请输入:<input type="text" id="suggestId" size="12" value="" style="width:150px;" />关键字提示</p> <div id="r-result"></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('map'); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 10); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); //绘制覆盖物获取数量及清除覆盖物 var overlays = []; var overlaycomplete = function(e){ overlays.push(e.overlay); }; var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 } //实例化鼠标绘制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 }, circleOptions: styleOptions, //圆的样式 polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 } //添加覆盖物 删除覆盖物 var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点 var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线 var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆 var polygon = new BMap.Polygon([ new BMap.Point(116.387112,39.920977), new BMap.Point(116.385243,39.913063), new BMap.Point(116.394226,39.917988), new BMap.Point(116.401772,39.921364), new BMap.Point(116.41248,39.927893) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形 var pStart = new BMap.Point(116.392214,39.918985); var pEnd = new BMap.Point(116.41478,39.911901); var rectangle = new BMap.Polygon([ new BMap.Point(pStart.lng,pStart.lat), new BMap.Point(pEnd.lng,pStart.lat), new BMap.Point(pEnd.lng,pEnd.lat), new BMap.Point(pStart.lng,pEnd.lat) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形 var infoWindow1 = new BMap.InfoWindow("天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门"); // 创建信息窗口对象 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow1); //开启信息窗口 }); //添加覆盖物 function add_overlay () { map.addOverlay(marker); //增加点 map.addOverlay(polyline); //增加折线 map.addOverlay(circle); //增加圆 map.addOverlay(polygon); //增加多边形 map.addOverlay(rectangle); //增加矩形 } //清除覆盖物 function remove_overlay(){ map.clearOverlays(); } //地址解析 function dizhijiexi() { var dizhi=document.getElementById("dizhi").value; var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint(dizhi, function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市"); } //逆地址解析 function nidizhijiexi() { var geoc = new BMap.Geocoder(); map.addEventListener("click", function(e){ var pt = e.point; geoc.getLocation(pt, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); }); } //添加控件和比例定义 var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮 /*缩放控件type有四种类型: BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/ var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}); var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}); var overView = new BMap.OverviewMapControl(); var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); //添加控件和比例尺 function add_control1(){ map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation); } //移除控件和比例尺 function delete_control1(){ map.removeControl(top_left_control); map.removeControl(top_left_navigation); map.removeControl(top_right_navigation); } //添加地图类型和缩略图 function add_control2(){ map.addControl(mapType1); //2D图，卫星图 map.addControl(mapType2); //左上角，默认地图控件 map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦 map.addControl(overView); //添加默认缩略地图控件 map.addControl(overViewOpen); //右下角，打开 } //移除地图类型和缩略图 function delete_control2(){ map.removeControl(mapType1); //移除2D图，卫星图 map.removeControl(mapType2); map.removeControl(overView); map.removeControl(overViewOpen); } //是否显示路况提示面板 var ctrl = new BMapLib.TrafficControl({ showPanel: false //是否显示路况提示面板 }); map.addControl(ctrl); ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); //获取地图显示范围 function fanwei() { var bs = map.getBounds(); //获取可视区域 var bssw = bs.getSouthWest(); //可视区域左下角 var bsne = bs.getNorthEast(); //可视区域右上角 alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat); } map.enableContinuousZoom(); var size = new BMap.Size(10, 20); map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市之间事件 // onChangeBefore: function(){ // alert('before'); // }, // 切换城市之后事件 // onChangeAfter:function(){ // alert('after'); // } })); //鼠标测距 function distance() { var map = new BMap.Map("allmap1"); map.centerAndZoom("北京",12); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); var myDis = new BMapLib.DistanceTool(map); map.addEventListener("load",function(){ myDis.open(); //开启鼠标测距 }); } function close_distance() { var map = new BMap.Map("allmap1"); map.centerAndZoom("北京",12); map.enableScrollWheelZoom(true); map.enableInertialDragging(true); var myDis = new BMapLib.DistanceTool(map); map.addEventListener("load",function(){ myDis.close(); //关闭鼠标测距 }); } //全图 function quantu() { setTimeout(function(){map.panTo(new BMap.Point(116.4035,39.915)); }); setTimeout(function(){map.setZoom(5)}); map.enableScrollWheelZoom(true); } //经纬度定位 function theLocation1(){ if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){ map.clearOverlays(); var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); var marker = new BMap.Marker(new_point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.panTo(new_point); } } //城市定位 function theLocation2(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,10); // 用城市名设置地图中心点 } } //获取经纬度 fun展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/7595649.html