[html]代码库
<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%; font-family:"微软雅黑";font-size: 14px;}
*{ margin: 0;padding: 0;}
.left{float:left;}
.right{float:right;}
.clearfix{clear: both;}
.hide{display: none;}
#map{height:628px;width: calc(100% - 305px);border: 1px solid #dadada;}
#result{height: 520px; font-size: 13px; line-height: 20px;overflow: auto;color: #666;}
#result ul {
list-style: outside none none;
}
#result ul li{
border-bottom: 1px solid #dadada;
padding: 10px;
}
#result ul li:hover{
background-color: #f0f0f0;
cursor: pointer;
}
#result .res-data{
background: url(img/ico_marker.png) no-repeat -1px 15px;
}
#result .res-marker{
width: 30px;
height: 58px;
line-height: 58px;
text-align: center;
color: rgb(255, 255, 255);
font-weight: bold;
}
#result .res-address{
width: 235px;
}
#result .title{
font-size: 16px;
color: #000000;
}
.area-right{
width:303px;
}
.area-right .search{
border-bottom: 1px solid #dadada;
padding: 8px 0;
box-shadow: 8px 8px 8px #888888;
margin-bottom: 8px;
}
.area-right .search .s-address{
margin-bottom: 5px;position: relative;border-bottom: 1px solid #DADADA;padding: 0 10px;height: 32px;line-height: 32px;
}
.area-right .search .s-address .btn{
position: absolute;right: 10px;top: 5px;cursor: pointer;
}
.area-right .search .s-address .btn img{
width: 22px;
}
.area-right .search .address{
height: 28px;
line-height: 28px;
border: none;
outline: medium;/*去掉鼠标点击后的边框*/
}
.area-right .search .cur_point{
color: #1E90FF;padding: 0 10px;font-size: 13px;
}
.area-right .search .point{
border:none;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<title>本地搜索的数据接口</title>
</head>
<body>
<div>
<div class="left" id="map"></div>
<div class="left area-right">
<div class="search">
<div class="s-address">
检索地址：<input type="text" class="address" id="address" placeholder="望京SOHO"/>
<div onclick="doSearch();" class="btn"><img src="img/ico_btn_search.png"/></div>
</div>
<div class="cur_point">
当前坐标：<span id="s-point"></span><br/>
当前检索城市：<span id="s-city"></span>
</div>
</div>
<div id="result">
<!--<ul>
<li>
<div class="res-data">
<div class="left res-marker">
<span>A</span>
</div>
<div class="left res-address">
<div class="title">望京</div>
<div>地址：<span class="rout">地铁14号线; 地铁15号线</span></div>
<div>坐标：<span class="point">116.475304,40.004532</span></div>
</div>
<div class="clearfix"></div>
</div>
</li>
</ul>-->
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
//浏览器当前窗口文档body的高度
var height = $(document.body).height();
$("#map").css("height",(height-5)+"px");
$("#result").css("height",(height-100)+"px");
$("#address").val("");
$("#result").on("click","li",function(){
var point = $(this).find(".point").text();
$("#s-point").text(point);//赋值
$("#result li").css("background-color","#fff");
$(this).css("background-color","#f0f0f0");
});
//绑定input文本框回车事件
$('#address').bind('keypress',function(event){
if(event.keyCode == "13"){
doSearch();//搜索
}
});
});
// 百度地图API功能
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用
//单击获取点击的经纬度
map.addEventListener("click",function(e){
$("#s-point").text(e.point.lng+","+e.point.lat);
var marker = new BMap.Marker(e.point);
map.addOverlay(marker);
});
//map展现结果的地图实例
//autoViewport检索结束后是否自动调整地图视野
var local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
//地址检索
function doSearch(){
var address = document.getElementById("address").value;
local.search(address);
//检索结束后的回调方法
local.setSearchCompleteCallback(function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var str = "<ul>";
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var poi = results.getPoi(i);
// console.log(JSON.stringify(poi));
str+='<li>';
str+='<div class="res-data">';
str+='<div class="left res-marker">';
str+='<span>'+String.fromCharCode(65+i)+'</span>';
str+='</div>';
str+='<div class="left res-address">';
str+='<div class="title">'+poi.title+'</div>';
str+='<div>地址：<span class="rout">'+poi.address+'</span></div>';
str+='<div>坐标：<span class="point">'+poi.point.lng+","+poi.point.lat+'</span></div>';
str+='</div>';
str+='<div class="clearfix"></div>';
str+='</div>';
str+='</li>';
}
str+='</ul>';
$("#result").html(str);
$("#s-city").text(results.province+results.city);
$("#s-point").text(results.getPoi(0).point.lng+","+results.getPoi(0).point.lat);
}
});
}
</script>
会python真的可以为所欲为0(回)
218天前
这里还有人吗1(回)
404天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
628天前
鸽子
0(回)
712天前
by: 发表于：2017-12-19 09:42:16 顶(0) | 踩(0) 回复
？？
回复评论