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);
|
||||
// 渲染地图
|
||||
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();
|
||||
});
|
||||
} 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>
|
||||
<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">
|
||||
<input type="number" name="lng" value="{$item.lng ?? ''}" id="lng" 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">
|
||||
<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 class="layui-input-inline"><button type="button" class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,18 +80,7 @@
|
|||
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
||||
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
|
||||
<script>
|
||||
layui.use(['layer','form','jquery','location','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};
|
||||
|
||||
layui.use(['layer','form','jquery','laydate'],function(){
|
||||
let laydate = layui.laydate;
|
||||
laydate.render({
|
||||
elem: '#am-time' //指定元素
|
||||
|
|
@ -88,32 +92,23 @@
|
|||
,type: 'time'
|
||||
,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>
|
||||
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 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">
|
||||
<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">
|
||||
<input type="number" name="lng" value="{$item.lng ?? ''}" id="lng" 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">
|
||||
<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 class="layui-input-inline"><button type="button" class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -71,18 +100,35 @@
|
|||
<script src="__STATIC__/js/iPicker/iPicker.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>
|
||||
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>
|
||||
layui.use(['layer','form','jquery','location', '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 : '116.404';
|
||||
lat = lat.length > 0 ? lat : '39.915';
|
||||
let locationData = {lng: lng,lat: lat};
|
||||
// let lng = $('#longitude').val();
|
||||
// let lat = $('#latitude').val();
|
||||
//
|
||||
// lng = lng.length > 0 ? lng : '116.404';
|
||||
// lat = lat.length > 0 ? lat : '39.915';
|
||||
// let locationData = {lng: lng,lat: lat};
|
||||
|
||||
let laydate = layui.laydate;
|
||||
laydate.render({
|
||||
|
|
@ -96,31 +142,31 @@
|
|||
,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);
|
||||
}
|
||||
|
||||
});
|
||||
// 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>
|
||||
Loading…
Reference in New Issue