1. 程式人生 > >前端 H5 頁面地圖展示,只需要傳入經緯度就可展示地圖及周邊生活娛樂

前端 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).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,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;
}