联系官方销售客服
1835022288
028-61286886
分享一个这种造型的地图代码
以下是HTML放到你想显示地图信息的SHOW页面
<link href="{HOME_THEME_PATH}web/css/map.css" rel="stylesheet" type="text/css" /> <div class="lookroad"> <div class="mapmodelbody" style="height: 500px"> <div class="baidumapout"> <div class="baidumap" id="roadmap"></div> </div> <div class="searchresult"> <div class="layoutborder"> <div class="mapyyinfo"> <p class="mapyyname"><span><i class="fa fa-hospital-o"></i> {$title}</span></p> <p class="mapyyads"><i class="bi bi-geo-alt-fill"></i>地址:<span>{$dizhi}</span></p> </div> <div class="roadtype"> <span class="active" id="toHere">到这里</span> <span id="fromHere">从这里出发</span> </div> <div class="roadinput"> <span id="roadinput_mark">起点</span> <input type="text" placeholder="请输入您所在的位置:地址、公交、地铁" id="roadinputId" autocomplete="off" maxlength="100" /> <p><b class="typebus">公交</b><b class="typecar">驾车</b></p> </div> <div class="maproadresult" id="roadresult"></div> </div> </div> </div> </div>
以下是JS代码
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度地图密匙"></script> <script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <script type="text/javascript"> var numsss = 0; $(function () { function baiduroadmap(lng, lat) { // 百度地图API功能 var map = new BMap.Map("roadmap"); var point = new BMap.Point(lng, lat); map.centerAndZoom(point, 12); map.enableScrollWheelZoom(true); var ac = new BMap.Autocomplete( //建立一个自动完成的对象 { "input": "roadinputId" , "location": map }); ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件 var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } }); var myValue; ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; }); return { setpoint: function (elt) { //医院经度,医院纬度,医院名称,医院地址,机构等级,体检服务 var $this = elt; var jgtp = '{dr_thumb($t.thumb, 120, 90)}'; //缩略图 var jgmc = '<i class="fa fa-hospital-o"></i> {$t.title}'; //名称 var jgdj = '{dr_linkage('address', $area, 0, 'name')}'; //联动区域名称 var xxdz = '{$t.dizhi}'; //地址 var tjfw = '{dr_strcut(dr_clearhtml($content), 20, '...')}'; //医院体检服务 var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '<img src="' + jgtp + '" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + '地址:' + xxdz + '<br/>区域:' + jgdj + '<br/>介绍:' + tjfw + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title: jgmc, //标题 width: 290, //宽度 height: 105, //高度 panel: "panel", //检索结果面板 enableAutoPan: true, //自动平移 searchTypes: [ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(point); //创建marker对象 marker.disableDragging(); //marker可拖拽 marker.addEventListener("click", function (e) { searchInfoWindow.open(marker); }) map.addOverlay(marker); //在地图中添加marker searchInfoWindow.open(marker); } , getroad: function (isbus, roadtype) { map.clearOverlays(); var transit = null; if (isbus) { transit = new BMap.TransitRoute(map, { renderOptions: { map: map , panel: "roadresult" } }); } else { transit = new BMap.DrivingRoute(map, { renderOptions: { map: map , panel: "roadresult" , enableDragging: true //起终点可进行拖拽 } }); } transit.clearResults(); if (!roadtype) { transit.search(myValue, point); } else { transit.search(point, myValue); } } } }; var roadmapfun; roadmapfun = baiduroadmap({$map});//地图字段 roadmapfun.setpoint(); $(".lookroad").on("click", ".roadtype span", function () { $(this).addClass("active").siblings().removeClass("active"); }); $(".lookroad").on("click", ".roadinput b", function () { var $input = $(this).siblings("input"); var $roadtype = $(this).parents(".searchresult").find(".roadtype .active").index(); var isbus = $(this).hasClass("typebus"); roadmapfun.getroad(isbus, $roadtype); }); $(".lookroad").on("click", "#toHere", function () { $("#roadinput_mark").html("终点"); }); $(".lookroad").on("click", "#fromHere", function () { $("#roadinput_mark").html("起点"); }); }); </script>
以下是css样式文件代码
.mapmodelbody .baidumapout { float: left; width: 65%; height: 100%; box-sizing: border-box; border: 1px solid #00c8aa; position: relative; border-right-color:#b3d7d2; } .mapmodelbody .baidumapout .baidumap { width: 100%; height: 100%; } .lookroad .mapmodelbody .searchresult { width: 35%; overflow-y: auto; overflow-x: hidden; } .lookroad .mapmodelbody .searchresult::-webkit-scrollbar { width:1px; } /* 婊氬姩妲� */ .lookroad .mapmodelbody .searchresult::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(77,250,200,0.3); border-radius:10px; } /* 婊氬姩鏉℃粦鍧� */ .lookroad .mapmodelbody .searchresult::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(0,0,0,0.1); -webkit-box-shadow:inset006pxrgba(77,250,200,0.5); } .lookroad .mapmodelbody .searchresult::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } .mapmodelbody .searchresult { float: left; height: 100%; box-sizing: border-box; border: 1px solid #00c8aa; border-left: none; } .lookroad .layoutborder { min-height: 100%; } .lookroad .mapyyinfo { padding-bottom: 3px; } .lookroad .mapyyinfo p.mapyyname { font-size: 16px; color: #1eb388; font-weight: bold; padding: 4px 10px 0; line-height: 30px; } .lookroad .mapyyinfo p { font-size: 13px; color: #666; padding: 4px 10px 0; line-height: 30px; margin: 0!important; } .lookroad .roadtype { overflow: hidden; border-top: 1px solid #00c8aa; } .lookroad .roadtype span.active, .lookroad .roadtype span:hover { background:#00c8aa url(../img/icon_gps1.png) no-repeat 10px center; color: #fff; } .lookroad .roadtype span:first-child { width: 50%; } .lookroad .roadtype span { float: left; width: 50%; background: url(../img/icon_gps2.png) no-repeat 10px center; box-sizing: border-box; padding: 10px 0 10px 30px; cursor: pointer; } .lookroad .roadtype span.active{ background:#00c8aa url(../img/icon_gps1.png) no-repeat 10px center; } .lookroad .roadinput { border-top: 1px solid #00c8aa; padding: 10px 10px; overflow: hidden; } .lookroad .roadinput span { display: block; float: left; line-height: 25px; margin-right: 5px; } .lookroad .roadinput input { width: 110px; border: 1px solid #00c8aa; outline: 0; height: 29px; padding: 0 5px!important; margin-left: 5px; float: left; } .lookroad .roadinput p { text-align: center; width: 125px; float: left; position: relative; top: -1px; padding: 0; margin: 0!important; } .lookroad .roadinput b { margin-left: 10px; width: 50px; text-align: left; display: inline-block; line-height: 25px; font-weight: normal; border: 1px solid #00c8aa; position: relative; top: 1px; cursor: pointer; text-align: center; background-color: #00c8aa; color: #fff; border-radius: 3px!important; } .lookroad .maproadresult { border-top: 1px solid #00c8aa; } .lookroad input{ margin: 0!important; padding: 0!important; } .BMapLib_SearchInfoWindow .BMapLib_bubble_top{ font-weight: bold; color: #00c8aa; } .BMapLib_SearchInfoWindow .BMapLib_bubble_content{ color: #999; } .BMapLib_nav_tab li{ height: 30px!important; line-height: 30px; text-indent: 10px; padding: 0!important; } .BMapLib_trans_text,.BMapLib_search_text{ height: 26px!important; line-height: 26px!important; } .BMapLib_SearchInfoWindow .BMapLib_bubble_content img{ width: 110px!important; height: 95px!important; padding: 2px; border:1px solid #eee; } .BMapLib_SearchInfoWindow .iw_bt, .BMapLib_SearchInfoWindow .iw_bt_down, .BMapLib_SearchInfoWindow .iw_bt_over{ margin-right: 0!important; background: #00c8aa!important; color: #fff!important; } .BMapLib_SearchInfoWindow .iw_bt:nth-child(2){ margin-left: 5px!important; } .BMapLib_SearchInfoWindow .BMapLib_trans{ left: 125px!important; top: 211px!important; } #BMapLib_stationText0{ width:30px!important; } .BMapLib_nav_tab_content li{ padding: 10px 5px 0 5px!important; height: 45px!important; } .BMapLib_nav_tab_content li td{ padding: 0!important; } .sel_n .sel_body_title{ border-right: 1px solid #e6c3a1!important; border-radius: 0 2px 2px 0!important; } .sel_y .sel_body_top{ border-right: 1px solid #b8c7e6!important; border-radius: 0 2px 2px 0!important; } .sel_n .sel_body_name{ height: 31px!important; padding: 0 7px!important; line-height: 31px; }
将就用吧,第一次分享,感谢好心人给我的分享,尽点绵薄之力!