完成初版
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>坐标定位</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:"Microsoft YaHei",Arial,sans-serif; height:100vh; display:flex; overflow:hidden; }
|
||||
#app { display:flex; width:100%; height:100vh; }
|
||||
|
||||
#mapWrap { flex:1; position:relative; min-width:0; height:100%; }
|
||||
#map { height:100%; width:100%; }
|
||||
|
||||
#sidePanel {
|
||||
width:320px; height:100vh; background:#fff;
|
||||
border-left:1px solid #e0e0e0;
|
||||
display:flex; flex-direction:column; flex-shrink:0;
|
||||
position:relative; z-index:10000;
|
||||
box-shadow:-2px 0 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
padding:16px; border-bottom:2px solid #eee; flex-shrink:0;
|
||||
}
|
||||
.panel-section .title {
|
||||
font-size:14px; font-weight:bold; color:#333; margin-bottom:12px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.input-group label {
|
||||
display:block; font-size:12px; color:#888; margin-bottom:4px;
|
||||
}
|
||||
.input-group input {
|
||||
width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px;
|
||||
font-size:14px; background:#fff;
|
||||
}
|
||||
.input-group input:focus {
|
||||
outline:none; border-color:#27ae60; box-shadow:0 0 0 2px rgba(39,174,96,0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width:100%; padding:10px 0; border:none; border-radius:6px;
|
||||
cursor:pointer; font-size:14px; font-weight:bold; transition:all 0.2s;
|
||||
}
|
||||
.btn-primary { background:#27ae60; color:#fff; }
|
||||
.btn-primary:hover { background:#219653; }
|
||||
|
||||
.tip-box {
|
||||
padding:10px 12px; background:#f0fff0; border:1px solid #d4edda;
|
||||
border-radius:6px; font-size:12px; color:#27ae60; margin-top:12px;
|
||||
}
|
||||
.tip-box b { color:#333; }
|
||||
|
||||
.custom-marker-icon { background:none !important; border:none !important; }
|
||||
|
||||
@media (max-width:768px) {
|
||||
#app { display:block; position:relative; }
|
||||
#mapWrap { width:100%; height:55%; }
|
||||
#sidePanel {
|
||||
position:absolute; bottom:0; left:0;
|
||||
width:100%; height:45%;
|
||||
border-left:none; border-top:1px solid #e0e0e0;
|
||||
border-radius:12px 12px 0 0;
|
||||
box-shadow:0 -2px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
.input-group input { min-height:44px; font-size:15px; }
|
||||
.btn { min-height:44px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="mapWrap"><div id="map"></div></div>
|
||||
|
||||
<div id="sidePanel">
|
||||
<div class="panel-section">
|
||||
<div class="title">坐标定位</div>
|
||||
<div class="input-group">
|
||||
<label>纬度 (纬度在前)</label>
|
||||
<input type="text" v-model="lat" placeholder="如：30.2856" @keyup.enter="locateByCoord" class="lat-tag">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>经度 (经度在后)</label>
|
||||
<input type="text" v-model="lng" placeholder="如：109.4783" @keyup.enter="locateByCoord" class="lng-tag">
|
||||
</div>
|
||||
<button class="btn btn-primary" @click="locateByCoord">定位到此坐标</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" v-if="lat && lng">
|
||||
<div class="title">当前坐标</div>
|
||||
<div class="tip-box">
|
||||
纬度：<b>{{lat}}</b><br>
|
||||
经度：<b>{{lng}}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
map: null,
|
||||
markerGroup: null,
|
||||
markerIcon: null,
|
||||
activeMarker: null,
|
||||
lat: '',
|
||||
lng: ''
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
// 从URL参数读取初始坐标
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var initLat = parseFloat(params.get('lat'));
|
||||
var initLng = parseFloat(params.get('lng'));
|
||||
if (!isNaN(initLat) && !isNaN(initLng)) {
|
||||
this.lat = initLat + '';
|
||||
this.lng = initLng + '';
|
||||
this.locateByCoord();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
this.map = L.map('map').setView([30.2856, 109.4783], 13);
|
||||
L.tileLayer('http://localhost:3080/seeyon/seeyonExtend/assetsMap/map/{z}/{x}/{y}/tile.png', { maxZoom: 18, minZoom: 8 }).addTo(this.map);
|
||||
var self = this;
|
||||
setTimeout(function() { self.map.invalidateSize(); }, 100);
|
||||
|
||||
this.markerIcon = L.divIcon({
|
||||
html: '<img src="./markicon.png" style="width:48px;height:48px;">',
|
||||
className: 'custom-marker-icon',
|
||||
iconSize: [48, 48],
|
||||
iconAnchor: [24, 24]
|
||||
});
|
||||
this.markerGroup = L.layerGroup().addTo(this.map);
|
||||
|
||||
// 点击地图：放大到18级，回写经纬度
|
||||
this.map.on('click', function(e) {
|
||||
var clickLat = parseFloat(e.latlng.lat.toFixed(6));
|
||||
var clickLng = parseFloat(e.latlng.lng.toFixed(6));
|
||||
self.lat = clickLat + '';
|
||||
self.lng = clickLng + '';
|
||||
self.placeMarker(clickLat, clickLng);
|
||||
self.map.setView([clickLat, clickLng], 18);
|
||||
});
|
||||
},
|
||||
|
||||
// 输入坐标定位
|
||||
locateByCoord() {
|
||||
var lat = parseFloat(this.lat);
|
||||
var lng = parseFloat(this.lng);
|
||||
if (isNaN(lat) || isNaN(lng)) {
|
||||
alert('请输入有效的经纬度');
|
||||
return;
|
||||
}
|
||||
this.placeMarker(lat, lng);
|
||||
this.map.setView([lat, lng], 18);
|
||||
},
|
||||
|
||||
// 在地图上放置标记
|
||||
placeMarker(lat, lng) {
|
||||
this.markerGroup.clearLayers();
|
||||
var self = this;
|
||||
var m = L.marker([lat, lng], { icon: this.markerIcon });
|
||||
m.bindPopup(
|
||||
'纬度：<b>' + lat + '</b><br>经度：<b>' + lng + '</b>',
|
||||
{ offset: [0, -24] }
|
||||
);
|
||||
m.addTo(this.markerGroup);
|
||||
self.activeMarker = m;
|
||||
setTimeout(function() { m.openPopup(); }, 200);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function OK() {
|
||||
var latlng = '';
|
||||
const latText = $('.lat-tag').val();
|
||||
const lngText = $('.lng-tag').val();
|
||||
latlng = latText + "," +lngText
|
||||
return latlng;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user