添加网站文件
This commit is contained in:
182
application/admin/view/mp/index.html
Normal file
182
application/admin/view/mp/index.html
Normal file
@@ -0,0 +1,182 @@
|
||||
{layout name="layout2" /}
|
||||
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
|
||||
<div id="tMap" style="height:100vh; width: 100%;padding:20px">
|
||||
<div class="layui-form layuimini-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="search_key" id="search_key" class="layui-input" placeholder="请输入地名" >
|
||||
</div>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="maplocation" style="width:100%;height:90%;"></div>
|
||||
</div>
|
||||
<script src="/static/webjs/jquery.min.js"></script>
|
||||
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service,tools&key=EVOBZ-VX7YU-QKJVR-BVESA-AVFT3-7JBWG"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var u = (<?php echo $u?>); //所有用户
|
||||
var infos = []; //所有窗口
|
||||
var markers = [];
|
||||
var map = null;
|
||||
var editor = null;
|
||||
|
||||
|
||||
|
||||
function convertToLatLngArray(coordArray) {
|
||||
var latLngArray = [];
|
||||
for (var i = 0; i < coordArray.length; i += 2) {
|
||||
var lat = parseFloat(coordArray[i].trim());
|
||||
var lng = parseFloat(coordArray[i + 1].trim());
|
||||
latLngArray.push(new TMap.LatLng(lat, lng));
|
||||
}
|
||||
return latLngArray;
|
||||
}
|
||||
|
||||
//
|
||||
function u_to_infos(){
|
||||
clear_infos();
|
||||
if(!(u && u.length)) return
|
||||
let geometries = []
|
||||
for(let d of u){
|
||||
let center = new TMap.LatLng(d.lat,d.lng);//设置中心点坐标
|
||||
if(!d.lnglat) continue;
|
||||
|
||||
let lnglat_data = d.lnglat.split(',')
|
||||
let path = convertToLatLngArray(lnglat_data)
|
||||
geometries.push({
|
||||
id:'polygon_'+d.id,
|
||||
'styleId': 'polygon', //绑定样式名
|
||||
'paths': path, //多边形轮廓
|
||||
})
|
||||
infos.push(
|
||||
new TMap.InfoWindow({
|
||||
map: map,
|
||||
position: center,
|
||||
content: "<div class='info-window' style='font-size:12px'><p>"+d.name+"</p></div>"
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
var polygon = new TMap.MultiPolygon({
|
||||
map: map,
|
||||
//多边形数据
|
||||
geometries: geometries
|
||||
});
|
||||
|
||||
editor = new TMap.tools.GeometryEditor({
|
||||
// TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
|
||||
map: map, // 编辑器绑定的地图对象
|
||||
overlayList: [
|
||||
{
|
||||
overlay: polygon,
|
||||
id: 'polygon',
|
||||
},
|
||||
],
|
||||
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
|
||||
activeOverlayId: 'marker', // 激活图层
|
||||
snappable: true, // 开启吸附
|
||||
selectable:true
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function clear_infos(){
|
||||
if(infos && infos.length){
|
||||
for(let i in infos){
|
||||
infos[i].setMap(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(u)
|
||||
$(function(){
|
||||
|
||||
function addMarker(latlng){
|
||||
markers.updateGeometries([
|
||||
{
|
||||
id: 'main',
|
||||
position: latlng, // 将得到的坐标位置用点标记标注在地图上
|
||||
},
|
||||
]);
|
||||
clear_infos()
|
||||
console.log(latlng,999)
|
||||
$.post('/admin/mp/map_user',{lng:latlng.lng,lat:latlng.lat},function(e){
|
||||
console.log(e)
|
||||
if(e.data && e.data.length){
|
||||
u = e.data
|
||||
for(let d of u){
|
||||
let center = new TMap.LatLng(d.lat,d.lng);//设置中心点坐标
|
||||
infos.push(
|
||||
new TMap.InfoWindow({
|
||||
map: map,
|
||||
position: center,
|
||||
content: "<div class='info-window' style='font-size:12px'><p>"+d.name+"</p></div>"
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
map = new TMap.Map('maplocation', {
|
||||
zoom: 13,
|
||||
center: new TMap.LatLng(u[0].lat, u[0].lng),
|
||||
});
|
||||
|
||||
u_to_infos()
|
||||
|
||||
markers = new TMap.MultiMarker({
|
||||
map: map,
|
||||
geometries: [],
|
||||
});
|
||||
|
||||
map.on('click', function(event) {
|
||||
lat_lng = event.latLng
|
||||
addMarker(event.latLng);
|
||||
});
|
||||
|
||||
|
||||
geocoder = new TMap.service.Geocoder();
|
||||
|
||||
|
||||
searchService = {
|
||||
search:function(name){
|
||||
geocoder.getLocation({ address:name })
|
||||
.then((result) => {
|
||||
console.log(result,999)
|
||||
lat_lng = result.result.location
|
||||
addMarker( result.result.location)
|
||||
// markers.updateGeometries([
|
||||
// {
|
||||
// id: 'main',
|
||||
// position: result.result.location, // 将得到的坐标位置用点标记标注在地图上
|
||||
// },
|
||||
// ]);
|
||||
map.setCenter(result.result.location);
|
||||
$('#lon').val(result.result.location.lng)
|
||||
$('#lat').val(result.result.location.lat)
|
||||
// 显示坐标数值
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
$(document).on('click','.searchKey',function(){
|
||||
var search_key=$("#search_key").val();
|
||||
var search_key=$("#search_key").val();
|
||||
searchService.search(search_key);
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user