前端 H5 页面地图展示,只需要传入经纬度就可展示地图及周边生活娱乐

在闲暇时间自己整理了一下之前写过的H5地图,只需要传入经纬度就可以展示地图,及周边娱乐,交通等信息.

我直接贴上代码,你可以复制或者直接下载我上传的资源文件>>下载地址,希望对你有帮助!

我们直接上效果图吧

HTML5页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-language" content="zh-CN">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="applicable-device" content="pc"/>
<title>baidumap</title><link rel="stylesheet" href="detail2.css" type="text/css" /><link rel="stylesheet" href="common.css"/><link rel="stylesheet" href="xiangqing.css"/><script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="bg-color"/></html>
<div class="inner"><!-- 生活地图 --><div class="comm-box sh-map clear" id="shdt" style='background-color:#f9f9f9'><h3 class="noborder"><span style='background-color:#f9f9f9'>生活地图</span></h3><div class="wrap_content" ><div class="my_content wh1200"><div class="cont_box"><div class="cont_des_four  cont_des" id="peitao"><div class="cont_tit"><h2></h2></div><div class="cont_cont clearfix" style="padding-right:28px;"><div class="bd_map_box"><div class="bd_map"><div class="map_box" id="baidumap"></div></div><div class="map_tools"><div class="tool_tit_box clearfix"><ul class="t_t_ul"><li id="traffic" onclick="periphery('traffic')" class="active">交通</li><li id="education" onclick="periphery('education')" >教育</li><li id="medical" onclick="periphery('medical')"   >医疗</li><li id="shopping" onclick="periphery('shopping')"  >购物</li><li id="life" onclick="periphery('life')"  >生活</li></ul></div><div class="m_p_cont"><div class="tool_wrap"><div class="tool_one gongjiao"><div class="stand_txt"><p>公交</p></div><ul class="tool_list"><li><p class="fl station">正在加载<span></span></p><span class="t_range fr">XXX米</span></li></ul></div></div><a  id="map_more" target="_blank" href="javascript:void(0)" class="tool_more">更多>></a></div></div></div></div></div> </div></div>
</div></div>
</div>
<script src="https://api.map.baidu.com/api?v=2.0&ak=你申请的百度地图的ak" type="text/javascript"></script><script type="text/javascript">/* 百度地图 */var map ;var point;var markers = [];//经纬度var map_lng='112.945352';var map_lat='28.234486';var city = '长沙';var community_name = '长沙市';function clearMarkers(){for(var i in markers){map.removeOverlay(markers[i]);}}function addMarker(point,zoom){var marker = new BMap.Marker(point);  // 创建标注if(zoom){map.centerAndZoom(point, zoom);}else{map.centerAndZoom(point, 15);}map.addOverlay(marker);markers.push(marker)            // 将标注添加到地图中}function startAnimation(){for(var i in markers){markers[i].setAnimation(BMAP_ANIMATION_BOUNCE)}}$(function(){///地图功能/map = new BMap.Map("baidumap");            // 创建Map实例map.enableScrollWheelZoom();if(map_lng && map_lat){point = new BMap.Point(map_lng, map_lat);map.centerAndZoom(point, 15);periphery('traffic')}else{map.centerAndZoom(city,15)if(community_name){var local = new BMap.LocalSearch(map, {onSearchComplete: function(results){// 判断状态是否正确if (local.getStatus() == BMAP_STATUS_SUCCESS){var arr = [];for (var i = 0; i < results.getCurrentNumPois(); i ++){var obj = new Object();obj.title = results.getPoi(i).titleobj.address = results.getPoi(i).addressobj.point = results.getPoi(i).pointarr.push(obj);}var first = arr.shift();point = first.point;var zoom = map.getZoom();clearMarkers()addMarker(point,zoom)startAnimation()periphery('traffic')}}});local.search(city+community_name);}}})function periphery(type){$('#'+type).addClass('active')$('#'+type).siblings().removeClass('active')var options = {onSearchComplete: function(results){// 判断状态是否正确if (local.getStatus() == BMAP_STATUS_SUCCESS){var s = [];var lis = '';for (var i = 0; i < results.getCurrentNumPois(); i ++){var p = results.getPoi(i).point;var m = new BMap.Marker(p);  // 创建标注var opts = {width : 80,     // 信息窗口宽度height: 40,     // 信息窗口高度title : results.getPoi(i).title , // 信息窗口标题enableMessage:false,//设置允许信息窗发送短息message:results.getPoi(i).address}var distance = Math.ceil( map.getDistance(point,p));var infoWindow = new BMap.InfoWindow("距离："+distance+'米', opts);  // 创建信息窗口对象function info(m,opts,infoWindow,point){m.addEventListener("click", function(){map.openInfoWindow(infoWindow,point); //开启信息窗口});}if(i<6){if(results.keyword =='地铁'){lis += '<li>' +'<p class="fl station">'+results.getPoi(i).title+'<span>('+results.getPoi(i).address+')</span></p>' +'<span class="t_range fr">'+distance+'米</span>' +'</li>';}else{lis += '<li>' +'<p class="fl station">'+results.getPoi(i).title+'<span></span></p>' +'<span class="t_range fr">'+distance+'米</span>' +'</li>';}}info(m,opts,infoWindow,p);map.addOverlay(m);//s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);}//console.log(results)//console.log(results.keyword)switch(results.keyword){case '地铁':var tmp = '<div class="tool_one ditie">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>地铁站</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>';$('.tool_wrap').append(tmp)break;case '公交':var tmp = '<div class="tool_one gongjiao">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>公交</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>'$('.tool_wrap').append(tmp)$('#map_more').attr('href',results.moreResultsUrl)break;case '教育':var tmp = '<div class="tool_one jiaoyu">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>教育</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>'$('.tool_wrap').append(tmp)$('#map_more').attr('href',results.moreResultsUrl)break;case '医疗':var tmp = '<div class="tool_one yiliao">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>医疗</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>'$('.tool_wrap').append(tmp)$('#map_more').attr('href',results.moreResultsUrl)break;case '购物':var tmp = '<div class="tool_one gouwu">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>购物</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>'$('.tool_wrap').append(tmp)$('#map_more').attr('href',results.moreResultsUrl)break;case '生活':var tmp = '<div class="tool_one shenghuo">\n' +'                                        <div class="stand_txt">\n' +'                                            <p>生活</p>\n' +'                                        </div>\n' +'                                        <ul class="tool_list">\n' +lis+'                                        </ul>\n' +'                                    </div>'$('.tool_wrap').append(tmp)$('#map_more').attr('href',results.moreResultsUrl)break;}}}};var local = new BMap.LocalSearch(map, options);$('.tool_wrap').empty();switch(type){case 'traffic':map.clearOverlays();local.searchNearby('公交',point,1000);setTimeout(function(){local.searchNearby('地铁',point,1000);},100)var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画break;case 'education':map.clearOverlays();local.searchNearby('教育',point,1000);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画break;case 'medical':map.clearOverlays();local.searchNearby('医疗',point,1000);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画break;case 'shopping':map.clearOverlays();local.searchNearby('购物',point,1000);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画break;case 'life':map.clearOverlays();local.searchNearby('生活',point,1000);var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画break;}}
</script></div>
</body>
</html>

以及下面几个CSS样式资源文件

/* reset */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch;}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);font-size:14px;}
input[type="button"],input[type="submit"]{-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:14px/1.14 "Microsoft YaHei","Hiragino Sans GB W3",Helvetica,"Heiti SC","Droid Sans","Droidsansfallback",sans-serif;color:#333;outline:0;}
body {color:#000;background:#fff;font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif; font-size: 14px;}
/* body, button, input, pre, select, textarea {font-family: "Droid Sans","Droid Sans Fallback","Helvetica Neue",Helvetica,STHeiTi,sans-serif;
} */.btn{text-align: center;border: none;outline: none;font-size: 18px;border-radius: 5px;
}
select{appearance:none;  -moz-appearance:none;  -webkit-appearance:none;border:none;
}
input:-ms-input-placeholder{color:#d2d2d2;}/* Internet Explorer 10+ */
input::-webkit-input-placeholder{color:#d2d2d2;}/* WebKit browsers */
input::-moz-placeholder{color:#d2d2d2;}/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder{color:#d2d2d2;}/* Mozilla Firefox 19+ */ .fl{float:left;
}
.fr{float:right;
}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}.pr{position: relative;
}
.pa{position: absolute;
}
.wh1200{width: 1200px;min-width: 1200px;margin: 0 auto;
}
.bg-f8{background: #f8f8f8;
}
.bg_ff{background: #fff;
}.mb18{margin-bottom: 18px;
}
.ml07{margin-left: 7px;
}
.mt12{margin-top: 12px;
}
.mr16{margin-right: 16px;
}
.pl12{padding-left: 12px;
}/* 切换样式 */
.theme-tab {border-bottom: 1px solid #d2d2d2;margin-bottom: 30px;position: relative;
}
.theme-tab-item {position: relative;display: block;float: left;
}
.theme-tab-item > a, .add-rect-block .theme-tab-item > a {display: block;padding: 16px 25px;color: #333333;font-size: 16px;cursor: pointer;
}
.theme-tab-item.active > a, .add-rect-block .theme-tab-item.active > a {color: #e8464d;
}
.theme-tab-item:after {display: none;
}
.theme-tab-item.active:after {display: block;position: absolute;left: 0;bottom: -1px;width: 100%;height: 4px;background: #e8464d;content: "";
}.text-ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.s_orange{background: #ffece8;color: #ff570d;
}
.s_blue{background: #e5f4fc;color: #0091e8;
}
.s_gray{background: #f1f1f1;color: #888888;
}
.s_blue_2{color:#1cb1f5
}
._red{color: #e8464d;
}
.main_color:hover{color: #e8464d;cursor: pointer;
}/* fenye */
.pages{padding:59px 0 56px 0;text-align: center;clear:both;overflow: hidden;
}
.pages a{padding: 5px 10px;color: #a8a8a8;border: 1px solid #cdcdcd;margin:0 3px;background:#fff;
}
.pages a:hover{color:#e8464d;border: 1px solid #e8464d;
}
.pages a.active{color:#e8464d;border: 1px solid #e8464d;
}/* nav */
.breadcrumb{padding-left: 5px;
}
.breadcrumb li{height: 40px;line-height: 40px;float: left;
}
.breadcrumb >  li+ li:before { padding: 0 5px 0 8px; content: ">"; color: #acacac; font-size: 1em; position: relative; top: -0.1em; }
.breadcrumb li a{font-size: 14px;color: #999;display: inline-block;
}
.breadcrumb li a:hover{color: #333333;
}
.breadcrumb li:last-child a{color: #333333;
}.key_words{position: absolute;top: 455px;left: 100px;display: none;
}

@charset "UTF-8";
/**/
.inner{ width:1190px; margin:0 auto;position: relative;}
.bg-color{background-color: #F9F9F9;}
/* 标题样式 */
.comm-box{position:relative;z-index:0;margin-top:50px;background-color: #fff;}
.comm-box h3{height:24px;padding-bottom:25px;border-bottom: 1px solid #EFEFEF;}
.comm-box h3 span{float:left;padding-right:50px;font-size: 24px;color: #333;line-height: 24px;background: #fff;font-weight: 600;}
.comm-box h3 a{float:right;font-size:14px;color:#bbb;line-height: 16px;margin-top:10px;}
.comm-box h3 .tip{float: right;font-size: 12px;color: #BBB;line-height: 12px;margin-top:12px;}
.comm-box h3.noborder{border-bottom: none;padding-bottom:10px;}
.comm-box .cont-tit{position: absolute;left: 0;top: 25px;font-size: 14px;color: #9B9B9B;line-height: 14px;}
/**/
.infomation-box li .label{color: #9b9b9b;margin-right:15px;}
/**/
.infomation-box li .value{color: #000;}
.infomation-box li .value a{text-decoration: underline;margin-right:15px;}


.bd_map_box{position: relative;height: 524px;
}
.bd_map_box .bd_map{width: 100%;height: 100%;}
.bd_map_box .bd_map .map_box{width: 100%;height: 100%;
}.map_tools{position: absolute;top: 26px;right: 15px;width: 402px;background: #fff;box-shadow: 0 0 5px #ddd;
}
.map_tools .tool_tit_box{width: 100%;border-bottom: 2px solid #009bff;background: #f1f1f1;
}
.map_tools .tool_tit_box li{float: left;width: 20%;height: 42px;line-height: 42px;text-align: center;color: #000000;cursor: pointer;
}
.map_tools .tool_tit_box li.active{background: #009bff;color: #fff;
}
.map_tools .m_p_cont{padding-left: 29px;padding-top: 10px;padding-bottom: 72px;position: relative;
}
.map_tools .m_p_cont p,.map_tools .m_p_cont span,.map_tools .m_p_cont a{font-size: 14px;
}
.map_tools .m_p_cont .tool_one{margin-top: 15px; overflow: hidden;
}
.m_p_cont .tool_wrap{max-height: 350px;overflow-y: auto;
}
.m_p_cont .tool_one .stand_txt{height: 36px;line-height: 36px;text-indent: 9px;color: #333333;border-bottom: 1px solid #dddddd;
}
.m_p_cont .tool_one .tool_list{padding-top: 14px;
}
.m_p_cont .tool_one .tool_list li{height: 38px;line-height: 38px;padding-left: 9px;
}
.m_p_cont .tool_one .tool_list li p{color: #394042;padding-left: 28px;max-width: 210px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.m_p_cont .tool_one.ditie .station{background: url(img/icon/subway.png) no-repeat;background-size: 15px 18px;background-position: left center;
}
.m_p_cont .tool_one.gongjiao .station{background: url(img/icon/bus.png) no-repeat;background-size: 16px 16px;background-position: left center;
}
.m_p_cont .tool_one.jiaoyu .station{background: url(img/icon/edu.png) no-repeat;background-size: 16px 16px;background-position: left center;
}
.m_p_cont .tool_one.yiliao .station{background: url(img/icon/doctor.png) no-repeat;background-size: 16px 16px;background-position: left center;
}
.m_p_cont .tool_one.gouwu .station{background: url(img/icon/shop.png) no-repeat;background-size: 16px 16px;background-position: left center;
}
.m_p_cont .tool_one.shenghuo .station{background: url(img/icon/life.jpg) no-repeat;background-size: 16px 16px;background-position: left center;
}
.m_p_cont .tool_one .tool_list li p > span{color: #999999;
}
.m_p_cont .tool_one .tool_list li .t_range{padding-right: 32px;color: #394042;
}
.m_p_cont .tool_more{position: absolute;right: 30px;bottom: 32px;color: #5184f9;
}

前端 H5 页面地图展示,只需要传入经纬度就可展示地图及周边生活娱乐相关推荐

h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
转载https://cloud.tencent.com/developer/article/1609256 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar ...
asp.net core + 前端H5 页面视频站制作尝试
.net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...
python地图可视化把直辖市和地级市画在一起_Python地理地图可视化：Folium解析百度地图上中国城市中心的经纬度并显示在地图上（3）,folium,把,出来,展示,三...
python地理地图可视化:folium把百度地图各个城市经纬度解析出来并在地图上展示(三) import json import webbrowser as wb import folium NAM ...
获取百度地图上某点的经纬度信息（百度地图拾取坐标系统）
百度地图拾取坐标系统的地址:http://api.map.baidu.com/lbsapi/getpoint/index.html
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
本文内容在以下环境运行成功: Windows10 Python2.7 android-sdk_r24.4.1 Appium-windows-1.15.1 chromedriver_2.40 小米手机 ...
threejs模型可视化编辑器_加油！所见即所得的H5页面可视化编辑器H5-Dooring
最近总结一下笔者目前开发的h5在线编辑器H5-Dooring. 目前已经在github上开源免费使用. 目前市面上也有很多优秀的H5在线编辑器, 也很强大, 笔者将从几个维度来介绍H5-Dooring ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
意派Epub360 | 制作微信H5页面的流程思路引导
H5页面其实就是一种可交互的网页,除非要在其中设置微信授权(此举是为了获取用户的微信昵称及头像信息),否则也是可以直接在浏览器中在线浏览的,既方便又不占内存.一般来说,制作H5页面的流程基本有:确认项 ...

前端 H5 页面地图展示,只需要传入经纬度就可展示地图及周边生活娱乐

前端 H5 页面地图展示,只需要传入经纬度就可展示地图及周边生活娱乐相关推荐

最新文章

热门文章