<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html>
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="keywords" content="">
|
<meta name="description" content="">
|
<meta name="author" content="">
|
<link rel="icon" href="assets/images/favicon.png" type="image/png">
|
<title>根据关键字搜索地址</title>
|
<link href="https://sys.966120.com.cn/assets/css/icons.css" rel="stylesheet">
|
<link href="https://sys.966120.com.cn/assets/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://sys.966120.com.cn/assets/css/style.css" rel="stylesheet">
|
<link href="https://sys.966120.com.cn/assets/css/responsive.css" rel="stylesheet">
|
<link href="https://sys.966120.com.cn/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
|
<link href="https://sys.966120.com.cn/assets/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
|
<style type="text/css">
|
#allmap {width: 100%;height: 200px;overflow: hidden;margin:0;}
|
body,
|
html,
|
#container {
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
font-family: "微软雅黑";
|
}
|
.info {
|
z-index: 999;
|
width: auto;
|
min-width: 22rem;
|
padding: .75rem 1.25rem;
|
margin-left: 1.25rem;
|
position: fixed;
|
top: 1rem;
|
background-color: #fff;
|
border-radius: .25rem;
|
font-size: 14px;
|
color: #666;
|
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
}
|
</style>
|
<!--从百度地图开放平台获取API-->
|
<script src="https://sys.966120.com.cn/assets/js/jquery.min.js"></script>
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=s4tr59feoRqyWUfRZKnmCnmCyqHKDvd8"></script>
|
<script>
|
var map = null
|
var point = null
|
var geoc = null
|
|
var mapx = localStorage.getItem("mapx");
|
var mapy = localStorage.getItem("mapy");
|
|
var x = mapx ? mapx :116.404
|
var y = mapy ?mapy :39.915
|
console.log(x,y)
|
// 创建地图函数
|
function createMap() {
|
map = new BMap.Map("allmap"); // 创建Map实例
|
point = new BMap.Point(x, y); // 创建点坐标
|
map.centerAndZoom(point, 17); // 初始化地图，设置中心点坐标和地图级别
|
geoc = new BMap.Geocoder();
|
|
// 添加地图类型控件
|
|
//map.addControl(new BMap.MapTypeControl({
|
// mapTypes: [
|
// BMAP_NORMAL_MAP, //此地图类型展示普通街道视图
|
// BMAP_HYBRID_MAP //此地图类型展示普通卫星地图
|
// ]
|
//}));
|
|
// 添加缩放控件
|
//map.addControl(new BMap.ZoomControl());
|
|
// 添加比例尺控件
|
//map.addControl(new BMap.ScaleControl());
|
|
//map.enableScrollWheelZoom(true);
|
|
|
// 添加地址搜索控件
|
var search = new BMap.LocalSearch(map, {
|
renderOptions: {
|
map: map,
|
panel: "r-result"
|
},
|
onInfoHtmlSet: function(results){
|
|
$('#SearchAddress').val(results.address);
|
},
|
onInfoHtmlSet: function(results){
|
//可以得到搜索结果且搜索结果不为空
|
if(search.getStatus() == BMAP_STATUS_SUCCESS){
|
if(results.address){address = results.address;}
|
else{address = results.title;}
|
$('#SubmitAddress').val(address);
|
title = results.title;
|
//$('#SearchAddress').val(title);
|
}
|
},
|
pageCapacity: 5
|
});
|
search.getStatus();
|
|
// 百度地图API功能
|
var SearchAddress = $('#SearchAddress').val();
|
if(SearchAddress==''){
|
SearchAddress='珠江医院';
|
}
|
search.search(SearchAddress);
|
// 监听地址搜索控件的结果
|
search.enableAutoViewport(true); // 启用自动视野定位
|
map.addEventListener("click", function (e) {
|
console.log(e)
|
var pot = e.point;
|
geoc.getLocation(pot, function(rs){
|
//addressComponents对象可以获取到详细的地址信息
|
console.log(rs);
|
var addComp = rs.address;
|
$('#SearchAddress').val(addComp);
|
localStorage.setItem("mapx", e.point.lng);
|
localStorage.setItem("mapy", e.point.lat);
|
localStorage.setItem("point", e.point);
|
search.search(addComp);
|
});
|
});
|
|
}
|
|
</script>
|
</head>
|
<body onload="createMap()">
|
<!--地图容器-->
|
<div id="allmap"></div>
|
<div class="col-sm-6" style="padding-top: 10px;padding-bottom: 10px;">
|
<input class="form-control" name="SearchAddress" id="SearchAddress" style="width: 80%;display: inline;" type="text" value="">
|
<button class="btn btn-primary" id="Search" onclick="createMap();" type="button" style="">查询</button>
|
|
</div>
|
<div id="r-search">
|
</div>
|
<!--搜索结果列表容器-->
|
<div id="r-result"></div>
|
<div id="r-search" class="col-sm-6" style="padding-top: 10px;padding-bottom: 10px;">
|
<input class="form-control" name="SubmitAddress" id="SubmitAddress" type="text" value="">
|
<button class="btn btn-primary" id="Submit" onclick="" type="button" style="width: 80%;">提交</button>
|
</div>
|
</body>
|
</html>
|
