add：标签，球馆
This commit is contained in:
243
addons/address/view/index/baidu.html
Normal file
243
addons/address/view/index/baidu.html
Normal file
@@ -0,0 +1,243 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user