@heycar/heycars-map 2.11.0 → 2.12.0-color1

package/README.md

@@ -140,6 +140,26 @@ export type RecommendType = "Restricted" | "Forbidden" | "Recommend";
   googleDirectionsProxyUrl="/overseas/maps/directions/json"
   // 可选，谷歌路由服务代理地址
   googleRoutesProxyUrl="/overseas/maps/routes/directions"
+  // 可选，自定义地图颜色
+  themeVariables={{
+    TRAFFIC_UNKNOWN_BACKGROUND_COLOR: "#00C875",
+    TRAFFIC_UNKNOWN_BORDER_COLOR: "#008559",
+    TRAFFIC_NORMAL_BACKGROUND_COLOR: "#00C875",
+    TRAFFIC_NORMAL_BORDER_COLOR: "#008559",
+    TRAFFIC_SLOW_BACKGROUND_COLOR: "#F9D100",
+    TRAFFIC_SLOW_BORDER_COLOR: "#B29400",
+    TRAFFIC_TRAFFIC_JAM_BACKGROUND_COLOR: "#EB0E33",
+    TRAFFIC_TRAFFIC_JAM_BORDER_COLOR: "#990D24",
+    TRAFFIC_HEAVY_TRAFFIC_JAM_BACKGROUND_COLOR: "#99001A",
+    TRAFFIC_HEAVY_TRAFFIC_JAM_BORDER_COLOR: "#4D000D",
+    TRAFFIC_DONE_BACKGROUND_COLOR: "#96B2CA",
+    TRAFFIC_DONE_BORDER_COLOR: "#7693AF",
+    WALKING_LINE_COLOR: "#38A3FE",
+    ZONE_RESTRICTED_BACKGROUND_COLOR: "#C7E5FB",
+    ZONE_RESTRICTED_BORDER_COLOR: "#4BA7FF",
+    ZONE_FORBIDDEN_BACKGROUND_COLOR: "#F27878",
+    ZONE_FORBIDDEN_BORDER_COLOR: "#F41717",
+  }}
   // 地图加载失败时显示的标题
   renderLoadFailedTitle={() => (supplier === "gmap" ? "未能成功访问谷歌地图" : "高德地图加载失败")}
   // 地图加载失败时显示的描述

package/dist/v2/App.js

@@ -8,7 +8,7 @@ const amapApiKey = "fcb7b14c930354a248e21f4031dfa179";
 const amapApiSecret = "11ad0e3d585b80d18b1ada5b0d947c4a";
 const App = defineComponent({
   setup() {
-    const supplierRef = ref("gmap");
+    const supplierRef = ref("amap");
     window.supplierRef = supplierRef;
     return () => h(MapProvider, {
       "attrs": {

package/dist/v2/Demo/DemoBusinessRecomendPlace.js

@@ -1,5 +1,5 @@
 import { h } from "vue";
-import { B as BusinessRecomendPlaceMap } from "../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B as BusinessRecomendPlaceMap } from "../chunks/BusinessRecomendPlaceMap.e9166e7d.js";
 import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap.js";
 import { defineSetup } from "../types/helper.js";
 import { d as demo } from "../chunks/Demo.css.e921a2f6.js";

package/dist/v2/api/cdn.d.ts

@@ -1,7 +1,7 @@
 export declare const AMAP_DEFAULT_MARKER_ICON_URL = "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png";
 export declare const ICON_FULL_SCREEN_URL = "https://overseas-oss.heycars.cn/heycar-map/png/fullscreen.png";
-export declare const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/start-point-en.svg";
-export declare const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-en.svg";
+export declare const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
+export declare const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
 export declare const ICON_END_POINT_ZH_TW_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-zh-TW.svg";
 export declare const ICON_TAXI_CAR_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/taxi-car.svg";
 export declare const ICON_DOT_LOADING_URL = "https://overseas-oss.heycars.cn/heycar-map/gif/dot-loading.gif";

package/dist/v2/api/cdn.js

@@ -1,7 +1,7 @@
 const AMAP_DEFAULT_MARKER_ICON_URL = "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png";
 const ICON_FULL_SCREEN_URL = "https://overseas-oss.heycars.cn/heycar-map/png/fullscreen.png";
-const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/start-point-en.svg";
-const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-en.svg";
+const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
+const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
 const ICON_END_POINT_ZH_TW_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-zh-TW.svg";
 const ICON_TAXI_CAR_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/taxi-car.svg";
 const ICON_DOT_LOADING_URL = "https://overseas-oss.heycars.cn/heycar-map/gif/dot-loading.gif";

package/dist/v2/business-components/AbsoluteAddressBox/AbsoluteAddressBox.js

@@ -1,13 +1,14 @@
-import "../../css/AbsoluteAddressBox-7502ed45.css";
+import "../../css/AbsoluteAddressBox-125d3642.css";
 import { h } from "vue";
 import { computed } from "vue-demi";
 import { ICON_DOT_LOADING_URL } from "../../api/cdn.js";
-import { i as imgAddressLocator } from "../../chunks/address-locator.98305e58.js";
-import { i as imgArrowRight } from "../../chunks/arrow-right.eedc7433.js";
+import { i as imgAddressLocator } from "../../chunks/address-locator.c8105f89.js";
+import { i as imgArrowRight } from "../../chunks/arrow-right.c4bcf4de.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { defineSetup } from "../../types/helper.js";
 import { c as createRuntimeFn } from "../../chunks/vanilla-extract-recipes-createRuntimeFn.esm.bd6fc290.js";
-const imgBubbleRightArc = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGgyLjEzMWExMCAxMCAwIDAxOS42OTYgNy41NTJMMTggMzJILjA0MkwwIDB6IiBmaWxsPSIjMjUzRTdBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=";
-const imgGuideArrow = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHdpZHRoPSIyIiBoZWlnaHQ9IjYiPgogIDxwYXRoIGQ9Ik0uNTE2IDEuMTAzQS4zLjMgMCAwMDAgMS4zMXYyLjY2OGEuMy4zIDAgMDAuNTE2LjIwOEwxLjggMi44NTNhLjMuMyAwIDAwMC0uNDE2TC41MTYgMS4xMDN6IiBmaWxsPSIjRkZGIiAvPgo8L3N2Zz4=";
+const imgBubbleRightArc = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAxOCAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDIuMTMxYTEwIDEwIDAgMDE5LjY5NiA3LjU1MkwxOCAzMkguMDQyTDAgMHoiIGZpbGw9InZhcigtLUhFWUNBUl9NQVBfQ1NTX1ZBUl9BYnNvbHV0ZUFkZHJlc3NCb3hfYm94SGVhZGVyX2JhY2tncm91bmQsIGhzbCgyMjIsIDUzJSwgMzElKSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==";
+const imgGuideArrow = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHdpZHRoPSIyIiBoZWlnaHQ9IjYiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyIDYiPgogIDxwYXRoIGQ9Ik0uNTE2IDEuMTAzQS4zLjMgMCAwMDAgMS4zMXYyLjY2OGEuMy4zIDAgMDAuNTE2LjIwOEwxLjggMi44NTNhLjMuMyAwIDAwMC0uNDE2TC41MTYgMS4xMDN6IiBmaWxsPSIjRkZGIiAvPgo8L3N2Zz4=";
 const AbsoluteAddressBox_css_ts_vanilla = "";
 var absoluteAddressBox = "n8tgem1";
 var absoluteAddressBoxLayout = "n8tgem0";
@@ -54,7 +55,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
     if (type === "locator")
       return h("div", {
         "class": absoluteAddressBoxLayout
-      }, [h("img", {
+      }, [h(SvgInlineWebComponentTag, {
         "class": locatorIcon,
         "attrs": {
           "src": imgAddressLocator
@@ -84,7 +85,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       "class": boxHeader
     }, [h("div", {
       "class": boxHeaderText
-    }, [description]), h("img", {
+    }, [description]), h(SvgInlineWebComponentTag, {
       "class": boxHeaderIcon,
       "attrs": {
         "src": imgBubbleRightArc
@@ -108,7 +109,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       }
     }, [h("div", {
       "class": boxPhotoDescription
-    }, [photo.title]), h("img", {
+    }, [photo.title]), h(SvgInlineWebComponentTag, {
       "class": boxPhotoArrow,
       "attrs": {
         "src": imgGuideArrow
@@ -127,7 +128,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       "attrs": {
         "value": title
       }
-    })]), withArrow && h("img", {
+    })]), withArrow && h(SvgInlineWebComponentTag, {
       "class": arrowRight,
       "attrs": {
         "src": imgArrowRight

package/dist/v2/business-components/AddressLocator/AddressLocator.js

@@ -1,9 +1,10 @@
 import "../../css/AddressLocator-321d2936.css";
 import { h } from "vue";
 import { computed } from "vue-demi";
-import { i as imgAddressLocator } from "../../chunks/address-locator.98305e58.js";
+import { i as imgAddressLocator } from "../../chunks/address-locator.c8105f89.js";
 import { AmapMarker } from "../../components/AmapMarker/AmapMarker.js";
 import { GmapAdvancedMarkerElement } from "../../components/GmapAdvancedMarkerElement/GmapAdvancedMarkerElement.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
@@ -13,7 +14,7 @@ const AddressLocator_css_ts_vanilla = "";
 var addressLocator = "rgf09w0";
 const AAddressLocator = defineSetup("AAddressLocator", function(props) {
   const contentRef = computed(() => `
-      <img src="${imgAddressLocator}" class="${addressLocator}">
+      <${SvgInlineWebComponentTag} src="${imgAddressLocator}" class="${addressLocator}">
     `);
   return () => h(AmapMarker, {
     "attrs": {
@@ -24,7 +25,7 @@ const AAddressLocator = defineSetup("AAddressLocator", function(props) {
   });
 });
 const GAddressLocator = defineSetup("GAddressLocator", function(props) {
-  const contentRef = computed(() => createDom("img", {
+  const contentRef = computed(() => createDom(SvgInlineWebComponentTag, {
     class: addressLocator,
     src: imgAddressLocator
   }));

package/dist/v2/business-components/AuxiliaryLine/AuxiliaryLine.js

@@ -11,7 +11,7 @@ import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
 import { vec2lnglat } from "../../utils/transform.js";
-const imgMarkerRed = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEwMjguNCkiPjxwYXRoIGQ9Im0xMiAwYy00LjQxODMgMi4zNjg1ZS0xNSAtOCAzLjU4MTctOCA4IDAgMS40MjEgMC4zODE2IDIuNzUgMS4wMzEyIDMuOTA2IDAuMTA3OSAwLjE5MiAwLjIyMSAwLjM4MSAwLjM0MzggMC41NjNsNi42MjUgMTEuNTMxIDYuNjI1LTExLjUzMWMwLjEwMi0wLjE1MSAwLjE5LTAuMzExIDAuMjgxLTAuNDY5bDAuMDYzLTAuMDk0YzAuNjQ5LTEuMTU2IDEuMDMxLTIuNDg1IDEuMDMxLTMuOTA2IDAtNC40MTgzLTMuNTgyLTgtOC04em0wIDRjMi4yMDkgMCA0IDEuNzkwOSA0IDQgMCAyLjIwOS0xLjc5MSA0LTQgNC0yLjIwOTEgMC00LTEuNzkxLTQtNCAwLTIuMjA5MSAxLjc5MDktNCA0LTR6IiBmaWxsPSIjZTc0YzNjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiLz48cGF0aCBkPSJtMTIgM2MtMi43NjE0IDAtNSAyLjIzODYtNSA1IDAgMi43NjEgMi4yMzg2IDUgNSA1IDIuNzYxIDAgNS0yLjIzOSA1LTUgMC0yLjc2MTQtMi4yMzktNS01LTV6bTAgMmMxLjY1NyAwIDMgMS4zNDMxIDMgM3MtMS4zNDMgMy0zIDMtMy0xLjM0MzEtMy0zIDEuMzQzLTMgMy0zeiIgZmlsbD0iI2MwMzkyYiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMDI4LjQpIi8+PC9nPjwvc3ZnPg==";
+const imgMarkerRed = "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMGE4IDggMCAwMC04IDhjMCAxLjQyMS4zODIgMi43NSAxLjAzMSAzLjkwNi4xMDguMTkyLjIyMS4zODEuMzQ0LjU2M0wxMiAyNGw2LjYyNS0xMS41MzFjLjEwMi0uMTUxLjE5LS4zMTEuMjgxLS40NjlsLjA2My0uMDk0QTcuOTU0IDcuOTU0IDAgMDAyMCA4YTggOCAwIDAwLTgtOHptMCA0YTQgNCAwIDExMCA4IDQgNCAwIDAxMC04eiIgZmlsbD0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX21hcmtlci1yZWRfcGF0aF8xX2ZpbGwsIGhzbCg2LCA3OCUsIDU3JSkpIi8+PHBhdGggZD0iTTEyIDNhNSA1IDAgMTAwIDEwIDUgNSAwIDAwMC0xMHptMCAyYTMgMyAwIDExMCA2IDMgMyAwIDAxMC02eiIgZmlsbD0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX21hcmtlci1yZWRfcGF0aF8yX2ZpbGwsIGhzbCg2LCA2MyUsIDQ2JSkpIi8+PC9zdmc+";
 const AAuxiliaryLine = defineSetup("AAuxiliaryLine", function(props) {
   const defaultMarkerSize = 36;
   const redIcon = new AMap.Icon({

package/dist/v2/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.js

@@ -27,7 +27,7 @@ import "../GreenZone/GreenZone.js";
 import "../PassengerCircle/PassengerCircle.js";
 import "../PickupPoints/PickupPoints.js";
 import "./useCacheCenterPlace.js";
-import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.e9166e7d.js";
 export {
   B as BusinessRecomendPlaceMap,
   f as BusinessRecomendPlaceMapInner,

package/dist/v2/business-components/BusinessRecomendPlaceMap/index.js

@@ -1,4 +1,4 @@
-import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.e9166e7d.js";
 export {
   B as BusinessRecomendPlaceMap,
   f as BusinessRecomendPlaceMapInner,

package/dist/v2/business-components/BusinessReselectPlaceMap/BusinessReselectPlaceMap.js

@@ -21,7 +21,7 @@ import { detectBrowserPlatform } from "../../utils/platform.js";
 import { place2point, isPlaceEqual, isZoneEqual, geoPositionError2businessTimeout, pipeDefer } from "../../utils/transform.js";
 import { toCoordinatePlaceType, toCoordinatePointType, toCoordinateRecommendZonePlacesType } from "../../utils/typeChecking.js";
 import { AbsoluteAddressBox } from "../AbsoluteAddressBox/AbsoluteAddressBox.js";
-import { E as EMPTY_PLACE, m as memoize, R as RECOMMEND_PLACE_DRAG_LIMIT, a as RECOMMEND_PLACE_LARGE_LIMIT, b as RECOMMEND_PLACE_ZONE_ICON_MIN, c as RECOMMEND_PLACE_ICON_ZOOM_MIN, d as RECOMMEND_PLACE_ZONE_TEXT_MIN, e as RECOMMEND_PLACE_TEXT_ZOOM_MIN, D as DEFAULT_ZOOM, Z as ZONE_FITVIEW_PANDING } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { E as EMPTY_PLACE, m as memoize, R as RECOMMEND_PLACE_DRAG_LIMIT, a as RECOMMEND_PLACE_LARGE_LIMIT, b as RECOMMEND_PLACE_ZONE_ICON_MIN, c as RECOMMEND_PLACE_ICON_ZOOM_MIN, d as RECOMMEND_PLACE_ZONE_TEXT_MIN, e as RECOMMEND_PLACE_TEXT_ZOOM_MIN, D as DEFAULT_ZOOM, Z as ZONE_FITVIEW_PANDING } from "../../chunks/BusinessRecomendPlaceMap.e9166e7d.js";
 import { DeviceOrientation } from "../DeviceOrientation/DeviceOrientation.js";
 import { GreenZone } from "../GreenZone/GreenZone.js";
 import { PassengerCircle } from "../PassengerCircle/PassengerCircle.js";
@@ -308,7 +308,7 @@ const BusinessReselectPlaceMapInner = defineSetup("BusinessReselectPlaceMapInner
       }
     }, [((_b = zoneRef.value) == null ? void 0 : _b.path.length) && h(GreenZone, {
       "attrs": {
-        "isRed": isForbidden,
+        "isForbidden": isForbidden,
         "path": (_c = zoneRef.value) == null ? void 0 : _c.path
       }
     }), !geoLoading.value && !geoError.value && h(DeviceOrientation, {

package/dist/v2/business-components/DrivingLine/DrivingLine.d.ts

@@ -1,9 +1,11 @@
-import type { TrafficStatus } from "../../types/interface";
+import type { MapThemeVariables, TrafficStatus } from "../../types/interface";
 type DrivingLineStatus = TrafficStatus | "DONE";
+type DrivingLineColors = Pick<MapThemeVariables, "TRAFFIC_UNKNOWN_BACKGROUND_COLOR" | "TRAFFIC_UNKNOWN_BORDER_COLOR" | "TRAFFIC_NORMAL_BACKGROUND_COLOR" | "TRAFFIC_NORMAL_BORDER_COLOR" | "TRAFFIC_SLOW_BACKGROUND_COLOR" | "TRAFFIC_SLOW_BORDER_COLOR" | "TRAFFIC_TRAFFIC_JAM_BACKGROUND_COLOR" | "TRAFFIC_TRAFFIC_JAM_BORDER_COLOR" | "TRAFFIC_HEAVY_TRAFFIC_JAM_BACKGROUND_COLOR" | "TRAFFIC_HEAVY_TRAFFIC_JAM_BORDER_COLOR" | "TRAFFIC_DONE_BACKGROUND_COLOR" | "TRAFFIC_DONE_BORDER_COLOR">;
 export interface DrivingLineProps {
     status?: DrivingLineStatus;
     path: [number, number][];
     lineCap?: AMap.LineSharedOptions["lineCap"];
+    colors?: DrivingLineColors;
 }
 export declare const ADrivingLine: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, DrivingLineProps>;
 export declare const GDrivingLine: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, DrivingLineProps>;

package/dist/v2/business-components/DrivingLine/DrivingLine.js

@@ -6,33 +6,20 @@ import { GmapPolyline } from "../../components/GmapPolyline/GmapPolyline.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
-import { vec2lnglat } from "../../utils/transform.js";
-const trafficInnerColors = {
-  // UNKNOWN: "#487BF4",
-  UNKNOWN: "#00C875",
-  NORMAL: "#00C875",
-  SLOW: "#F9D100",
-  TRAFFIC_JAM: "#EB0E33",
-  HEAVY_TRAFFIC_JAM: "#99001A",
-  DONE: "#96B2CA"
-};
-const trafficOuterColors = {
-  // UNKNOWN: "#4175F1",
-  UNKNOWN: "#008559",
-  NORMAL: "#008559",
-  SLOW: "#B29400",
-  TRAFFIC_JAM: "#990D24",
-  HEAVY_TRAFFIC_JAM: "#4D000D",
-  DONE: "#7693AF"
-};
-const trafficBorderColors = {
-  // UNKNOWN: "#6C95F5",
-  UNKNOWN: "#00C875",
-  NORMAL: "#00C875",
-  SLOW: "#F9D100",
-  TRAFFIC_JAM: "#EB0E33",
-  HEAVY_TRAFFIC_JAM: "#99001A",
-  DONE: "#7693AF"
+import { mergeDefaultProps, vec2lnglat } from "../../utils/transform.js";
+const defaultColors = {
+  TRAFFIC_UNKNOWN_BACKGROUND_COLOR: "#00C875",
+  TRAFFIC_UNKNOWN_BORDER_COLOR: "#008559",
+  TRAFFIC_NORMAL_BACKGROUND_COLOR: "#00C875",
+  TRAFFIC_NORMAL_BORDER_COLOR: "#008559",
+  TRAFFIC_SLOW_BACKGROUND_COLOR: "#F9D100",
+  TRAFFIC_SLOW_BORDER_COLOR: "#B29400",
+  TRAFFIC_TRAFFIC_JAM_BACKGROUND_COLOR: "#EB0E33",
+  TRAFFIC_TRAFFIC_JAM_BORDER_COLOR: "#990D24",
+  TRAFFIC_HEAVY_TRAFFIC_JAM_BACKGROUND_COLOR: "#99001A",
+  TRAFFIC_HEAVY_TRAFFIC_JAM_BORDER_COLOR: "#4D000D",
+  TRAFFIC_DONE_BACKGROUND_COLOR: "#96B2CA",
+  TRAFFIC_DONE_BORDER_COLOR: "#7693AF"
 };
 const ADrivingLine = defineSetup("ADrivingLine", function(props) {
   return () => {
@@ -40,21 +27,21 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
       status = "UNKNOWN",
       lineCap = "round"
     } = props;
+    const colors = mergeDefaultProps(defaultColors, props.colors);
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 1 * vw;
     const borderWidth = 0.13 * vw;
     const dirWidth = 0.24 * vw;
     const outlineWidth = 0.4 * vw;
     const dashLength = 0.3 * vw;
-    const strokeColorInner = trafficInnerColors[status];
-    const strokeColorOuter = trafficOuterColors[status];
-    const strokeColorBorder = trafficBorderColors[status];
+    const areaColor = colors[`TRAFFIC_${status}_BACKGROUND_COLOR`];
+    const borderColor = colors[`TRAFFIC_${status}_BORDER_COLOR`];
     return h("div", [h(AmapPolyline, {
       "attrs": {
         "path": props.path,
         "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorOuter,
+        "strokeColor": borderColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "zIndex": ZINDEX_LINE_LAYER
@@ -64,7 +51,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
         "path": props.path,
         "strokeWeight": strokeWidth + 2 * borderWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorBorder,
+        "strokeColor": areaColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "strokeStyle": "dashed",
@@ -76,7 +63,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
         "path": props.path,
         "strokeWeight": strokeWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorInner,
+        "strokeColor": areaColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "zIndex": ZINDEX_LINE_LAYER
@@ -101,21 +88,21 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
     const {
       status = "UNKNOWN"
     } = props;
+    const colors = mergeDefaultProps(defaultColors, props.colors);
     const vw = window.innerWidth * 0.01;
     const repeat = 10 * vw;
     const strokeWidth = 1.25 * vw * 0.65;
     const borderWidth = 0.175 * vw * 0.65;
     const dirStrokeWeight = 0.375 * vw * 0.65;
     const outlineWidth = 0.45 * vw * 0.65;
-    const strokeColorInner = trafficInnerColors[status];
-    const strokeColorOuter = trafficOuterColors[status];
-    const strokeColorBorder = trafficBorderColors[status];
+    const areaColor = colors[`TRAFFIC_${status}_BACKGROUND_COLOR`];
+    const borderColor = colors[`TRAFFIC_${status}_BORDER_COLOR`];
     return h("div", [h(GmapPolyline, {
       "attrs": {
         "path": pathRef.value,
         "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorOuter,
+        "strokeColor": borderColor,
         "zIndex": ZINDEX_LINE_LAYER
       }
     }), h(GmapPolyline, {
@@ -125,8 +112,8 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
           icon: {
             path: `M 0,-0.5 0,0.5`,
             strokeWeight: strokeWidth + 2 * borderWidth,
-            strokeColor: strokeColorBorder,
-            fillColor: strokeColorBorder,
+            strokeColor: areaColor,
+            fillColor: areaColor,
             scale: 1
           },
           repeat: `${strokeWidth}px`,
@@ -139,7 +126,7 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
         "path": pathRef.value,
         "strokeWeight": strokeWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorInner,
+        "strokeColor": areaColor,
         "icons": [{
           icon: {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
@@ -159,8 +146,15 @@ const DrivingLine = defineSetup("DrivingLine", function(props) {
   return () => {
     if (!props.path.length)
       return null;
+    const colors = {
+      ...payload.themeVariables,
+      ...props.colors
+    };
     return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
-      attrs: props
+      attrs: {
+        ...props,
+        colors
+      }
     });
   };
 });

package/dist/v2/business-components/GreenZone/GreenZone.d.ts

@@ -1,8 +1,10 @@
 import type { GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import type { Point } from "../../types/interface";
+import type { MapThemeVariables, Point } from "../../types/interface";
+type GreenZoneColors = Pick<MapThemeVariables, "ZONE_RESTRICTED_BACKGROUND_COLOR" | "ZONE_RESTRICTED_BORDER_COLOR" | "ZONE_FORBIDDEN_BACKGROUND_COLOR" | "ZONE_FORBIDDEN_BORDER_COLOR">;
 interface GreenZoneProps<T> extends MapRegisterOverlayProps<T> {
-    isRed?: boolean;
+    isForbidden?: boolean;
     path: Point[];
+    colors?: GreenZoneColors;
 }
 export declare const AGreenZone: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<GreenZoneProps<{
     _needUpdate: boolean;

package/dist/v2/business-components/GreenZone/GreenZone.js

@@ -7,13 +7,15 @@ import { GmapPolyline } from "../../components/GmapPolyline/GmapPolyline.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
-import { vec2lnglat } from "../../utils/transform.js";
-const GREEN_ZONE_FILL_COLOR = "#C7E5FB";
+import { mergeDefaultProps, vec2lnglat } from "../../utils/transform.js";
+const defaultColors = {
+  ZONE_RESTRICTED_BACKGROUND_COLOR: "#C7E5FB",
+  ZONE_RESTRICTED_BORDER_COLOR: "#4BA7FF",
+  ZONE_FORBIDDEN_BACKGROUND_COLOR: "#F27878",
+  ZONE_FORBIDDEN_BORDER_COLOR: "#F41717"
+};
 const GREEN_ZONE_FILL_OPACITY = 0.5;
-const GREEN_ZONE_STROKE_COLOR = "#4BA7FF";
 const GREEN_ZONE_STROKE_WEIGHT_VW = 1;
-const GREEN_ZONE_FILL_COLOR_RED = "#F27878";
-const GREEN_ZONE_STROKE_COLOR_RED = "#F41717";
 const toClosedPath = (path) => {
   const first = path[0];
   if (!first)
@@ -26,14 +28,15 @@ const toClosedPath = (path) => {
 const AGreenZone = defineSetup("AGreenZone", function(props) {
   const strokeWeight = GREEN_ZONE_STROKE_WEIGHT_VW * globalThis.innerWidth / 100;
   return () => {
+    const colors = mergeDefaultProps(defaultColors, props.colors);
     return h(AmapPolygon, {
       "attrs": {
         "registerOverlay": props.registerOverlay,
         "path": props.path,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": props.isForbidden ? colors.ZONE_FORBIDDEN_BORDER_COLOR : colors.ZONE_RESTRICTED_BORDER_COLOR,
         "strokeStyle": "dashed",
         "strokeWeight": strokeWeight,
-        "fillColor": props.isRed ? GREEN_ZONE_FILL_COLOR_RED : GREEN_ZONE_FILL_COLOR,
+        "fillColor": props.isForbidden ? colors.ZONE_FORBIDDEN_BACKGROUND_COLOR : colors.ZONE_RESTRICTED_BACKGROUND_COLOR,
         "fillOpacity": GREEN_ZONE_FILL_OPACITY,
         "zIndex": ZINDEX_GREEN_ZONE
       }
@@ -49,23 +52,24 @@ const GGreenZone = defineSetup("GGreenZone", function(props) {
     scale: 4
   };
   return () => {
+    const colors = mergeDefaultProps(defaultColors, props.colors);
     const path = pathRef.value;
     const closedPath = toClosedPath(path);
     return h("div", [h(GmapPolygon, {
       "attrs": {
         "registerOverlay": props.registerOverlay,
         "paths": path,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": props.isForbidden ? colors.ZONE_FORBIDDEN_BORDER_COLOR : colors.ZONE_RESTRICTED_BORDER_COLOR,
         "strokeOpacity": 0,
         "strokeWeight": strokeWeight,
-        "fillColor": props.isRed ? GREEN_ZONE_FILL_COLOR_RED : GREEN_ZONE_FILL_COLOR,
+        "fillColor": props.isForbidden ? colors.ZONE_FORBIDDEN_BACKGROUND_COLOR : colors.ZONE_RESTRICTED_BACKGROUND_COLOR,
         "fillOpacity": GREEN_ZONE_FILL_OPACITY,
         "zIndex": ZINDEX_GREEN_ZONE
       }
     }), h(GmapPolyline, {
       "attrs": {
         "path": closedPath,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": props.isForbidden ? colors.ZONE_FORBIDDEN_BORDER_COLOR : colors.ZONE_RESTRICTED_BORDER_COLOR,
         "strokeWeight": GREEN_ZONE_STROKE_WEIGHT_VW,
         "strokeOpacity": 0,
         "icons": [{
@@ -83,8 +87,15 @@ const GreenZone = defineSetup("GreenZone", function(props) {
   return () => {
     if (!props.path.length)
       return null;
+    const colors = {
+      ...payload.themeVariables,
+      ...props.colors
+    };
     return createElement(payload.supplier === "gmap" ? GGreenZone : AGreenZone, {
-      attrs: props
+      attrs: {
+        ...props,
+        colors
+      }
     });
   };
 });

package/dist/v2/business-components/PassengerCircle/PassengerCircle.js

@@ -4,6 +4,7 @@ import { computed } from "vue-demi";
 import { ZINDEX_PASSENGER_LAYER } from "../../api/contants.js";
 import { AmapMarker } from "../../components/AmapMarker/AmapMarker.js";
 import { GmapAdvancedMarkerElement } from "../../components/GmapAdvancedMarkerElement/GmapAdvancedMarkerElement.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
@@ -11,10 +12,10 @@ import { createDom } from "../../utils/dom.js";
 import { vec2lnglat } from "../../utils/transform.js";
 import { FitViewOnce } from "../FitView/FitView.js";
 import { c as createRuntimeFn } from "../../chunks/vanilla-extract-recipes-createRuntimeFn.esm.bd6fc290.js";
-const imgPassengerCircleArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjc3NDUzMDE2IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMzAiIGN5PSIzMCIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgc3Ryb2tlLW9wYWNpdHk9Ii4xIiBzdHJva2U9IiMwMDNERkYiIGZpbGwtb3BhY2l0eT0iLjE1IiBmaWxsPSIjNDg3M0ZFIiBjeD0iMzAiIGN5PSIzMCIgcj0iMjkuNSIvPjxwYXRoIGZpbGw9IiM0ODcxRjEiIGQ9Ik0zMCAxMC41NTdsNi4zNDIgMTIuNjg0SDIzLjY1OHoiLz48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5Ii8+PC9nPjwvc3ZnPg==";
-const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTcuMSUiIHk9Ii03LjElIiB3aWR0aD0iMTE0LjMlIiBoZWlnaHQ9IjExNC4zJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Ii41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNzc0NTMwMTYgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC40MDUgLjI2NCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0iIzAwM0RGRiIgZmlsbC1vcGFjaXR5PSIuMTUiIGZpbGw9IiM0ODczRkUiIGN4PSIzMCIgY3k9IjMwIiByPSIyOS41Ii8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5LjMiLz48L2c+PC9zdmc+";
-const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiM0NDcxRkYiIGQ9Ik0xNC40ODEgMGw2LjYwMyAxMy4xODFINy44Nzl6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjkuMyIvPjwvZz48L2c+PC9zdmc+";
-const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMTU3IiBjeT0iMzUyIiByPSIxMCIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzIC0zMzgpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTU3IiBjeT0iMzUyIiByPSI4LjgiLz48L2c+PC9zdmc+";
+const imgPassengerCircleArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMjguNiUiIHk9Ii0yOC42JSIgd2lkdGg9IjE1Ny4xJSIgaGVpZ2h0PSIxNTcuMSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InByZWZpeF9fYSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNzc0NTMwMTYgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX3Bhc3Nlbmdlci1jaXJjbGVfb3V0ZXJDaXJjbGVfc3Ryb2tlLCBoc2woMjI2LCAxMDAlLCA1MCUpKSIgZmlsbC1vcGFjaXR5PSIuMTUiIGZpbGw9InZhcigtLUhFWUNBUl9NQVBfU1ZHX1ZBUl9wYXNzZW5nZXItY2lyY2xlX291dGVyQ2lyY2xlX2ZpbGwsIGhzbCgyMjYsIDk5JSwgNjQlKSkiIGN4PSIzMCIgY3k9IjMwIiByPSIyOS41Ii8+PHBhdGggZmlsbD0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX3Bhc3Nlbmdlci1jaXJjbGVfY2lyY2xlX2ZpbGwsIGhzbCgyMjUsIDg2JSwgNjElKSkiIGQ9Ik0zMCAxMC41NTdsNi4zNDIgMTIuNjg0SDIzLjY1OHoiLz48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9InZhcigtLUhFWUNBUl9NQVBfU1ZHX1ZBUl9wYXNzZW5nZXItY2lyY2xlX2NpcmNsZV9maWxsLCBoc2woMjI1LCA4NiUsIDYxJSkpIiBjeD0iMzAiIGN5PSIzMCIgcj0iOSIvPjwvZz48L3N2Zz4=";
+const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCA2MSA2MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItNy4xJSIgeT0iLTcuMSUiIHdpZHRoPSIxMTQuMyUiIGhlaWdodD0iMTE0LjMlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwYXNzZW5nZXItY2lyY2xlX3ByZWZpeF9fYSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjc3NDUzMDE2IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icGFzc2VuZ2VyLWNpcmNsZV9wcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC40MDUgLjI2NCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX3Bhc3Nlbmdlci1jaXJjbGVfb3V0ZXJDaXJjbGVfc3Ryb2tlLCBoc2woMjI2LCAxMDAlLCA1MCUpKSIgZmlsbC1vcGFjaXR5PSIuMTUiIGZpbGw9InZhcigtLUhFWUNBUl9NQVBfU1ZHX1ZBUl9wYXNzZW5nZXItY2lyY2xlX291dGVyQ2lyY2xlX2ZpbGwsIGhzbCgyMjYsIDk5JSwgNjQlKSkiIGN4PSIzMCIgY3k9IjMwIiByPSIyOS41Ii8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcGFzc2VuZ2VyLWNpcmNsZV9wcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcGFzc2VuZ2VyLWNpcmNsZV9wcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSJ2YXIoLS1IRVlDQVJfTUFQX1NWR19WQVJfcGFzc2VuZ2VyLWNpcmNsZV9jaXJjbGVfZmlsbCwgaHNsKDIyNSwgODYlLCA2MSUpKSIgY3g9IjMwIiBjeT0iMzAiIHI9IjkuMyIvPjwvZz48L3N2Zz4=";
+const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyOSAzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMjguNiUiIHk9Ii0yOC42JSIgd2lkdGg9IjE1Ny4xJSIgaGVpZ2h0PSIxNTcuMSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InBhc3Nlbmdlci1zbWFsbC1hcnJvd19wcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwYXNzZW5nZXItc21hbGwtYXJyb3dfcHJlZml4X19iIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjEwLjUiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSJ2YXIoLS1IRVlDQVJfTUFQX1NWR19WQVJfcGFzc2VuZ2VyLWNpcmNsZV9jaXJjbGVfZmlsbCwgaHNsKDIyNSwgODYlLCA2MSUpKSIgZD0iTTE0LjQ4MSAwbDYuNjAzIDEzLjE4MUg3Ljg3OXoiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0KSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcGFzc2VuZ2VyLXNtYWxsLWFycm93X3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwYXNzZW5nZXItc21hbGwtYXJyb3dfcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMi40IiBzdHJva2UtbGluZWpvaW49InNxdWFyZSIgZmlsbD0idmFyKC0tSEVZQ0FSX01BUF9TVkdfVkFSX3Bhc3Nlbmdlci1jaXJjbGVfY2lyY2xlX2ZpbGwsIGhzbCgyMjUsIDg2JSwgNjElKSkiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iOS4zIi8+PC9nPjwvZz48L3N2Zz4=";
+const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwYXNzZW5nZXItc21hbGxfcHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icGFzc2VuZ2VyLXNtYWxsX3ByZWZpeF9fYiIgY3g9IjE1NyIgY3k9IjM1MiIgcj0iMTAiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0MyAtMzM4KSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwYXNzZW5nZXItc21hbGxfcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3Bhc3Nlbmdlci1zbWFsbF9wcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSJ2YXIoLS1IRVlDQVJfTUFQX1NWR19WQVJfcGFzc2VuZ2VyLWNpcmNsZV9jaXJjbGVfZmlsbCwgaHNsKDIyNSwgODYlLCA2MSUpKSIgY3g9IjE1NyIgY3k9IjM1MiIgcj0iOC44Ii8+PC9nPjwvc3ZnPg==";
 const PassengerCircle_css_ts_vanilla = "";
 var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { type: { small: "_1l6offo1", smallArrow: "_1l6offo2", large: "_1l6offo3", largeArrow: "_1l6offo4" } }, defaultVariants: {}, compoundVariants: [] });
 const APassengerCircle = defineSetup("APassengerCircle", function(props) {
@@ -27,7 +28,7 @@ const APassengerCircle = defineSetup("APassengerCircle", function(props) {
     const style = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
-        <img class="APassengerCircle ${passengerCircle({
+        <${SvgInlineWebComponentTag} class="APassengerCircle ${passengerCircle({
       type
     })}" style="${style}" src="${src}">
       `;
@@ -53,7 +54,7 @@ const GPassengerCircle = defineSetup("GPassengerCircle", function(props) {
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
     const style = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
-    return createDom("img", {
+    return createDom(SvgInlineWebComponentTag, {
       class: `GPassengerCircle ${passengerCircle({
         type
       })}`,

package/dist/v2/business-components/PlaceCircle/PlaceCircle.js

@@ -1,10 +1,10 @@
-import "../../css/PlaceCircle-3c051f4e.css";
+import "../../css/PlaceCircle-fb31fc69.css";
 import { h } from "vue";
 import { computed } from "vue-demi";
 import { ZINDEX_PLACE_LAYER } from "../../api/contants.js";
-import { i as imgPlaceCircle } from "../../chunks/place-circle.64383a4c.js";
 import { AmapMarker } from "../../components/AmapMarker/AmapMarker.js";
 import { GmapAdvancedMarkerElement } from "../../components/GmapAdvancedMarkerElement/GmapAdvancedMarkerElement.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { AnchorType } from "../../types/amap/marker.js";
@@ -12,6 +12,7 @@ import { defineSetup } from "../../types/helper.js";
 import { createDom } from "../../utils/dom.js";
 import { vec2lnglat } from "../../utils/transform.js";
 import { c as createRuntimeFn } from "../../chunks/vanilla-extract-recipes-createRuntimeFn.esm.bd6fc290.js";
+const imgPlaceCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAxNyAxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItNjEuMSUiIHk9Ii02MS4xJSIgd2lkdGg9IjIyMi4yJSIgaGVpZ2h0PSIyMjIuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InBsYWNlLWNpcmNsZV9wcmVmaXhfX2EiPjxmZU1vcnBob2xvZ3kgcmFkaXVzPSIxIiBvcGVyYXRvcj0iZGlsYXRlIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93U3ByZWFkT3V0ZXIxIi8+PGZlT2Zmc2V0IGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yMDQzNTQyNCAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIvPjwvZmlsdGVyPjxjaXJjbGUgaWQ9InBsYWNlLWNpcmNsZV9wcmVmaXhfX2IiIGN4PSI0LjUiIGN5PSI5LjUiIHI9IjQuNSIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IC0xKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwbGFjZS1jaXJjbGVfcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3BsYWNlLWNpcmNsZV9wcmVmaXhfX2IiLz48dXNlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJ2YXIoLS1IRVlDQVJfTUFQX1NWR19WQVJfcGxhY2UtY2lyY2xlX2NvbG9yLCBoc2woMjIzLCAxMDAlLCA2MCUpKSIgeGxpbms6aHJlZj0iI3BsYWNlLWNpcmNsZV9wcmVmaXhfX2IiLz48L2c+PC9zdmc+";
 const PlaceCircle_css_ts_vanilla = "";
 var amapPlaceIconLayout = createRuntimeFn({ defaultClassName: "", variantClassNames: { textAlign: { left: "fhyw83", right: "fhyw84" } }, defaultVariants: {}, compoundVariants: [] });
 var gmapPlaceIconLayout = createRuntimeFn({ defaultClassName: "fhyw85", variantClassNames: { textAlign: { left: "fhyw86", right: "fhyw87" } }, defaultVariants: {}, compoundVariants: [] });
@@ -36,7 +37,7 @@ const APlaceCircle = defineSetup("APlaceCircle", function(props, {
         <div class="APlaceCircle ${placeCircleLayout({
       textAlign
     })}">
-          <img class="${placeIcon({
+          <${SvgInlineWebComponentTag} class="${placeIcon({
       hideIcon
     })} ${amapPlaceIconLayout({
       textAlign
@@ -54,7 +55,7 @@ const APlaceCircle = defineSetup("APlaceCircle", function(props, {
       hideIcon = false,
       textAlign = DEFAULT_TEXT_ALIGN
     } = props;
-    return `<img class="APlaceCircle ${placeIcon({
+    return `<${SvgInlineWebComponentTag} class="APlaceCircle ${placeIcon({
       hideIcon
     })} ${amapPlaceIconLayout({
       textAlign
@@ -97,7 +98,7 @@ const GPlaceCircle = defineSetup("GPlaceCircle", function(props, {
         textAlign
       })}`
     }, `
-      <img class="${placeIcon({
+      <${SvgInlineWebComponentTag} class="${placeIcon({
       hideIcon
     })}" src="${imgPlaceCircle}">
       <div class="${labelLayout}">
@@ -112,7 +113,7 @@ const GPlaceCircle = defineSetup("GPlaceCircle", function(props, {
       hideIcon = false,
       textAlign = DEFAULT_TEXT_ALIGN
     } = props;
-    return createDom("img", {
+    return createDom(SvgInlineWebComponentTag, {
       class: `GPlaceCircle ${placeIcon({
         hideIcon
       })} ${gmapPlaceIconLayout({