@heycar/heycars-map 0.2.9 → 0.2.11

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/components/MapProvider/MapProvider.tsx

@@ -1,5 +1,6 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { GmapLoaderProps, Status, useMapLoader, UseMapLoaderProps } from "../../hooks/useMapLoader";
+import { MapLogProps, useMapLog } from "../../hooks/useMapLog";
 import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "../../hooks/useMapSupplier";
 import { defineLagecySetup } from "../../types/helper";
 import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
@@ -25,7 +26,8 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
-    Pick<AmapProps, "center" | "zoom"> {
+    Pick<AmapProps, "center" | "zoom">,
+    MapLogProps {
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -33,6 +35,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   props: HeycarMapProps,
   { slots, emit }
 ) {
+  useMapLog(props, "HeycarMap");
   const payload = useMapSupplier();
   const gmapDebouncedEmit: GmapProps["onDragEnd"] = ({ target }) => {
     const { lng, lat } = target.getCenter() as google.maps.LatLng;

package/src/hooks/useMapLog.ts

@@ -0,0 +1,12 @@
+import { watchEffect } from "vue-demi";
+
+export interface MapLogProps {
+  log?: boolean;
+}
+
+export const useMapLog = <P extends MapLogProps>(props: P, name: string) => {
+  watchEffect(() => {
+    if (!props.log) return;
+    console.log(`log ${name} props = `, { ...props });
+  });
+};

package/src/hooks/useMapPlace.ts

@@ -33,11 +33,13 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
             const cityName = addressComponent.city
               ? addressComponent.city
               : addressComponent.province;
+            const countryName = addressComponent.country;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
             place.cityName = cityName;
-            onChange?.({ lng, lat, name, cityName });
+            place.countryName = countryName;
+            onChange?.({ lng, lat, name, cityName, countryName });
             return;
           }
 
@@ -68,10 +70,13 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       const { results } = await geocoder.geocode({ language: LANGUAGE, location: { lng, lat } });
       const name = results[0].formatted_address;
       const cityName = geocoderResult2cityName(results[0]);
-      place.name = name;
+      const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
-      onChange?.({ lng, lat, name, cityName });
+      place.name = name;
+      place.cityName = cityName;
+      place.countryName = countryName;
+      onChange?.({ lng, lat, name, cityName, countryName });
     }
   );
   return { place, updatePlace };

package/src/types/amap/geocoder.d.ts

@@ -165,6 +165,8 @@ declare global {
     }
 
     export interface AddressComponent {
+      // 国家名称，例如： 日本
+      country: string;
       // 坐标点所在省名称	例如：北京市
       province: string;
       // 坐标点所在城市名称	请注意：当城市是省直辖县时返回为空，以及城市为北京、上海、天津、重庆四个直辖市时，该字段返回为空；省直辖县列表

package/src/types/interface.ts

@@ -7,7 +7,7 @@ export type Place = {
   lat: number;
   name: string;
   cityName?: string;
-  cityId?: string;
+  countryName?: string;
 };
 
 export interface AutoCompletePlace extends Place {

package/src/utils/helper.ts

@@ -0,0 +1,5 @@
+import type { Place } from "../types/interface";
+
+export const isPlace = (place: Partial<Place>): place is Place => {
+  return place.lng !== undefined && place.lat !== undefined;
+};