187 lines
6.4 KiB
HTML
187 lines
6.4 KiB
HTML
|
<!DOCTYPE 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" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||
|
|
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
||
|
|
</style>
|
||
|
|
<script src="../../js/jquery/jquery-3.6.0.js"></script>
|
||
|
|
<script src="../../layui-v2.8.18/layui/layui.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
||
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PM43nB8eDNTBrXkQwGrTQFcmOni3Z9nO"></script>
|
||
|
|
<title>地图展示</title>
|
||
|
|
<style>
|
||
|
|
.anchorBL{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* body 和 html 样式 */
|
||
|
|
body, html {
|
||
|
|
height: 100%;
|
||
|
|
font-family: '微软雅黑', Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 地图容器样式 */
|
||
|
|
#allmap {
|
||
|
|
width: 100%;
|
||
|
|
height: 95vh; /* 设置地图高度，这里使用视口高度的 80% */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 搜索框样式 */
|
||
|
|
#result {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
z-index: 9999;
|
||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#suggestId {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 1px solid #b4c2cc;
|
||
|
|
font-size: 1.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 搜索结果面板样式 */
|
||
|
|
#searchResultPanel {
|
||
|
|
display: none;
|
||
|
|
border: 1px solid #C0C0C0;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
#result {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
z-index: 9999;
|
||
|
|
padding: 10px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
#suggestId {
|
||
|
|
background-color: transparent;
|
||
|
|
border: 1px solid #b4c2cc;
|
||
|
|
font-size: 1.2em;
|
||
|
|
padding: 8px 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='result' style="z-index: 19891020;position: absolute;">
|
||
|
|
<div style="position: relative;">
|
||
|
|
<i class="layui-icon layui-icon-search" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #999;"></i>
|
||
|
|
<input id="suggestId" type="text" class="" style="background-color: transparent; border: 1px solid #b4c2cc; font-size: 1.2em; padding: 8px 10px 8px 30px; border-radius: 5px; height: 40px;"/>
|
||
|
|
</div>
|
||
|
|
<div id="searchResultPanel" style="border:0px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="allmap"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
let layer = '';
|
||
|
|
$(function () {
|
||
|
|
layui.use('layer', function () {
|
||
|
|
layer = layui.layer; //只有执行了这一步，部分表单元素才会自动修饰成功
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
// 百度地图API功能
|
||
|
|
var map = new BMap.Map("allmap"); // 创建Map实例
|
||
|
|
map.centerAndZoom(new BMap.Point(106.393813,38.378283), 7); // 初始化地图,设置中心点坐标和地图级别
|
||
|
|
//添加地图类型控件
|
||
|
|
map.addControl(new BMap.MapTypeControl({
|
||
|
|
mapTypes:[
|
||
|
|
BMAP_NORMAL_MAP,
|
||
|
|
BMAP_HYBRID_MAP
|
||
|
|
]}));
|
||
|
|
|
||
|
|
map.setCurrentCity("湖南"); // 设置地图显示的城市 此项是必须设置的
|
||
|
|
map.enableScrollWheelZoom(true);
|
||
|
|
map.addEventListener('click', function (e) {
|
||
|
|
layer.confirm('确定要选择此坐标点吗？',function (index) {
|
||
|
|
parent.setPoint(e.point.lng,e.point.lat);
|
||
|
|
layer.close(index);
|
||
|
|
let indexx = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引
|
||
|
|
parent.layer.close(indexx); //再执行关闭
|
||
|
|
// console.log('已确认坐标点:' + e.point.lng + ',' +e.point.lat);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function G(id) {
|
||
|
|
return document.getElementById(id);
|
||
|
|
}
|
||
|
|
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
|
||
|
|
{"input" : "suggestId"
|
||
|
|
,"location" : map
|
||
|
|
})
|
||
|
|
|
||
|
|
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
|
||
|
|
var str = "";
|
||
|
|
var _value = e.fromitem.value;
|
||
|
|
var value = "";
|
||
|
|
if (e.fromitem.index > -1) {
|
||
|
|
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
|
|
}
|
||
|
|
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
|
||
|
|
|
||
|
|
value = "";
|
||
|
|
if (e.toitem.index > -1) {
|
||
|
|
_value = e.toitem.value;
|
||
|
|
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
|
|
}
|
||
|
|
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
|
||
|
|
G("searchResultPanel").innerHTML = str;
|
||
|
|
});
|
||
|
|
|
||
|
|
var myValue;
|
||
|
|
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
|
||
|
|
var _value = e.item.value;
|
||
|
|
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
|
|
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
|
||
|
|
setPlace();
|
||
|
|
});
|
||
|
|
|
||
|
|
function setPlace(){
|
||
|
|
map.clearOverlays(); //清除地图上所有覆盖物
|
||
|
|
function myFun(){
|
||
|
|
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
|
||
|
|
console.log('经度：'+pp.lng, '纬度：'+pp.lat);
|
||
|
|
map.centerAndZoom(pp, 18);
|
||
|
|
map.addOverlay(new BMap.Marker(pp)); //添加标注
|
||
|
|
}
|
||
|
|
var local = new BMap.LocalSearch(map, { //智能搜索
|
||
|
|
onSearchComplete: myFun
|
||
|
|
});
|
||
|
|
local.search(myValue);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function theLocation(){
|
||
|
|
var city = document.getElementById("cityName").value;
|
||
|
|
if(city != ""){
|
||
|
|
map.centerAndZoom(city,11); // 用城市名设置地图中心点
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|