@heycar/heycars-map 0.2.10 → 0.2.12

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

@@ -3,22 +3,24 @@ 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 { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
-import { createElement, defineLagecySetup, defineSetup } from "../../types/helper";
+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<T> extends MapRegisterOverlayProps<T> {
+export interface StartEndPointProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   type: "start" | "end";
   position: [number, number];
   title?: string;
   description?: string;
 }
-export const AStartEndPoint = defineLagecySetup(function AStartEndPoint(
+export const AStartEndPoint = defineSetup(function AStartEndPoint(
   props: StartEndPointProps<AmapOverlay>
 ) {
+  useMapLog(props, "AStartEndPoint");
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -57,11 +59,12 @@ export const AStartEndPoint = defineLagecySetup(function AStartEndPoint(
       anchor={"bottom-center"}
     />
   );
-}).props(["type", "title", "registerOverlay", "position", "description"]);
+});
 
-export const GStartEndPoint = defineLagecySetup(function GStartEndPoint(
+export const GStartEndPoint = defineSetup(function GStartEndPoint(
   props: StartEndPointProps<GmapOverlay>
 ) {
+  useMapLog(props, "GStartEndPoint");
   const contentRef = computed(() => {
     const icon = props.type === "start" ? imgStartPoint : imgEndPoint;
     const descriptionRow = !props.description
@@ -105,7 +108,7 @@ export const GStartEndPoint = defineLagecySetup(function GStartEndPoint(
       />
     );
   };
-}).props(["type", "title", "registerOverlay", "position", "description"]);
+});
 
 export const StartEndPoint = defineSetup(function StartEndPoint(
   props: StartEndPointProps<AmapOverlay> | StartEndPointProps<GmapOverlay>

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

@@ -2,6 +2,7 @@ import { computed } from "vue-demi";
 import imgTaxicar from "../../assets/icons/svg/taxi-car.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import type { AmapOverlay, GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import { createElement, defineSetup } from "../../types/helper";
@@ -9,12 +10,13 @@ import { createDom } from "../../utils/dom";
 import { decodeAsterisk, vec2lnglat } from "../../utils/transform";
 import * as css from "./TaxiCar.css";
 
-export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T> {
+export interface TaxiCarProps<T> extends MapRegisterOverlayProps<T>, MapLogProps {
   position: [number, number];
   angle?: number;
   title?: string;
 }
 export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOverlay>) {
+  useMapLog(props, "ATaxiCar");
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""
@@ -45,6 +47,7 @@ export const ATaxiCar = defineSetup(function ATaxiCar(props: TaxiCarProps<AmapOv
 });
 
 export const GTaxiCar = defineSetup(function GTaxiCar(props: TaxiCarProps<GmapOverlay>) {
+  useMapLog(props, "GTaxiCar");
   const contentRef = computed(() => {
     const titleRow = !props.title
       ? ""

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

@@ -1,14 +1,16 @@
 import { computed } from "vue-demi";
 import { AmapPolyline } from "../../components/AmapPolyline";
 import { GmapPolyline } from "../../components/GmapPolyline";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { vec2lnglat } from "../../utils/transform";
 
-export interface WalkingLineProps {
+export interface WalkingLineProps extends MapLogProps {
   path: [number, number][];
 }
 export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLineProps) {
+  useMapLog(props, "AWalkingLine");
   return () => {
     const { path } = props;
     if (path.length === 0) return null;
@@ -30,6 +32,7 @@ export const AWalkingLine = defineSetup(function AWalkingLine(props: WalkingLine
 });
 
 export const GWalkingLine = defineSetup(function GWalkingLine(props: WalkingLineProps) {
+  useMapLog(props, "GWalkingLine");
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
     const path = pathRef.value;

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

@@ -1,4 +1,5 @@
 import { reactive, VNodeData } from "vue-demi";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import {
   useAWalkingRoute,
@@ -11,13 +12,14 @@ import type { Point } from "../../types/interface";
 export type WalkingRouteRenderProps = {
   path: Point[];
 };
-export interface WalkingRouteProps extends UseWalkingRouteProps {
+export interface WalkingRouteProps extends UseWalkingRouteProps, MapLogProps {
   render?: (props: WalkingRouteRenderProps) => VNodeChild;
 }
 export const AWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "AWalkingRoute");
   const path = useAWalkingRoute(props);
   return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });
@@ -26,6 +28,7 @@ export const GWalkingRoute = defineSetup(function WalkingRoute(
   props: WalkingRouteProps,
   { slots }
 ) {
+  useMapLog(props, "GWalkingRoute");
   const path = useGWalkingRoute(props);
   return () => <div>{slots.render?.(reactive({ path }))}</div>;
 });

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

@@ -2,16 +2,18 @@ import { computed } from "vue-demi";
 import imgWaveCircle from "../../assets/icons/svg/wave-circle.svg";
 import { AmapMarker } from "../../components/AmapMarker";
 import { GmapAdvancedMarkerView } from "../../components/GmapAdvancedMarkerView";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { useMapSupplier } from "../../hooks/useMapSupplier";
 import { createElement, defineSetup } from "../../types/helper";
 import { createDom } from "../../utils/dom";
 import { vec2lnglat } from "../../utils/transform";
 import * as css from "./WaveCircle.css";
 
-export interface WaveCircleProps {
+export interface WaveCircleProps extends MapLogProps {
   position: [number, number];
 }
 export const AWaveCircle = defineSetup(function AWaveCircle(props: WaveCircleProps) {
+  useMapLog(props, "AWaveCircle");
   const contentRef = computed(() => `<img src="${imgWaveCircle}" class="${css.waveCircle}">`);
   const contentAnotherRef = computed(
     () => `<img src="${imgWaveCircle}" class="${css.waveCircle} ${css.secondCircle}">`
@@ -29,6 +31,7 @@ export const AWaveCircle = defineSetup(function AWaveCircle(props: WaveCirclePro
 });
 
 export const GWaveCircle = defineSetup(function AWaveCircle(props: WaveCircleProps) {
+  useMapLog(props, "GWaveCircle");
   const contentRef = computed(() =>
     createDom("img", { class: css.waveCircle, src: imgWaveCircle })
   );

package/src/hooks-business/useBusinessRecomendPlaceMap.ts

@@ -3,7 +3,7 @@ import { useMapGeometry } from "../hooks/useMapGeometry";
 import type { Place, Point } from "../types/interface";
 
 export interface BusinessRecomendPlaceContext {
-  panTo: (value: Point) => void;
+  panToGeoPositionByRecomend: (value: Point) => void;
   setCenterPlaceByRecomand: (value: Point) => void;
   onChangeCenterPlace: (value: Place) => void;
   onChangeRecomendPlaces: (value: Place[]) => void;
@@ -18,11 +18,11 @@ export const useBusinessRecomendPlaceMap = () => {
   });
   const placeCandidates = ref<Place[]>([]);
   const { apiMapDistance } = useMapGeometry();
-  const panTo = (value: Point) => mapContext.panTo(value);
+  const panToGeoPositionByRecomend = (value: Point) => mapContext.panToGeoPositionByRecomend(value);
   const setCenterPlaceByRecomand = (value: Point) => mapContext.setCenterPlaceByRecomand(value);
   const mapContext: BusinessRecomendPlaceContext = {
-    panTo: () => {
-      throw new Error("MyError: panTo used before assigned");
+    panToGeoPositionByRecomend: () => {
+      throw new Error("MyError: panToGeoPositionByRecomend used before assigned");
     },
     setCenterPlaceByRecomand: () => {
       throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
@@ -38,7 +38,7 @@ export const useBusinessRecomendPlaceMap = () => {
     mapContext,
     centerPlace,
     placeCandidates,
-    panTo,
+    panToGeoPositionByRecomend,
     setCenterPlaceByRecomand,
     apiMapDistance,
   };

package/todo.md

@@ -26,6 +26,4 @@ https://dawchihliou.github.io/articles/building-custom-google-maps-marker-react-
 
 ---
 
-1. apiDistance 在 created 生命周期里调用的时候，即便设置了 5 秒延迟，运行到 api 内部的时候 status === 'loading'
-2. getRecomend 接口需要增加一个返回参数，表示当前地区是否可以提供服务
-3. 孙明 刚才传入 complted 状态，地图未显示
+1. 定位失败的视觉稿文字提示