feat(后台地图插件): 使用新的地图插件
yin5th
parent
2ae0776281
commit
7b34b0e8c4
|
|
@ -0,0 +1,21 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
|
||||||
|
namespace app\controller\manager;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 地图
|
||||||
|
* Class Map
|
||||||
|
* @package app\controller\manager
|
||||||
|
*/
|
||||||
|
class Map extends Base
|
||||||
|
{
|
||||||
|
protected $noNeedLogin = ['index'];
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$template = input('template', 'gaode');
|
||||||
|
$this->data['lng'] = input('lng/s');
|
||||||
|
$this->data['lat'] = input('lat/s');
|
||||||
|
return $this->view('/manager/map/'.$template);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -731,7 +731,8 @@ layui.define(['layer', 'locationX'], function (exports) {
|
||||||
$("#lat").val(o.lat);
|
$("#lat").val(o.lat);
|
||||||
// 渲染地图
|
// 渲染地图
|
||||||
if (undefined === window.AMap) {
|
if (undefined === window.AMap) {
|
||||||
$.getScript("https://webapi.amap.com/maps?v=1.4.14&key=006d995d433058322319fa797f2876f5", function () {
|
// $.getScript("https://webapi.amap.com/maps?v=1.4.14&key=006d995d433058322319fa797f2876f5", function () {
|
||||||
|
$.getScript("https://webapi.amap.com/maps?v=1.4.14&key=68b7bd8022d63972a2a31b5d6a3c69b6", function () {
|
||||||
o.openGaodeMap();
|
o.openGaodeMap();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>地图</title>
|
||||||
|
<script type="text/javascript" src="__COMMON__/jquery-3.4.1.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="__MANAGER__/layui/css/layui.css">
|
||||||
|
<script type="text/javascript" src="__MANAGER__/layui/layui.all.js"></script>
|
||||||
|
<!--百度地图js引入-->
|
||||||
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kajzNi5RGekhNe9RGspconldoRGNDVWq"></script>
|
||||||
|
<style>
|
||||||
|
#iMap {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width: 80px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #aaccaa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="info">
|
||||||
|
<p>说明：</p>
|
||||||
|
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
|
||||||
|
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-col-md12">
|
||||||
|
<div class="layui-card-body layui-form" style="overflow: auto;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="keyword" placeholder="请输入地名" value=""/>
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="iMap"></div>
|
||||||
|
<script language="javascript">
|
||||||
|
layui.use(["layer"],function () {
|
||||||
|
var layer =layui.layer;
|
||||||
|
$(function () {
|
||||||
|
let lng = {:empty($lng)?"104.072356":$lng};
|
||||||
|
let lat = {:empty($lat)?"30.662162":$lat};
|
||||||
|
|
||||||
|
|
||||||
|
var map = new BMap.Map("iMap");// 创建地图实例
|
||||||
|
var point = new BMap.Point(lng, lat);// 创建点坐标
|
||||||
|
map.centerAndZoom(point, 12);// 初始化地图，设置中心点坐标和地图级别
|
||||||
|
|
||||||
|
map.addControl(new BMap.NavigationControl());//标尺控件
|
||||||
|
map.addControl(new BMap.ScaleControl());//比例尺控件
|
||||||
|
|
||||||
|
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
|
||||||
|
map.enableKeyboard();//启动键盘操作地图
|
||||||
|
|
||||||
|
map.addEventListener("click",function(e){
|
||||||
|
// input.value = e.point.lng;
|
||||||
|
// input2.value= e.point.lat;
|
||||||
|
parent.setLngLat(e.point.lng,e.point.lat);
|
||||||
|
// console.log(e.point.lng)
|
||||||
|
// console.log(e.point.lat)
|
||||||
|
map.clearOverlays();//清除覆盖物
|
||||||
|
map.addOverlay(new BMap.Marker({"lng": e.point.lng,"lat":e.point.lat}))
|
||||||
|
});
|
||||||
|
|
||||||
|
var geoc = new BMap.Geocoder();//创建地址解析器实例
|
||||||
|
$("#search").on("click",function () {
|
||||||
|
// 将地址解析结果显示在地图上，并调整地图视野
|
||||||
|
geoc.getPoint($("#keyword").val(), function(point){
|
||||||
|
console.log(point)
|
||||||
|
if(point){
|
||||||
|
parent.setLngLat(point.lng,point.lat);
|
||||||
|
map.centerAndZoom(point, 16);
|
||||||
|
map.clearOverlays();//清除覆盖物
|
||||||
|
map.addOverlay(new BMap.Marker(point))
|
||||||
|
}else{
|
||||||
|
alert('您选择的地址没有解析到结果！');
|
||||||
|
}
|
||||||
|
}, $("#keyword").val())
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>地图</title>
|
||||||
|
<script type="text/javascript" src="__COMMON__/jquery-3.4.1.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="__MANAGER__/layui/css/layui.css">
|
||||||
|
<script type="text/javascript" src="__MANAGER__/layui/layui.all.js"></script>
|
||||||
|
<!--高德地图js引入-->
|
||||||
|
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.14&key=68b7bd8022d63972a2a31b5d6a3c69b6"></script>
|
||||||
|
<style>
|
||||||
|
#iMap {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width: 80px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #aaccaa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="info">
|
||||||
|
<p>说明：</p>
|
||||||
|
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
|
||||||
|
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-col-md12">
|
||||||
|
<div class="layui-card-body layui-form" style="overflow: auto;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="keyword" placeholder="请输入地名" value=""/>
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="iMap"></div>
|
||||||
|
<script language="javascript">
|
||||||
|
layui.use(["layer"],function () {
|
||||||
|
var layer =layui.layer;
|
||||||
|
$(function () {
|
||||||
|
var mapObj;
|
||||||
|
var lnglatXY;
|
||||||
|
//初始化地图
|
||||||
|
function mapInit() {
|
||||||
|
let lng = {:empty($lng)?"104.072356":$lng};
|
||||||
|
let lat = {:empty($lat)?"30.662162":$lat};
|
||||||
|
var opt = {
|
||||||
|
level: 14, //设置地图缩放级别
|
||||||
|
center: new AMap.LngLat(lng,lat) //设置地图中心点
|
||||||
|
}
|
||||||
|
mapObj = new AMap.Map("iMap", opt);
|
||||||
|
AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
|
||||||
|
|
||||||
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
||||||
|
|
||||||
|
// 创建一个 Marker 实例：
|
||||||
|
var marker = new AMap.Marker({
|
||||||
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||||
|
});
|
||||||
|
// 将创建的点标记添加到已有的地图实例：
|
||||||
|
mapObj.add(marker);
|
||||||
|
}
|
||||||
|
mapInit();
|
||||||
|
function geocoder() {
|
||||||
|
var MGeocoder;
|
||||||
|
//加载地理编码插件
|
||||||
|
mapObj.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.MapType','AMap.Geolocation'],
|
||||||
|
function(){
|
||||||
|
mapObj.addControl(new AMap.ToolBar());
|
||||||
|
|
||||||
|
|
||||||
|
mapObj.addControl(new AMap.Scale());
|
||||||
|
|
||||||
|
|
||||||
|
mapObj.addControl(new AMap.OverView({isOpen:true}));
|
||||||
|
mapObj.addControl(new AMap.MapType());
|
||||||
|
mapObj.addControl(new AMap.Geolocation());
|
||||||
|
});
|
||||||
|
mapObj.plugin(["AMap.Geocoder"], function () {
|
||||||
|
MGeocoder = new AMap.Geocoder({
|
||||||
|
radius: 1000,
|
||||||
|
extensions: "all"
|
||||||
|
});
|
||||||
|
//返回地理编码结果
|
||||||
|
AMap.event.addListener(MGeocoder, "complete");
|
||||||
|
//逆地理编码
|
||||||
|
MGeocoder.getAddress(lnglatXY);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//鼠标点击，获取经纬度坐标
|
||||||
|
function getLnglat(e) {
|
||||||
|
mapObj.clearMap();
|
||||||
|
let lng = e.lnglat.getLng();
|
||||||
|
let lat = e.lnglat.getLat();
|
||||||
|
parent.setLngLat(lng,lat);
|
||||||
|
|
||||||
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
||||||
|
geocoder();
|
||||||
|
|
||||||
|
// 创建一个 Marker 实例：
|
||||||
|
var marker = new AMap.Marker({
|
||||||
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||||
|
});
|
||||||
|
// 将创建的点标记添加到已有的地图实例：
|
||||||
|
mapObj.add(marker);
|
||||||
|
}
|
||||||
|
//搜索
|
||||||
|
$("#search").on("click",function () {
|
||||||
|
$.ajax({
|
||||||
|
url: "https://restapi.amap.com/v3/geocode/geo?parameters",
|
||||||
|
data: {
|
||||||
|
"key":"68b7bd8022d63972a2a31b5d6a3c69b6",
|
||||||
|
"address":$("#keyword").val(),
|
||||||
|
},
|
||||||
|
|
||||||
|
type: 'get',
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: 10000,
|
||||||
|
success: function(data){
|
||||||
|
if(data.status==1&&data.count>0){
|
||||||
|
let geo = data.geocodes[0].location.split(",");
|
||||||
|
let lng = geo[0];
|
||||||
|
let lat = geo[1];
|
||||||
|
//设置中心点
|
||||||
|
mapObj.setZoomAndCenter(14, [lng,lat ]);
|
||||||
|
|
||||||
|
// 创建一个 Marker 实例：
|
||||||
|
let lnglatXY = new AMap.LngLat(lng, lat);
|
||||||
|
var marker = new AMap.Marker({
|
||||||
|
position: lnglatXY, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||||
|
});
|
||||||
|
// 将创建的点标记添加到已有的地图实例：
|
||||||
|
mapObj.add(marker);
|
||||||
|
|
||||||
|
parent.setLngLat(lng,lat);
|
||||||
|
}else{
|
||||||
|
layer.msg("没有搜索结果");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error:function(xhr,type,errorThrown){
|
||||||
|
layer.msg('操作失败！', {time: 1500});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>地图</title>
|
||||||
|
<script type="text/javascript" src="__COMMON__/jquery-3.4.1.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="__MANAGER__/layui/css/layui.css">
|
||||||
|
<script type="text/javascript" src="__MANAGER__/layui/layui.all.js"></script>
|
||||||
|
<!--腾讯地图js引入-->
|
||||||
|
<script src="https://map.qq.com/api/gljs?v=1.exp&key=XJXBZ-7EBCD-2MB45-HB73N-R362T-WRFJR"></script>
|
||||||
|
<style>
|
||||||
|
#iMap {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width: 80px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #aaccaa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="info">
|
||||||
|
<p>说明：</p>
|
||||||
|
<p>1、鼠标滚轮可以缩放地图，拖动地图。</p>
|
||||||
|
<p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-col-md12">
|
||||||
|
<div class="layui-card-body layui-form" style="overflow: auto;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="keyword" placeholder="请输入地名" value=""/>
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<button type="button" class="layui-btn layui-btn-normal" id="search">搜索</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="iMap"></div>
|
||||||
|
<script language="javascript">
|
||||||
|
layui.use(["layer"],function () {
|
||||||
|
var layer =layui.layer;
|
||||||
|
$(function () {
|
||||||
|
var mapObj;
|
||||||
|
var lnglatXY;
|
||||||
|
//初始化地图
|
||||||
|
function mapInit() {
|
||||||
|
|
||||||
|
let lng = {:empty($lng)?"104.072356":$lng};
|
||||||
|
let lat = {:empty($lat)?"30.662162":$lat};
|
||||||
|
//定义地图中心点坐标
|
||||||
|
var center = new TMap.LatLng(lat,lng);
|
||||||
|
//定义map变量，调用 TMap.Map() 构造函数创建地图
|
||||||
|
map = new TMap.Map(document.getElementById('iMap'), {
|
||||||
|
center: center,//设置地图中心点坐标
|
||||||
|
zoom: 17.2, //设置地图缩放级别
|
||||||
|
});
|
||||||
|
|
||||||
|
//创建并初始化MultiMarker
|
||||||
|
markerLayer = new TMap.MultiMarker({
|
||||||
|
map: map, //指定地图容器
|
||||||
|
//样式定义
|
||||||
|
//点标记数据数组
|
||||||
|
geometries: [{
|
||||||
|
"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
|
||||||
|
"position": new TMap.LatLng(lat, lng), //点标记坐标位置
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
mapInit();
|
||||||
|
//定义事件处理方法
|
||||||
|
var clickHandler=function(evt){
|
||||||
|
var lat = evt.latLng.getLat().toFixed(6);
|
||||||
|
var lng = evt.latLng.getLng().toFixed(6);
|
||||||
|
//console.log("您点击的的坐标是："+ lat + "," + lng);
|
||||||
|
|
||||||
|
//修改id为的点标记的位置
|
||||||
|
|
||||||
|
//修改id为4的点标记的位置
|
||||||
|
markerLayer.updateGeometries([
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"position": new TMap.LatLng(lat, lng),
|
||||||
|
}
|
||||||
|
])
|
||||||
|
parent.setLngLat(lng,lat);
|
||||||
|
|
||||||
|
}
|
||||||
|
//Map实例创建后，通过on方法绑定点击事件
|
||||||
|
map.on("click",clickHandler)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//搜索
|
||||||
|
$("#search").on("click",function () {
|
||||||
|
$.ajax({
|
||||||
|
type: "get",
|
||||||
|
async: false,
|
||||||
|
url: "https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&address="+$("#keyword").val()+"&key=XJXBZ-7EBCD-2MB45-HB73N-R362T-WRFJR",
|
||||||
|
dataType: "jsonp",
|
||||||
|
success: function(json){
|
||||||
|
console.log(json);
|
||||||
|
if(json.status == 0){
|
||||||
|
let lat=json.result.location.lat;
|
||||||
|
let lng=json.result.location.lng;
|
||||||
|
//修改地图中心点
|
||||||
|
map.setCenter(new TMap.LatLng(lat,lng));
|
||||||
|
//修改id为4的点标记的位置
|
||||||
|
markerLayer.updateGeometries([
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"position": new TMap.LatLng(lat, lng),
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
//map.panTo(new qq.maps.LatLng(json.result.location.lat, json.result.location.lng));
|
||||||
|
},
|
||||||
|
error: function(){
|
||||||
|
layer.msg('搜错出错');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -21,12 +21,27 @@
|
||||||
<label class="layui-form-label required">经纬度</label>
|
<label class="layui-form-label required">经纬度</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<input type="number" name="lng" value="{$item.lng ?? ''}" id="longitude" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
<input type="number" name="lng" value="{$item.lng ?? ''}" id="lng" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<input type="number" name="lat" value="{$item.lat ?? ''}" id="latitude" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
<input type="number" name="lat" value="{$item.lat ?? ''}" id="lat" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-mid layui-word-aux">
|
||||||
|
地图坐标查询可能有频率限制，当出现不准确或者无法使用等情况，请通过 <a href="https://lbs.qq.com/getPoint/" style="color: red" target="_blank">腾讯地图坐标拾取</a> 自助查询坐标。 如获取到的坐标：30.656691,104.136461 逗号前的为维度，之后为经度
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="tengxun_map">
|
||||||
|
<iframe src="/manager/map/index?template=tengxun&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="gaode_map">
|
||||||
|
<iframe src="/manager/map/index?template=gaode&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="baidu_map">
|
||||||
|
<iframe src="/manager/map/index?template=baidu&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-input-inline"><button type="button" class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -65,18 +80,7 @@
|
||||||
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
||||||
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
|
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['layer','form','jquery','location','laydate'],function(){
|
layui.use(['layer','form','jquery','laydate'],function(){
|
||||||
let $ = layui.jquery;
|
|
||||||
let form = layui.form;
|
|
||||||
let location = layui.location;
|
|
||||||
|
|
||||||
let lng = $('#longitude').val();
|
|
||||||
let lat = $('#latitude').val();
|
|
||||||
|
|
||||||
lng = lng.length > 0 ? lng : '103.979154';
|
|
||||||
lat = lat.length > 0 ? lat : '30.68395';
|
|
||||||
let locationData = {lng: lng,lat: lat};
|
|
||||||
|
|
||||||
let laydate = layui.laydate;
|
let laydate = layui.laydate;
|
||||||
laydate.render({
|
laydate.render({
|
||||||
elem: '#am-time' //指定元素
|
elem: '#am-time' //指定元素
|
||||||
|
|
@ -88,32 +92,23 @@
|
||||||
,type: 'time'
|
,type: 'time'
|
||||||
,range: true
|
,range: true
|
||||||
});
|
});
|
||||||
|
|
||||||
location.render("#locationBtn",{
|
|
||||||
type: 1,
|
|
||||||
apiType: "gaodeMap",
|
|
||||||
coordinate: "gaodeMap",
|
|
||||||
mapType: 0,
|
|
||||||
zoom: 15,
|
|
||||||
title: '区域定位',
|
|
||||||
init: function(){
|
|
||||||
// 打开地图时 延迟一定时间搜索
|
|
||||||
$('body').on('click', '#locationBtn', function () {
|
|
||||||
let address = $("input[name='address']").val();
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#ew-map-select-input-search').val(address).trigger('input');
|
|
||||||
}, 1500)
|
|
||||||
})
|
|
||||||
return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
|
|
||||||
},
|
|
||||||
success: function (data) {
|
|
||||||
$("#longitude").val(data.lng);
|
|
||||||
$("#latitude").val(data.lat);
|
|
||||||
},
|
|
||||||
onClickTip: function (data) {
|
|
||||||
console.log(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function setLngLat(lng,lat){
|
||||||
|
$("#lng").val(lng)
|
||||||
|
$("#lat").val(lat)
|
||||||
|
}
|
||||||
|
layui.use(["form"], function(){
|
||||||
|
let form = layui.form;
|
||||||
|
$("#tengxun_map").show();
|
||||||
|
form.on("select(map_type)",function (data) {
|
||||||
|
console.log(data.value)
|
||||||
|
$(".map-item").hide()
|
||||||
|
$("#"+data.value+"_map").show()
|
||||||
|
})
|
||||||
|
$("#map_type").val("tengxun")
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -16,17 +16,46 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 经纬度 -->
|
||||||
|
<!-- <div class="layui-form-item">-->
|
||||||
|
<!-- <label class="layui-form-label required">经纬度</label>-->
|
||||||
|
<!-- <div class="layui-input-block">-->
|
||||||
|
<!-- <div class="layui-input-inline">-->
|
||||||
|
<!-- <input type="number" name="lng" value="{$item.lng ?? ''}" id="longitude" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="layui-input-inline">-->
|
||||||
|
<!-- <input type="number" name="lat" value="{$item.lat ?? ''}" id="latitude" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="layui-input-inline"><button type="button" class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
<!-- 经纬度 -->
|
<!-- 经纬度 -->
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label required">经纬度</label>
|
<label class="layui-form-label required">经纬度</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block">
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<input type="number" name="lng" value="{$item.lng ?? ''}" id="longitude" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
<input type="number" name="lng" value="{$item.lng ?? ''}" id="lng" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-input-inline">
|
<div class="layui-input-inline">
|
||||||
<input type="number" name="lat" value="{$item.lat ?? ''}" id="latitude" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
<input type="number" name="lat" value="{$item.lat ?? ''}" id="lat" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-mid layui-word-aux">
|
||||||
|
地图坐标查询可能有频率限制，当出现不准确或者无法使用等情况，请通过 <a href="https://lbs.qq.com/getPoint/" style="color: red" target="_blank">腾讯地图坐标拾取</a> 自助查询坐标。 如获取到的坐标：30.656691,104.136461 逗号前的为维度，之后为经度
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="tengxun_map">
|
||||||
|
<iframe src="/manager/map/index?template=tengxun&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="gaode_map">
|
||||||
|
<iframe src="/manager/map/index?template=gaode&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item map-item" style="display: none" id="baidu_map">
|
||||||
|
<iframe src="/manager/map/index?template=baidu&lng={$item.lng??''}&lat={$item.lat??''}" style="width: 70%;height: 600px"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-input-inline"><button type="button" class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -71,18 +100,35 @@
|
||||||
<script src="__STATIC__/js/iPicker/iPicker.min.js"></script>
|
<script src="__STATIC__/js/iPicker/iPicker.min.js"></script>
|
||||||
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
||||||
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
|
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
|
||||||
|
<script>
|
||||||
|
function setLngLat(lng,lat){
|
||||||
|
$("#lng").val(lng)
|
||||||
|
$("#lat").val(lat)
|
||||||
|
}
|
||||||
|
layui.use(["form"], function(){
|
||||||
|
let form = layui.form;
|
||||||
|
$("#tengxun_map").show();
|
||||||
|
form.on("select(map_type)",function (data) {
|
||||||
|
console.log(data.value)
|
||||||
|
$(".map-item").hide()
|
||||||
|
$("#"+data.value+"_map").show()
|
||||||
|
})
|
||||||
|
$("#map_type").val("tengxun")
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['layer','form','jquery','location', 'laydate'],function(){
|
layui.use(['layer','form','jquery','location', 'laydate'],function(){
|
||||||
let $ = layui.jquery;
|
let $ = layui.jquery;
|
||||||
let form = layui.form;
|
let form = layui.form;
|
||||||
let location = layui.location;
|
let location = layui.location;
|
||||||
|
|
||||||
let lng = $('#longitude').val();
|
// let lng = $('#longitude').val();
|
||||||
let lat = $('#latitude').val();
|
// let lat = $('#latitude').val();
|
||||||
|
//
|
||||||
lng = lng.length > 0 ? lng : '116.404';
|
// lng = lng.length > 0 ? lng : '116.404';
|
||||||
lat = lat.length > 0 ? lat : '39.915';
|
// lat = lat.length > 0 ? lat : '39.915';
|
||||||
let locationData = {lng: lng,lat: lat};
|
// let locationData = {lng: lng,lat: lat};
|
||||||
|
|
||||||
let laydate = layui.laydate;
|
let laydate = layui.laydate;
|
||||||
laydate.render({
|
laydate.render({
|
||||||
|
|
@ -96,31 +142,31 @@
|
||||||
,range: true
|
,range: true
|
||||||
});
|
});
|
||||||
|
|
||||||
location.render("#locationBtn",{
|
// location.render("#locationBtn",{
|
||||||
type: 1,
|
// type: 1,
|
||||||
apiType: "gaodeMap",
|
// apiType: "gaodeMap",
|
||||||
coordinate: "gaodeMap",
|
// coordinate: "gaodeMap",
|
||||||
mapType: 0,
|
// mapType: 0,
|
||||||
zoom: 15,
|
// zoom: 15,
|
||||||
title: '区域定位',
|
// title: '区域定位',
|
||||||
init: function(){
|
// init: function(){
|
||||||
// 打开地图时 延迟一定时间搜索
|
// // 打开地图时 延迟一定时间搜索
|
||||||
$('body').on('click', '#locationBtn', function () {
|
// $('body').on('click', '#locationBtn', function () {
|
||||||
let address = $("input[name='address']").val();
|
// let address = $("input[name='address']").val();
|
||||||
setTimeout(function () {
|
// setTimeout(function () {
|
||||||
$('#ew-map-select-input-search').val(address).trigger('input');
|
// $('#ew-map-select-input-search').val(address).trigger('input');
|
||||||
}, 1500)
|
// }, 1500)
|
||||||
})
|
// })
|
||||||
return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
|
// return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
|
||||||
},
|
// },
|
||||||
success: function (data) {
|
// success: function (data) {
|
||||||
$("#longitude").val(data.lng);
|
// $("#longitude").val(data.lng);
|
||||||
$("#latitude").val(data.lat);
|
// $("#latitude").val(data.lat);
|
||||||
},
|
// },
|
||||||
onClickTip: function (data) {
|
// onClickTip: function (data) {
|
||||||
console.log(data);
|
// console.log(data);
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
});
|
// });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue