From 2fb397e4a31d14880ed2524f898ae67a0d664c06 Mon Sep 17 00:00:00 2001
From: zuoxiao <470321431@qq.com>
Date: 星期二, 17 十二月 2024 11:24:29 +0800
Subject: [PATCH] 1.在地图中心显示中心点。 2.优化地图覆盖物显示，使显示的图标正对坐标。 3.优化地图覆盖物文字居中显示。
---
app/src/main/assets/js/map.js | 130 ++++++++++++++++++++----------------------
1 files changed, 62 insertions(+), 68 deletions(-)
diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js
index 3df1bb6..3b54c66 100644
--- a/app/src/main/assets/js/map.js
+++ b/app/src/main/assets/js/map.js
@@ -4,11 +4,27 @@
const markerBalckPath = 'img/marker_black.svg';
const markerRedPath = 'img/marker_red.svg';
const markerBluePath = 'img/marker_blue.svg';
+ const centerPin = 'img/push_pin.svg';
let map;
let lastMarker = null;
let lastClickedMarker = null;
let isShowWaterIntakeDetail = false;
let zoom = 12;
+
+ // 灏嗘柟娉曟寕杞藉埌 window 涓�
+ function mountMethodToWindow() {
+ window.locationOverLay = locationOverLay;
+ window.showToast = showToast;
+ window.addMarker = addMarker;
+ window.setCenterAndZoom = setCenterAndZoom;
+ window.updateLocation = updateLocation;
+ window.aginShowLocation = aginShowLocation;
+ window.cleanLocationLay = cleanLocationLay;
+ window.updateInspectionLocation = updateInspectionLocation;
+ window.cleanLoclLay = cleanLoclLay;
+ window.showPin = showPin;
+
+ }
document.addEventListener('DOMContentLoaded', function () {
@@ -87,47 +103,6 @@
}
}
- // 妯℃嫙娣诲姞鍙栨按鍙ｆ爣娉�
- function buttonOverLay() {
- map.clearOverLays(); // 娓呯悊鍦板浘涓婄殑鎵�鏈夎鐩栫墿
-
- let data_info = [
- [116.417854, 39.921988, "235鍙栨按鍙�"],
- [116.406605, 39.921585, "237鍙栨按鍙�"],
- [116.412222, 39.912345, "236鍙栨按鍙�"]
- ];
-
- for (let i = 0; i < data_info.length; i++) {
- let icon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
-
- let marker = new T.Marker(
- new T.LngLat(data_info[i][0], data_info[i][1]), // 鍒涘缓鏍囨敞
- { icon: icon }
- );
-
- marker.addEventListener("click", function (data) {
- addMarkerListener(data);
- });
-
- map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
-
- let label = new T.Label({
- text: data_info[i][2],
- position: marker.getLngLat(),
- offset: new T.Point(-50, 10), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃�
- opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛�
- });
- label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹�
- label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級
- label.setFontColor("#0000FF");
- label.setFontSize(10);
- map.addOverLay(label);
- }
- }
// 鏄剧ず鏍囨敞鐐瑰嚮鍚庣殑绐楀彛
function openInfo(content, e) {
@@ -161,19 +136,7 @@
}
- // 灏嗘柟娉曟寕杞藉埌 window 涓�
- function mountMethodToWindow() {
- window.locationOverLay = locationOverLay;
- window.showToast = showToast;
- window.addMarker = addMarker;
- window.setCenterAndZoom = setCenterAndZoom;
- window.updateLocation = updateLocation;
- window.aginShowLocation = aginShowLocation;
- window.cleanLocationLay = cleanLocationLay;
- window.updateInspectionLocation = updateInspectionLocation;
- window.cleanLoclLay = cleanLoclLay;
- }
// 璋冪敤鍘熺敓瀹夊崜鏂规硶鏄剧ず鍙栨按鍙ｈ鎯�
function showWaterIntakeDetail(data) {
@@ -188,8 +151,8 @@
// 涓婃鐐瑰嚮鐨勬爣娉ㄦ敼涓洪粦鑹�
var defaulticon = new T.Icon({
iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
});
lastClickedMarker.setIcon(defaulticon);
}
@@ -204,7 +167,7 @@
}
// 鐐瑰嚮鏍囨敞鐨勪簨浠�
- function addMarkerListener(id,data) {
+ function addMarkerListener(id, data) {
chageMarkerIcon(data);
showWaterIntakeDetail(id);
}
@@ -216,8 +179,8 @@
// 鐐瑰嚮鍚庡浘鏍�
var clickedIcon = new T.Icon({
iconUrl: markerRedPath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
});
// 璁剧疆褰撳墠鐐瑰嚮鐨� marker 涓虹偣鍑诲悗鍥炬爣
currentMarker.setIcon(clickedIcon);
@@ -226,8 +189,8 @@
if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
var defaulticon = new T.Icon({
iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
});
lastClickedMarker.setIcon(defaulticon);
}
@@ -244,31 +207,31 @@
return data1.lat === data2.lat && data1.lng === data2.lng;
}
//娣诲姞浠庡師鐢熶紶杩囨潵鐨勫潗鏍囧苟鏄剧ず鍦ㄥ湴鍥句笂
- function addMarker(id,lng,lat,name) {
+ function addMarker(id, lng, lat, name) {
console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker");
-
+
var icon = new T.Icon({
iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
});
let marker = new T.Marker(
new T.LngLat(lng, lat) // 鍒涘缓鏍囨敞
, { icon: icon });
//娣诲姞鐐瑰嚮浜嬩欢
marker.addEventListener("click", (data) => {
- addMarkerListener(id,data)
+ addMarkerListener(id, data)
});
map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
let label = new T.Label({
- text: name,
+ text: `<div style='position:absolute;left:-50%;transform: translateX(-50%);'>${name}<div>`,
position: marker.getLngLat(),
- offset: new T.Point(-35, 8), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃�
+ offset: new T.Point(0, 8), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃�
opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛�
});
label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹�
label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級
- label.setFontColor("#0000FF");
+ label.setFontColor("#FFFFFF");
label.setFontSize(10);
map.addOverLay(label);
return "addMarker鍔犺浇鎴愬姛"
@@ -338,4 +301,35 @@
}
+
+ //鍦ㄥ湴鍥句笂鏄剧ず涓績鐐�
+ var pinMarker;
+ function showPin() {
+ var icon = new T.Icon({
+ iconUrl: centerPin,
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
+ });
+ pinMarker = new T.Marker(
+ new T.LngLat(map.getCenter().getLng(), map.getCenter().getLat()) // 鍒涘缓鏍囨敞
+ , { icon: icon });
+ map.addOverLay(pinMarker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+ map.addEventListener("moveend", MapMoveend);
+ }
+
+ function MapMoveend(e) {
+ map.removeOverLay(pinMarker);
+ var icon = new T.Icon({
+ iconUrl: centerPin,
+ iconSize: new T.Point(28, 28),
+ iconAnchor: new T.Point(14, 28)
+ });
+ var center = e.target.getCenter();
+ console.log("lng:" + center.getLng() + " lat:" + center.getLat())
+ pinMarker = new T.Marker(
+ new T.LngLat(center.getLng(), center.getLat()) // 鍒涘缓鏍囨敞
+ , { icon: icon });
+ map.addOverLay(pinMarker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+ }
+
})();
--
Gitblit v1.8.0