@heycar/heycars-map 0.1.0

package/src/assets/icons/svg/taxi-car.svg

@@ -0,0 +1 @@
+<svg width="24" height="44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M34.087 10.96c0 2.369-.054 2.98-.782 3.704-.793.79-5.236.833-5.236.833l-4.116.192-9.896-.144s-7.79-.026-9.131-.026c-1.342 0-2.406-.847-2.406-.847C.14 12.932 0 11.09 0 11.09V5.86s.14-1.842 2.52-3.583c0 0 1.064-.846 2.406-.846 1.341 0 9.13-.026 9.13-.026l9.897-.144 4.116.192s4.484 0 5.236.833c.778.86.782 1.37.782 3.74v4.934z" id="prefix__b"/><path d="M0 1.493S5.7.18 8.719.05c3.02-.131 3.47.017 5.282.21.507.051 3.26.91 3.26.91l-7.303.3L0 1.494z" id="prefix__c"/><path d="M10.08 2.815C9.295 4.483 8.85 6.423 8.85 8.494c0 2.062.442 3.994 1.22 5.657l5.698-1.157a15.601 15.601 0 01-.667-4.552c0-1.659.204-3.065.659-4.505L10.08 2.815z" id="prefix__e"/><path d="M25.753 8.455c0 1.92-.22 3.364-.601 4.891l2.626.35c1.178-.005 2.132-2.335 2.132-5.215s-.954-5.21-2.132-5.21l-2.614.35c.372 1.513.589 2.94.589 4.834z" id="prefix__g"/><path d="M.064.015L.158.002C.188-.016.371.106.4.124c.188.126.321.244.43.76.054.252.207 1.465.198 1.496l-.633.833.119 3.17-.094.076L0 .137c0-.052.025-.1.064-.122z" id="prefix__i"/><path d="M.064 6.515l.094.013c.03.018.213-.104.242-.122.188-.126.321-.244.43-.76.054-.252.207-1.465.198-1.496l-.633-.833L.42 0v.07L0 6.394c0 .052.025.1.064.122z" id="prefix__k"/><linearGradient x1="125.264%" y1="49.626%" x2="0%" y2="50%" id="prefix__d"><stop stop-color="#FFF" stop-opacity=".5" offset="0%"/><stop stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="22.712%" y1="73.133%" x2="68.62%" y2="66.194%" id="prefix__f"><stop stop-color="#FFF" stop-opacity=".5" offset="0%"/><stop stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="128.768%" y1="50%" x2="0%" y2="50%" id="prefix__h"><stop stop-color="#FFF" stop-opacity=".5" offset="0%"/><stop stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="100%" y1="100%" x2="28.4%" y2="100%" id="prefix__j"><stop stop-color="#FFBEBE" stop-opacity=".5" offset="0%"/><stop stop-color="#352222" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="100%" y1="100%" x2="28.4%" y2="100%" id="prefix__l"><stop stop-color="#FFBEBE" stop-opacity=".5" offset="0%"/><stop stop-color="#352222" stop-opacity=".5" offset="100%"/></linearGradient><filter x="-17.6%" y="-41.6%" width="135.2%" height="183.2%" filterUnits="objectBoundingBox" id="prefix__a"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0862745098 0 0 0 0 0.0862745098 0 0 0 0 0.0862745098 0 0 0 0.5 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 0h24v44H0z"/><g fill-rule="nonzero"><g transform="matrix(0 1 1 0 3.498 4.642)"><use fill="#000" filter="url(#prefix__a)" xlink:href="#prefix__b"/><use fill="#DFECF2" xlink:href="#prefix__b"/></g><path d="M14.458 38.728c2.369 0 2.98-.053 3.704-.781.79-.794.834-5.237.834-5.237l.191-4.115-.144-9.896s-.026-7.79-.026-9.132c0-1.342-.846-2.405-.846-2.405-1.741-2.381-3.582-2.52-3.582-2.52H9.357s-1.841.139-3.582 2.52c0 0-.847 1.063-.847 2.405 0 1.342-.026 9.132-.026 9.132l-.144 9.896.192 4.115s0 4.484.833 5.237c.86.777 1.37.781 3.74.781h4.935z" fill="#EFF5F8"/><g transform="matrix(0 1 1 0 17.093 15.062)" opacity=".9"><use fill="#161616" xlink:href="#prefix__c"/><use fill="url(#prefix__d)" xlink:href="#prefix__c"/></g><path d="M5.826 14.53c1.806-.937 3.915-1.465 6.17-1.465 2.243 0 4.339.528 6.141 1.452l-1.278 6.489a15.375 15.375 0 00-4.915-.794c-1.793 0-3.324.254-4.873.794L5.826 14.53z" fill="#161616"/><g transform="matrix(0 1 1 0 3.498 4.642)"><use fill="#3C4242" xlink:href="#prefix__e"/><use fill="url(#prefix__f)" xlink:href="#prefix__e"/></g><g opacity=".9" transform="matrix(0 1 1 0 3.498 4.642)"><use fill="#161616" xlink:href="#prefix__g"/><use fill="url(#prefix__h)" xlink:href="#prefix__g"/></g><path d="M3.87 17.651l.876-.462a.313.313 0 00.17-.274v-.188l-1.317.695v.082c.004.127.152.209.27.147z" fill="#303435"/><path d="M3.564 17.45l1.082-.568c.1-.053.21-.09.327-.106a.108.108 0 00.096-.107v-.552c0-.09-.078-.164-.174-.164H4.85c-.11 0-.502.062-1 .528-.222.209-.353.638-.353.933 0 .033.035.053.066.037z" fill="#DFECF2"/><path d="M5.434 15.062s1.095 4.467 1.226 7.486c.131 3.02-.017 3.47-.21 5.282-.051.507-.937 3.813-.937 3.813L5.36 25.17l.074-10.11z" fill="#161616" opacity=".9"/><path d="M20.13 17.651l-.876-.462a.313.313 0 01-.17-.274v-.188l1.317.695v.082c-.004.127-.152.209-.27.147z" fill="#303435"/><path d="M20.436 17.45l-1.082-.568a.984.984 0 00-.327-.106.108.108 0 01-.096-.107v-.552c0-.09.078-.164.174-.164h.044c.11 0 .502.062 1 .528.222.209.353.638.353.933 0 .033-.035.053-.066.037z" fill="#DFECF2"/><path d="M9.296 38.524h5.375c2.252 0 2.806-.458 3.434-1.15-.104.287-.218.52-.344.659-.712.781-1.026 1.325-3.356 1.325H9.558c-2.33 0-2.544-.486-3.39-1.325-.149-.147-.276-.405-.389-.732.755.777 1.165 1.223 3.517 1.223z" fill="#95A4AD"/><path d="M8.881 37.922h6.052c1.911 0 2.736-.298 3.33-.781a3.075 3.075 0 01-.297.72c-.585.618-1.23 1.019-3.334 1.019H9.178c-1.48 0-2.2-.176-2.718-.504-.118-.11-.24-.237-.384-.384-.14-.147-.266-.405-.376-.74.59.433 1.38.67 3.181.67z" fill="#CBD8DE"/><path d="M11.818 38.037c1.65 0 3.115-.066 4.04-.164-.07.193-.152.344-.24.426-.035.037-.113.07-.148.098-.925.082-2.195.13-3.652.13a46.22 46.22 0 01-3.539-.118c-.04-.033-.126-.07-.17-.11-.096-.082-.179-.23-.253-.418.934.099 2.36.156 3.962.156z" fill="#F2FAFF"/><path d="M11.988 12.194c-2.203 0-4.285.446-6.109 1.227.787-6.961 3.5-7.18 3.5-7.18h5.192s3.125.319 3.5 7.172a15.493 15.493 0 00-6.083-1.22z" fill="#F9FDFF"/><g transform="matrix(0 1 1 0 5.834 37.517)"><use fill="#B92E4D" xlink:href="#prefix__i"/><use fill-opacity=".7" fill="url(#prefix__j)" xlink:href="#prefix__i"/></g><g transform="matrix(0 1 1 0 11.438 37.517)"><use fill="#B92E4D" xlink:href="#prefix__k"/><use fill-opacity=".7" fill="url(#prefix__l)" xlink:href="#prefix__k"/></g><path d="M18.41 36.274c-.038.25-.082.454-.13.642-.092.372-.419.655-.82.712-1.475.208-3.434.421-5.581.421-2.086 0-3.988-.204-5.446-.405a.975.975 0 01-.824-.708 8.903 8.903 0 01-.135-.642c1.522.25 3.826.41 6.405.41 2.648 0 5.009-.168 6.532-.43z" fill="#DFECF2"/><path d="M16.216 36.711c-.947.487-2.487.7-4.232.7-1.698 0-3.207-.196-4.159-.663-.44-.83-.663-2.643-.663-2.643l-.009-.184c.773.708 2.645 1.203 4.83 1.203 2.243 0 4.159-.524 4.892-1.26l-.013.241c0-.004-.218 1.764-.646 2.606zM7.447 23.93a20.12 20.12 0 00-.294-2.442v-.065c1.538-.32 3.167-.649 4.862-.649 1.675 0 3.294.326 4.816.637a22.673 22.673 0 00-.303 2.52c-.147 2.884.02 3.314.232 5.048.006.057.026.152.056.274-1.513.278-3 .54-4.912.54-1.847 0-3.289-.25-4.75-.511v-.008c.03-.131.055-.233.06-.29.218-1.744.38-2.173.233-5.053z" fill="#F2FAFF"/><path d="M12.067 19.716l-4.645.692c-.431-2.92-.832-4.36-1.202-4.324l-.21-1.297a11.732 11.732 0 016.026-1.673c.386 0-.137.05-1.569.147l1.6 6.455z" fill="#161616"/></g></g></svg>

package/src/assets/icons/svg/wave-circle.svg

@@ -0,0 +1 @@
+<svg width="119" height="118" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="prefix__a"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#4471FF" offset="100%"/></radialGradient></defs><circle cx="191.394" cy="238" r="59" transform="translate(-132 -179)" fill="url(#prefix__a)" fill-rule="evenodd" opacity=".2"/></svg>

package/src/business-components/AddressBox/AddressBox.css.ts

@@ -0,0 +1,55 @@
+import { style } from "@vanilla-extract/css";
+
+export const addressBoxLayout = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  marginBottom: "-1.6vw",
+});
+
+export const addressBox = style({
+  padding: "2.13vw 4.5vw 2.67vw 4.27vw",
+  display: "flex",
+  alignItems: "center",
+  background: "linear-gradient(90deg, #79AFFF 0%, #5C8DFF 32%, #507FFF 75%, #4471FF 100%)",
+  borderRadius: "3.2vw",
+});
+
+export const addressTitle = style({
+  fontSize: "3.47vw",
+  fontFamily: "PingFangSC-Semibold, PingFang SC",
+  fontWeight: 600,
+  color: "#FFFFFF",
+  lineHeight: "4.8vw",
+  whiteSpace: "nowrap",
+});
+
+export const addressDescription = style({
+  fontSize: "2.93vw",
+  fontFamily: "PingFangSC-Regular, PingFang SC",
+  fontWeight: 400,
+  color: "#EAFAF8",
+  lineHeight: "4.27vw",
+  whiteSpace: "nowrap",
+  opacity: 0.8,
+});
+
+export const arrowIcon = style({
+  marginLeft: "3.2vw",
+  width: "1.44vw",
+  height: "2.4vw",
+});
+
+export const verticalLine = style({
+  width: "0.8vw",
+  height: "4vw",
+  background: "#4C80FF",
+  borderRadius: "0vw 0vw 26.67vw 26.67vw",
+  zIndex: 1,
+});
+
+export const circleIcon = style({
+  marginTop: "-1.5vw",
+  width: "3.2vw",
+  height: "3.2vw",
+});

package/src/business-components/AddressBox/AddressBox.tsx

@@ -0,0 +1,69 @@
+import { computed } from "vue-demi";
+import imgArrowRight from "../../assets/icons/svg/arrow-right.svg";
+import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
+import { AmapMarker } from "../../components/AmapMarker";
+import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { createElement, defineSetup } from "../../types/helper";
+import type { Point } from "../../types/interface";
+import { createDom } from "../../utils/dom";
+import { vec2lnglat } from "../../utils/transform";
+import * as css from "./AddressBox.css";
+
+interface AddressBoxProps {
+  position: Point;
+  title: string;
+  description?: string;
+}
+export const AAddressBox = defineSetup(function AAddressBox(props: AddressBoxProps) {
+  const contentRef = computed(
+    () => `
+      <div class="${css.addressBoxLayout}">
+        <div class="${css.addressBox}">
+          <div>
+            <div class="${css.addressTitle}">${props.title}</div>
+            <div class="${css.addressDescription}">${props.description ?? ""}</div>
+          </div>
+          <img class="${css.arrowIcon}" src="${imgArrowRight}" >
+        </div>
+        <div class="${css.verticalLine}"></div>
+        <img src="${imgPlaceCircle}" class="${css.circleIcon}">
+      </div>
+    `
+  );
+  return () => (
+    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+  );
+});
+
+export const GAddressBox = defineSetup(function GAddressBox(props: AddressBoxProps) {
+  const contentRef = computed(() =>
+    createDom(
+      "div",
+      { class: css.addressBoxLayout },
+      `
+        <div class="${css.addressBox}">
+          <div>
+            <div class="${css.addressTitle}">${props.title}</div>
+            <div class="${css.addressDescription}">${props.description ?? ""}</div>
+          </div>
+          <img class="${css.arrowIcon}" src="${imgArrowRight}" >
+        </div>
+        <div class="${css.verticalLine}"></div>
+        <img src="${imgPlaceCircle}" class="${css.circleIcon}">
+      `
+    )
+  );
+  return () => {
+    return (
+      <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+    );
+  };
+});
+
+export const AddressBox = defineSetup(function AddressBox(props: AddressBoxProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GAddressBox : AAddressBox, { attrs: props });
+  };
+});

package/src/business-components/AddressBox/index.ts

@@ -0,0 +1 @@
+export * from "./AddressBox";

package/src/business-components/AddressLocator/AddressLocator.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+export const addressLocator = style({
+  width: "7.1045vw",
+  height: "10.93vw",
+  display: "flex",
+});

package/src/business-components/AddressLocator/AddressLocator.tsx

@@ -0,0 +1,40 @@
+import { computed } from "vue-demi";
+import imgAddressLocator from "../../assets/icons/svg/address-locator.svg";
+import { AmapMarker } from "../../components/AmapMarker";
+import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { createElement, defineSetup } from "../../types/helper";
+import { createDom } from "../../utils/dom";
+import { vec2lnglat } from "../../utils/transform";
+import * as css from "./AddressLocator.css";
+interface AddressLocatorProps {
+  position: [number, number];
+}
+export const AAddressLocator = defineSetup(function AAddressLocator(props: AddressLocatorProps) {
+  const contentRef = computed(
+    () => `
+      <img src="${imgAddressLocator}" class="${css.addressLocator}">
+    `
+  );
+  return () => (
+    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+  );
+});
+
+export const GAddressLocator = defineSetup(function GAddressLocator(props: AddressLocatorProps) {
+  const contentRef = computed(() =>
+    createDom("img", { class: css.addressLocator, src: imgAddressLocator })
+  );
+  return () => (
+    <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+  );
+});
+
+export const AddressLocator = defineSetup(function AddressLocator(props: AddressLocatorProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GAddressLocator : AAddressLocator, {
+      attrs: props,
+    });
+  };
+});

package/src/business-components/AddressLocator/index.ts

@@ -0,0 +1 @@
+export * from "./AddressLocator";

package/src/business-components/DrivingLine/DrivingLine.css.ts

@@ -0,0 +1,10 @@
+import { style } from "@vanilla-extract/css";
+
+export const drivingPath = style({
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  outlineWidth: "10px",
+  outlineStyle: "dashed",
+  outlineColor: "red",
+  outlineOffset: [2, 2],
+});

package/src/business-components/DrivingLine/DrivingLine.tsx

@@ -0,0 +1,124 @@
+import { computed } from "vue-demi";
+import { AmapPolyline } from "../../components/AmapPolyline";
+import { GmapPolyline } from "../../components/GmapPolyline";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { createElement, defineSetup } from "../../types/helper";
+import { vec2lnglat } from "../../utils/transform";
+
+export interface DrivingLineProps {
+  path: [number, number][];
+}
+export const ADrivingLine = defineSetup(function ADrivingLine(props: DrivingLineProps) {
+  return () => {
+    const vw = window.innerWidth * 0.01;
+    const strokeWidth = 2.5 * vw;
+    const borderWidth = 0.35 * vw;
+    const dirWidth = 0.6 * vw;
+    const outlineWidth = 1 * vw;
+    const dashLength = 0.75 * vw;
+    return (
+      <div>
+        <AmapPolyline
+          path={props.path}
+          strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
+          strokeOpacity={1}
+          strokeColor={"#4175F1"}
+          lineJoin={"round"}
+          lineCap={"round"}
+        />
+        <AmapPolyline
+          path={props.path}
+          strokeWeight={strokeWidth + 2 * borderWidth}
+          strokeOpacity={1}
+          strokeColor={"#6C95F5"}
+          lineJoin={"round"}
+          lineCap={"round"}
+          strokeStyle={"dashed"}
+          strokeDasharray={[dashLength, dashLength * 0.5]}
+        />
+        <AmapPolyline
+          path={props.path}
+          strokeWeight={strokeWidth}
+          strokeOpacity={1}
+          strokeColor={"#487BF4"}
+          lineJoin={"round"}
+          lineCap={"round"}
+        />
+        <AmapPolyline
+          showDir
+          path={props.path}
+          strokeWeight={strokeWidth + 2 * dirWidth}
+          strokeOpacity={1}
+          strokeColor={"transparent"}
+          lineJoin={"round"}
+          lineCap={"round"}
+        />
+      </div>
+    );
+  };
+});
+
+export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLineProps) {
+  const pathRef = computed(() => props.path.map(vec2lnglat));
+  return () => {
+    const vw = window.innerWidth * 0.01;
+    const repeat = 10 * vw;
+    const strokeWidth = 2.5 * vw;
+    const borderWidth = 0.35 * vw;
+    const dirStrokeWeight = 0.75 * vw;
+    const outlineWidth = 1 * vw;
+    return (
+      <div>
+        <GmapPolyline
+          path={pathRef.value}
+          strokeWeight={strokeWidth + 2 * borderWidth + 2 * outlineWidth}
+          strokeOpacity={1}
+          strokeColor={"#4175F1"}
+        />
+        <GmapPolyline
+          path={pathRef.value}
+          icons={[
+            {
+              icon: {
+                path: `M 0,-0.5 0,0.5`,
+                strokeWeight: strokeWidth + 2 * borderWidth,
+                strokeColor: "#6C95F5",
+                fillColor: "#6C95F5",
+                scale: 1,
+              },
+              repeat: `${strokeWidth}px`,
+              offset: `${strokeWidth / 2}px`,
+            },
+          ]}
+        />
+        <GmapPolyline
+          path={pathRef.value}
+          strokeWeight={strokeWidth}
+          strokeOpacity={1}
+          strokeColor={"#487BF4"}
+          icons={[
+            {
+              icon: {
+                path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
+                strokeColor: "white",
+                strokeWeight: dirStrokeWeight,
+                // todo: 3 maybe not responsive
+                scale: 3,
+              },
+              repeat: `${repeat}px`,
+            },
+          ]}
+        />
+      </div>
+    );
+  };
+});
+
+export const DrivingLine = defineSetup(function DrivingLine(props: DrivingLineProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
+      attrs: props,
+    });
+  };
+});

package/src/business-components/DrivingLine/index.ts

@@ -0,0 +1 @@
+export * from "./DrivingLine";

package/src/business-components/PassengerCircle/PassengerCircle.css.ts

@@ -0,0 +1,8 @@
+import { style } from "@vanilla-extract/css";
+
+export const passengerCircle = style({
+  display: "flex",
+  marginBottom: "-8.135vw",
+  width: "16.27vw",
+  height: "16.27vw",
+});

package/src/business-components/PassengerCircle/PassengerCircle.tsx

@@ -0,0 +1,42 @@
+import { computed } from "vue";
+import imgPassengerCircle from "../../assets/icons/svg/passenger-circle.svg";
+import { AmapMarker } from "../../components/AmapMarker";
+import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { createElement, defineSetup } from "../../types/helper";
+import { createDom } from "../../utils/dom";
+import { vec2lnglat } from "../../utils/transform";
+
+import * as css from "./PassengerCircle.css";
+
+interface PassengerCircleProps {
+  position: [number, number];
+}
+export const APassengerCircle = defineSetup(function APassengerCircle(props: PassengerCircleProps) {
+  const contentRef = computed(
+    () => `
+      <img src="${imgPassengerCircle}" class="${css.passengerCircle}">
+    `
+  );
+  return () => (
+    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+  );
+});
+
+export const GPassengerCircle = defineSetup(function GPassengerCircle(props: PassengerCircleProps) {
+  const contentRef = computed(() =>
+    createDom("img", { class: css.passengerCircle, src: imgPassengerCircle })
+  );
+  return () => (
+    <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+  );
+});
+
+export const PassengerCircle = defineSetup(function PassengerCircle(props: PassengerCircleProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GPassengerCircle : APassengerCircle, {
+      attrs: props,
+    });
+  };
+});

package/src/business-components/PassengerCircle/index.ts

@@ -0,0 +1 @@
+export * from "./PassengerCircle";

package/src/business-components/PlaceCircle/PlaceCircle.css.ts

@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+
+export const placeCircleLayout = style({
+  display: "flex",
+  alignItems: "center",
+});
+
+export const amapPlaceIconLayout = style({
+  marginLeft: "-2.265vw",
+});
+
+export const gmapPlaceIconLayout = style({
+  marginBottom: "-2.265vw",
+  marginLeft: "calc(50% - 2.265vw)",
+});
+
+export const placeIcon = style({
+  display: "flex",
+  width: "4.53vw",
+  height: "4.53vw",
+});
+
+export const label = style({
+  fontSize: "3.47vw",
+  fontFamily: "PingFangSC-Semibold, PingFang SC",
+  fontWeight: 600,
+  color: "#243E66",
+  lineHeight: "4.53vw",
+  whiteSpace: "nowrap",
+});

package/src/business-components/PlaceCircle/PlaceCircle.tsx

@@ -0,0 +1,66 @@
+import { computed } from "vue-demi";
+import imgPlaceCircle from "../../assets/icons/svg/place-circle.svg";
+import { AmapMarker } from "../../components/AmapMarker";
+import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { AnchorType } from "../../types/amap/marker";
+import { createElement, defineSetup } from "../../types/helper";
+import { createDom } from "../../utils/dom";
+import { vec2lnglat } from "../../utils/transform";
+import * as css from "./PlaceCircle.css";
+
+interface PlaceCircleProps {
+  position: [number, number];
+  label?: string;
+}
+export const APlaceCircle = defineSetup(function APlaceCircle(props: PlaceCircleProps) {
+  const contentRef = computed(
+    () => `
+    <div class="${css.placeCircleLayout}" >
+      <img class="${css.placeIcon} ${css.amapPlaceIconLayout}" src="${imgPlaceCircle}">
+      <div class="${css.label}">${props.label}</div>
+    </div>
+  `
+  );
+  const contentWithoutLabelRef = computed(
+    () => `<img class="${css.placeIcon} ${css.amapPlaceIconLayout}" src="${imgPlaceCircle}">`
+  );
+  return () => (
+    <AmapMarker
+      position={props.position}
+      content={props.label ? contentRef.value : contentWithoutLabelRef.value}
+      anchor={AnchorType.middleLeft}
+    />
+  );
+});
+
+export const GPlaceCircle = defineSetup(function GPlaceCircle(props: PlaceCircleProps) {
+  const contentRef = computed(() =>
+    createDom(
+      "div",
+      { class: `${css.placeCircleLayout} ${css.gmapPlaceIconLayout}` },
+      `
+      <img class="${css.placeIcon}" src="${imgPlaceCircle}">
+      <div class="${css.label}">${props.label}</div>
+  `
+    )
+  );
+  const contentWithoutLabelRef = computed(() =>
+    createDom("img", { class: `${css.placeIcon} ${css.gmapPlaceIconLayout}`, src: imgPlaceCircle })
+  );
+  return () => (
+    <GmapAdvancedMarkerView
+      position={vec2lnglat(props.position)}
+      content={props.label ? contentRef.value : contentWithoutLabelRef.value}
+    />
+  );
+});
+
+export const PlaceCircle = defineSetup(function PlaceCircle(props: PlaceCircleProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GPlaceCircle : APlaceCircle, {
+      attrs: props,
+    });
+  };
+});

package/src/business-components/PlaceCircle/index.ts

@@ -0,0 +1 @@
+export * from "./PlaceCircle";

package/src/business-components/StartEndPoint/StartEndPoint.css.ts

@@ -0,0 +1,70 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const pointLayout = style({
+  marginBottom: "-0.4vw",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+export const pointInfoBox = style({
+  padding: "1.07vw 2.4vw 1.6vw 2.67vw",
+  background: "#FFFFFF",
+  boxShadow: "0vw 0.53vw 2.4vw 0vw rgba(63,63,63,0.2)",
+  borderRadius: "2.13vw",
+});
+
+export const pointSingleInfoBox = style({
+  padding: "2.67vw 2.67vw 2.4vw 3.2vw",
+  background: "#FFFFFF",
+  boxShadow: "0vw 0vw 2.67vw 0vw rgba(78,85,108,0.15)",
+  borderRadius: "4.8vw",
+  fontSize: "3.2vw",
+  fontFamily: "PingFangSC-Medium, PingFang SC",
+  fontWeight: 500,
+  color: "#1E1E1E",
+  lineHeight: "4.53vw",
+  whiteSpace: "nowrap",
+});
+
+export const pointInfoBoxTitle = style({
+  fontSize: "3.2vw",
+  fontFamily: "PingFangSC-Medium, PingFang SC",
+  fontWeight: 500,
+  color: "#1E1E1E",
+  lineHeight: "4.53vw",
+  whiteSpace: "nowrap",
+});
+
+export const pointInfoBoxDescription = style({
+  fontSize: "2.4vw",
+  fontFamily: "PingFangSC-Regular, PingFang SC",
+  fontWeight: 400,
+  color: "#7E7E7E",
+  lineHeight: "3.47vw",
+  whiteSpace: "nowrap",
+});
+
+export const pointInfoBoxEmphasize = style({
+  color: "#4471FF",
+  fontFamily: "PingFangSC-Medium, PingFang SC",
+  fontWeight: 500,
+});
+
+export const pointIcon = recipe({
+  variants: {
+    type: {
+      start: {
+        marginTop: "1.33vw",
+        width: "6.192vw",
+        height: "7.998vw",
+      },
+      end: {
+        marginTop: "2.4vw",
+        width: "6.192vw",
+        height: "7.998vw",
+      },
+    },
+  },
+});

package/src/business-components/StartEndPoint/StartEndPoint.tsx

@@ -0,0 +1,103 @@
+import { computed } from "vue-demi";
+import imgEndPoint from "../../assets/icons/svg/end-point.svg";
+import imgStartPoint from "../../assets/icons/svg/start-point.svg";
+import { AmapMarker } from "../../components/AmapMarker";
+import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
+import { createElement, defineSetup } from "../../types/helper";
+import { createDom } from "../../utils/dom";
+import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
+import * as css from "./StartEndPoint.css";
+
+export interface StartEndPointProps {
+  type: "start" | "end";
+  position: [number, number];
+  title?: string;
+  description?: string;
+}
+export const AStartEndPoint = defineSetup(function AStartEndPoint(props: StartEndPointProps) {
+  const contentRef = computed(() => {
+    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !props.description
+      ? ""
+      : decodeAsterisk(props.description)
+          .map((item) =>
+            item.type === "normal"
+              ? item.value
+              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
+          )
+          .join("");
+    if (!props.description && !props.title)
+      return `<img src="${icon}" class="${css.pointIcon({ type: props.type })}">`;
+    if (!props.description)
+      return `
+        <div class="${css.pointLayout}">
+          <div class="${css.pointSingleInfoBox}">${props.title}</div>
+          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
+        </div>
+      `;
+    return `
+        <div class="${css.pointLayout}">
+          <div class="${css.pointInfoBox}">
+            <div class="${css.pointInfoBoxTitle}">${props.title ?? ""}</div>
+            <div class="${css.pointInfoBoxDescription}">${descriptionRow}</div>
+          </div>
+          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
+        </div>
+      `;
+  });
+  return () => (
+    <AmapMarker position={props.position} content={contentRef.value} anchor={"bottom-center"} />
+  );
+});
+
+export const GStartEndPoint = defineSetup(function GStartEndPoint(props: StartEndPointProps) {
+  const contentRef = computed(() => {
+    const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
+    const descriptionRow = !props.description
+      ? ""
+      : decodeAsterisk(props.description)
+          .map((item) =>
+            item.type === "normal"
+              ? item.value
+              : `<span class="${css.pointInfoBoxEmphasize}">${item.value}</span>`
+          )
+          .join("");
+    if (!props.description && !props.title)
+      return createDom("img", { class: css.pointIcon({ type: props.type }), src: icon });
+    if (!props.description)
+      return createDom(
+        "div",
+        { class: css.pointLayout },
+        `
+          <div class="${css.pointSingleInfoBox}">${props.title}</div>
+          <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
+        `
+      );
+    return createDom(
+      "div",
+      { class: css.pointLayout },
+      `
+        <div class="${css.pointInfoBox}">
+          <div class="${css.pointInfoBoxTitle}">${props.title ?? ""}</div>
+          <div class="${css.pointInfoBoxDescription}">${descriptionRow}</div>
+        </div>
+        <img src="${icon}" class="${css.pointIcon({ type: props.type })}">
+      `
+    );
+  });
+  return () => {
+    return (
+      <GmapAdvancedMarkerView position={vec2lnglat(props.position)} content={contentRef.value} />
+    );
+  };
+});
+
+export const StartEndPoint = defineSetup(function StartEndPoint(props: StartEndPointProps) {
+  const payload = useMapSupplier();
+  return () => {
+    return createElement(payload.supplier === "gmap" ? GStartEndPoint : AStartEndPoint, {
+      attrs: props,
+    });
+  };
+});