From 6a44973461e2a91f62f7eed681b4db3abb026289 Mon Sep 17 00:00:00 2001
From: zuoxiao <470321431@qq.com>
Date: 星期二, 24 十二月 2024 16:52:23 +0800
Subject: [PATCH] 1.优化地图相关代码，提高运行效率和可读性。 2.添加修改密码功能。 3.优化列表和详情页展示。
---
app/src/main/assets/js/map.js | 117 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 58 insertions(+), 59 deletions(-)
diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js
index 46dba57..cbd35c7 100644
--- a/app/src/main/assets/js/map.js
+++ b/app/src/main/assets/js/map.js
@@ -1,10 +1,18 @@
(function () {
- // 鍥剧墖璺緞
- const locationIMGPath = 'img/location.png';
- const markerBalckPath = 'img/marker_black.svg';
- const markerRedPath = 'img/marker_red.svg';
- const markerBluePath = 'img/marker_blue.svg';
- const centerPin = 'img/push_pin.svg';
+ // 寤鸿灏嗚繖浜涘父閲忕Щ鍒颁竴涓厤缃璞′腑缁熶竴绠＄悊
+ const CONFIG = {
+ IMAGES: {
+ LOCATION: 'img/location.png',
+ MARKER_BLACK: 'img/marker_black.svg',
+ MARKER_RED: 'img/marker_red.svg',
+ MARKER_BLUE: 'img/marker_blue.svg',
+ CENTER_PIN: 'img/push_pin.svg'
+ },
+ MAP: {
+ DEFAULT_ZOOM: 12,
+ TIANDITU_KEY: 'd8beed89b43160a9a185e5aff431f85d'
+ }
+ };
let map;
let lastMarker = null;
let lastClickedMarker = null;
@@ -115,13 +123,11 @@
function locationOverLay(lng, lag) {
console.log("function銆嬨�嬨�嬨�嬨�媗ocationOverLay");
map.centerAndZoom(new T.LngLat(lng, lag), map.getZoom());
-
- let icon = new T.Icon({
- iconUrl: locationIMGPath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
- let marker = new T.Marker(new T.LngLat(lng, lag), { icon: icon });
+
+ let marker = new T.Marker(
+ new T.LngLat(lng, lag),
+ { icon: createIcon(CONFIG.IMAGES.LOCATION, 27) }
+ );
map.addOverLay(marker);
}
@@ -146,14 +152,7 @@
function closeWaterIntakeDetail(data) {
if (!isShowCenterPin) {
if (lastClickedMarker !== null) {
- // 濡傛灉鏈夌偣鍑诲彇姘村彛鍒欏皢鍙栨按鍙ｆ仮澶嶆垚榛戣壊
- // 涓婃鐐瑰嚮鐨勬爣娉ㄦ敼涓洪粦鑹�
- var defaulticon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(28, 28),
- iconAnchor: new T.Point(14, 28)
- });
- lastClickedMarker.setIcon(defaulticon);
+ lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
if (isShowWaterIntakeDetail) {
// 鍋囧鏄剧ず浜嗗彇姘村彛璇︽儏鍒欓殣钘忓彇姘村彛璇︽儏
@@ -182,23 +181,11 @@
function chageMarkerIcon(data) {
// 鐐瑰嚮鐨勬爣娉ㄦ敼涓虹孩鑹�
var currentMarker = data.target;
- // 鐐瑰嚮鍚庡浘鏍�
- var clickedIcon = new T.Icon({
- iconUrl: markerRedPath,
- iconSize: new T.Point(28, 28),
- iconAnchor: new T.Point(14, 28)
- });
- // 璁剧疆褰撳墠鐐瑰嚮鐨� marker 涓虹偣鍑诲悗鍥炬爣
- currentMarker.setIcon(clickedIcon);
- // 鍒ゆ柇鐐瑰嚮鐨勪笉鏄悓涓�涓潗鏍�
+ currentMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_RED));
+
if (lastClickedMarker !== null) {
if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
- var defaulticon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(28, 28),
- iconAnchor: new T.Point(14, 28)
- });
- lastClickedMarker.setIcon(defaulticon);
+ lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
}
lastClickedMarker = data.target;
@@ -220,20 +207,11 @@
function addMarker(id, lng, lat, name, isRed) {
console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker>>>id:" + id);
- var iconUrl;
- if (isRed) {
- iconUrl = markerRedPath;
- } else {
- iconUrl = markerBluePath;
- }
- var icon = new T.Icon({
- iconUrl: iconUrl,
- iconSize: new T.Point(28, 28),
- iconAnchor: new T.Point(14, 28)
- });
+ const iconUrl = isRed ? CONFIG.IMAGES.MARKER_RED : CONFIG.IMAGES.MARKER_BLUE;
let marker = new T.Marker(
- new T.LngLat(lng, lat) // 鍒涘缓鏍囨敞
- , { icon: icon });
+ new T.LngLat(lng, lat),
+ { icon: createIcon(iconUrl) }
+ );
//娣诲姞鐐瑰嚮浜嬩欢
marker.addEventListener("click", (data) => {
addMarkerListener(id, data)
@@ -257,18 +235,16 @@
map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
return "addMarker鍔犺浇鎴愬姛 id:" + id
}
- //鏇存柊瀹氫綅鍧愭爣
+ //鏇存柊浣嶅潗鏍�
function updateLocation(log, lat) {
- let icon = new T.Icon({
- iconUrl: locationIMGPath,
- iconSize: new T.Point(20, 20),
- iconAnchor: new T.Point(10, 10)
- });
if (locationMarker) {
map.removeOverLay(locationMarker);
}
var newPoint = new T.LngLat(log, lat);
- locationMarker = new T.Marker(newPoint, { icon: icon });
+ locationMarker = new T.Marker(
+ newPoint,
+ { icon: createIcon(CONFIG.IMAGES.LOCATION, 20) }
+ );
map.addOverLay(locationMarker);
map.panTo(newPoint);
}
@@ -346,9 +322,32 @@
function mapMoveEnd(e) {
- var center = e.target.getCenter();
- console.log("lng:" + center.getLng() + " lat:" + center.getLat())
- window.Android.refreshCenter(center.getLng(), center.getLat());
+ debounce(() => {
+ const center = e.target.getCenter();
+ window.Android.refreshCenter(center.getLng(), center.getLat());
+ }, 300);
+ }
+
+ // 娣诲姞闃叉姈鍑芥暟
+ function debounce(fn, delay) {
+ let timer = null;
+ return function() {
+ if(timer) clearTimeout(timer);
+ timer = setTimeout(() => {
+ fn.apply(this, arguments);
+ }, delay);
+ }
+ }
+
+
+
+ // 鍒涘缓marker鍥炬爣鐨勬柟娉曞彲浠ユ娊鍙栧嚭鏉ュ鐢�
+ function createIcon(iconUrl, size = 28) {
+ return new T.Icon({
+ iconUrl: iconUrl,
+ iconSize: new T.Point(size, size),
+ iconAnchor: new T.Point(size/2, size)
+ });
}
})();
--
Gitblit v1.8.0