地图标注样式修改

src/components/Map/index.vue

@@ -51,8 +51,6 @@ const getDictsData = (param) => {
 }
 
 const getGpsDataList = (param) => {
-    console.log(11111111);
-    console.log(param);
     getGpsData(param).then(res => {
         console.log(res);
         addLine(res.rows);
@@ -272,4 +270,10 @@ defineExpose({
     width: 100%;
     height: 100%;
 }
+
+/* .amap-marker-label{
+    border: 0px solid #00f;
+    background-color: transparent;
+    color: #ffffff;
+} */
 </style>

src/components/Map/map.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <div style="background-color: #ffffff;height: 30vh;">
+        <div style="background-color: #ffffff;height:100%;">
             <div id="container"></div>
         </div>
     </div>
@@ -15,29 +15,57 @@ import { shallowRef } from '@vue/reactivity';
 import { ref } from "vue";
 import { getDicts } from '@/api/system/dict/data'
 import { getGpsData } from '@/api/gpsData/index'
+import carImage from "@/assets/images/icon/小货车.png";
 import add from '@/views/car/carInfo/add.vue';
 
+const props = defineProps({
+    showMarket: {
+        type: Boolean,
+        default: true
+    },
+    darkType: {
+        type: Boolean,
+        default: false
+    },
+})
 
 // const map = shallowRef(null);
 const path = ref([]);
 const current_position = ref([]);
 let mapObj = ref()
+let singleMarker = ref(null);
+
+const lineObj = ref(null);
+
+const iconImage = new URL("@/assets/images/home/Point.png",import.meta.url);
+
 
 
 const getDictsData = (param) => {
     getDicts(param).then(res => {
         for (var index in res.data) {
             var obj = res.data[index].dictValue.split(",");
-            addMarker(obj, res.data[index])
+            // console.log(obj.toString())
+            var location = formatGCJ(Number(obj[0]), Number(obj[1]));
+            // console.log(location.toString())
+            addMarker(location, res.data[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'location')
         }
     })
 }
 
 const getGpsDataList = (param) => {
-    console.log(param)
     getGpsData(param).then(res => {
         console.log(res);
         addLine(res.rows);
+        if (singleMarker.value != null) {
+            mapObj.value.remove(singleMarker.value);
+        }
+        var car = res.rows[res.rows.length - 1]
+        if (car) {
+            var location = formatGCJ(car.lng, car.lat);
+            // addMarker(location, car, "../src/assets/images/icon/小货车.png", 'car')
+            addMarker(location, car, carImage, 'car')
+        }
     })
 }
 
@@ -60,21 +88,29 @@ const initMap = () => {
             zoom: 13,           //初始化地图级别
             center: [119.807462, 26.958413], //初始化地图中心点位置
         });
-        mapObj = map;
+        console.log(11111111111);
+        console.log(props.darkType)
+        if (props.darkType) {
+            var styleName = "amap://styles/darkblue";
+            map.setMapStyle(styleName);
+        }
+        console.log(map)
+        mapObj.value = map;
         console.log(map)
         // 添加插件
-        AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
-            //异步同时加载多个插件
-            // 添加地图插件
-            // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
-            map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
-            map.addControl(new AMap.HawkEye()); // 显示缩略图
-            map.addControl(new AMap.Geolocation()); // 定位当前位置
-            // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
-
-        });
+        // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
+        //     //异步同时加载多个插件
+        //     // 添加地图插件
+        //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
+        //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
+        //     map.addControl(new AMap.HawkEye()); // 显示缩略图
+        //     map.addControl(new AMap.Geolocation()); // 定位当前位置
+        //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
-        getDictsData("tbl_sites");
+        // });
+        if (props.showMarket) {
+            getDictsData("tbl_sites");
+        }
         // 单击
         map.on('click', (e) => {
             // lng ==> 经度值  lat => 维度值
@@ -113,11 +149,11 @@ const initMap = () => {
     })
 }
 
-const addMarker = (obj, data) => {
+const addMarker = (obj, data, src, type) => {
     const marker = new AMap.Marker({
         icon: new AMap.Icon({
-            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
-            imageSize: new AMap.Size(22, 28) //图标大小
+            image: iconImage,
+            imageSize: new AMap.Size(28, 28) //图标大小
         }),
         position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
         // 通过设置 offset 来添加偏移量
@@ -127,7 +163,10 @@ const addMarker = (obj, data) => {
         offset: new AMap.Pixel(-30, 20),
         content: data.dictLabel
     });
-    marker.setMap(mapObj);
+    if (type == 'car') {
+        singleMarker.value = marker
+    }
+    marker.setMap(mapObj.value);
     //给marker添加属性
     marker.setExtData(data)
     //给marker添加点击事件
@@ -135,9 +174,15 @@ const addMarker = (obj, data) => {
 }
 
 const addLine = (list) => {
+    if (lineObj.value != null) {
+        mapObj.value.remove([lineObj.value])
+    }
     var dataList = []
     for (var index in list) {
-        var obj = new AMap.LngLat(list[index].lng, list[index].lat);
+        // console.log('转换前坐标' + [list[index].lng, list[index].lat])
+        var location = formatGCJ(list[index].lng, list[index].lat);
+        // console.log('转换后坐标' + [location[0], location[1]])
+        var obj = new AMap.LngLat(location[0], location[1]);
         dataList.push(obj)
     }
     var polyline = new AMap.Polyline({
@@ -147,8 +192,9 @@ const addLine = (list) => {
         lineJoin: "round", //折线拐点连接处样式
     });
     // polyline.setMap(mapObj);
-    console.log(mapObj)
-    mapObj.add([polyline]);
+    // console.log(mapObj)
+    lineObj.value = polyline
+    mapObj.value.add(polyline);
 }
 
 const emit = defineEmits(['childToParent']);
@@ -157,8 +203,63 @@ const clickMarker = (e) => {
     emit('childToParent', e.target.getExtData())
 }
 
+const formatGCJ = (lng, lat) => {
+    const x_PI = 3.14159265358979324 * 3000.0 / 180.0
+    const PI = 3.1415926535897932384626
+    const a = 6378245.0
+    const ee = 0.00669342162296594323
+    if (outOfChina(lng, lat)) {
+        return [lng, lat]
+    }
+    else {
+        var dlat = transformlat(lng - 105.0, lat - 35.0)
+        var dlng = transformlng(lng - 105.0, lat - 35.0)
+        var radlat = lat / 180.0 * PI
+        var magic = Math.sin(radlat)
+        magic = 1 - ee * magic * magic
+        var sqrtmagic = Math.sqrt(magic)
+        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
+        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
+        const mglat = lat + dlat
+        const mglng = lng + dlng
+        return [mglng, mglat]
+    }
+    /*判断是否在国内，不在国内则不做偏移*/
+    function transformlat(lng, lat) {
+        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
+        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
+        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
+        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
+        return ret
+    }
+
+    /**
+     * 纬度转换
+     * @param { Number } lng 
+     * @param { Number } lat 
+     */
+    function transformlng(lng, lat) {
+        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
+        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
+        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
+        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
+        return ret
+    }
+
+    /**
+     * 判断是否在国内，不在国内则不做偏移
+     * @param {*} lng 
+     * @param {*} lat 
+     */
+    function outOfChina(lng, lat) {
+        return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
+    }
+
+}
+
 
 initMap()
+console.log(props.showMarket);
 // getGpsDataList();
 defineExpose({
     getGpsDataList,
@@ -170,6 +271,12 @@ defineExpose({
     padding: 0px;
     margin: 0px;
     width: 100%;
-    height: 30vh;
+    height: 100%;
+}
+
+.amap-marker-label{
+    border: 0px solid #00f;
+    background-color: transparent;
+    color: #ffffff;
 }
 </style>

src/views/index.vue

@@ -12,7 +12,7 @@
 
 <script setup name="Index" lang="ts">
 import { initWebSocket } from '@/utils/websocket';
-import mapDiv from "@/components/Map/index.vue"
+import mapDiv from "@/components/Map/map.vue"
 import countPage from "@/components/HomeStatics/countPage.vue";
 import lineEcharts from "@/components/HomeStatics/lineEcharts.vue";
 import messageTable from '@/components/HomeStatics/messageTable.vue';
@@ -107,4 +107,5 @@ const goTarget = (url: string) => {
     }
   }
 }
+
 </style>