244 lines
8.8 KiB
HTML
244 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||
<title>地址选择器</title>
|
||
<link rel="stylesheet" href="__CDN__/assets/css/frontend.min.css"/>
|
||
<link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css"/>
|
||
<style type="text/css">
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
#container {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.confirm {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 4%;
|
||
z-index: 99;
|
||
height: 50px;
|
||
width: 50px;
|
||
line-height: 50px;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background-color: white;
|
||
background: #1ABC9C;
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.search {
|
||
position: absolute;
|
||
width: 400px;
|
||
top: 0;
|
||
left: 50%;
|
||
padding: 5px;
|
||
margin-left: -200px;
|
||
}
|
||
|
||
label.BMapLabel {
|
||
max-width: inherit;
|
||
padding: .75rem 1.25rem;
|
||
margin-bottom: 1rem;
|
||
background-color: white;
|
||
width: auto;
|
||
min-width: 22rem;
|
||
border: none;
|
||
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="search">
|
||
<div class="input-group">
|
||
<input type="text" id="place" name="q" class="form-control" placeholder="输入地点"/>
|
||
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
|
||
<span class="input-group-btn">
|
||
<button type="button" name="search" id="search-btn" class="btn btn-success">
|
||
<i class="fa fa-search"></i>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="confirm">确定</div>
|
||
<div id="container"></div>
|
||
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak={$config.baidukey|default=''}"></script>
|
||
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
|
||
<script src="__CDN__/assets/addons/address/js/gcoord.min.js"></script>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
var map, marker, point, fromtype, totype;
|
||
var zoom = parseInt("{$zoom}");
|
||
var address = "{$address|htmlentities}";
|
||
var lng = Number("{$lng}");
|
||
var lat = Number("{$lat}");
|
||
fromtype = "BD09";
|
||
totype = "{$config.coordtype|default='DEFAULT'}"
|
||
totype = totype === 'DEFAULT' ? "BD09" : totype;
|
||
|
||
if (lng && lat && fromtype !== totype) {
|
||
var result = gcoord.transform([lng, lat], gcoord[totype], gcoord[fromtype]);
|
||
lng = result[0] || lng;
|
||
lat = result[1] || lat;
|
||
}
|
||
|
||
var geocoder = new BMap.Geocoder();
|
||
|
||
var addPointMarker = function (point, addr) {
|
||
deletePoint();
|
||
addPoint(point);
|
||
|
||
if (addr) {
|
||
addMarker(point, addr);
|
||
} else {
|
||
geocoder.getLocation(point, function (rs) {
|
||
addMarker(point, rs.address);
|
||
});
|
||
}
|
||
|
||
};
|
||
|
||
var addPoint = function (point) {
|
||
lng = point.lng;
|
||
lat = point.lat;
|
||
marker = new BMap.Marker(point);
|
||
map.addOverlay(marker);
|
||
map.panTo(point);
|
||
};
|
||
|
||
var addMarker = function (point, addr) {
|
||
address = addr;
|
||
// var labelhtml = '<div class="info">地址:' + address + '<br>经度:' + point.lng + '<br>纬度:' + point.lat + '</div>';
|
||
var labelhtml = '<div class="info">地址:' + address + '</div>';
|
||
var label = new BMap.Label(labelhtml, {offset: new BMap.Size(16, 20)});
|
||
label.setStyle({
|
||
border: 'none',
|
||
padding: '.75rem 1.25rem'
|
||
});
|
||
marker.setLabel(label);
|
||
};
|
||
|
||
var deletePoint = function () {
|
||
var allOverlay = map.getOverlays();
|
||
for (var i = 0; i < allOverlay.length; i++) {
|
||
map.removeOverlay(allOverlay[i]);
|
||
}
|
||
};
|
||
|
||
var init = function () {
|
||
map = new BMap.Map("container"); // 创建地图实例
|
||
var point = new BMap.Point(lng, lat); // 创建点坐标
|
||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
map.centerAndZoom(point, zoom); // 初始化地图，设置中心点坐标和地图级别
|
||
|
||
var size = new BMap.Size(10, 20);
|
||
map.addControl(new BMap.CityListControl({
|
||
anchor: BMAP_ANCHOR_TOP_LEFT,
|
||
offset: size,
|
||
}));
|
||
|
||
if ("{$lng}" != '' && "{$lat}" != '') {
|
||
addPointMarker(point, address);
|
||
}
|
||
|
||
ac = new BMap.Autocomplete({"input": "place", "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;
|
||
$("#searchResultPanel").html(str);
|
||
});
|
||
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
|
||
var _value = e.item.value;
|
||
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
$("#searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
|
||
setPlace();
|
||
});
|
||
|
||
function setPlace(text) {
|
||
map.clearOverlays(); //清除地图上所有覆盖物
|
||
function myFun() {
|
||
var results = local.getResults();
|
||
var result = local.getResults().getPoi(0);
|
||
var point = result.point; //获取第一个智能搜索的结果
|
||
map.centerAndZoom(point, 18);
|
||
// map.addOverlay(new BMap.Marker(point)); //添加标注
|
||
if (result.type != 0) {
|
||
address = results.province + results.city + result.address;
|
||
} else {
|
||
address = result.address;
|
||
}
|
||
addPointMarker(point, address);
|
||
}
|
||
|
||
var local = new BMap.LocalSearch(map, { //智能搜索
|
||
onSearchComplete: myFun
|
||
});
|
||
local.search(text || myValue);
|
||
}
|
||
|
||
map.addEventListener("click", function (e) {
|
||
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
|
||
addPointMarker(e.point);
|
||
});
|
||
|
||
//点击搜索按钮
|
||
$(document).on('click', '#search-btn', function () {
|
||
if ($("#place").val() == '')
|
||
return;
|
||
setPlace($("#place").val());
|
||
});
|
||
};
|
||
|
||
var close = function (data) {
|
||
var index = parent.Layer.getFrameIndex(window.name);
|
||
var callback = parent.$("#layui-layer" + index).data("callback");
|
||
//再执行关闭
|
||
parent.Layer.close(index);
|
||
//再调用回传函数
|
||
if (typeof callback === 'function') {
|
||
callback.call(undefined, data);
|
||
}
|
||
};
|
||
|
||
//点击确定后执行回调赋值
|
||
$(document).on('click', '.confirm', function () {
|
||
var zoom = map.getZoom();
|
||
var data = {lat: lat, lng: lng, zoom: zoom, address: address};
|
||
if (fromtype !== totype) {
|
||
var result = gcoord.transform([data.lng, data.lat], gcoord[fromtype], gcoord[totype]);
|
||
data.lng = (result[0] || data.lng).toFixed(5);
|
||
data.lat = (result[1] || data.lat).toFixed(5);
|
||
console.log(data, result, fromtype, totype);
|
||
}
|
||
close(data);
|
||
});
|
||
|
||
init();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|