前端 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=Va3AQDi5HxLTcxfSDa0Oco1F1lkt0isx" 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).title
obj.address = results.getPoi(i).address
obj.point = results.getPoi(i).point
arr.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,******,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;
}