@heycar/heycars-map 0.3.1 → 0.3.2

package/dist/style.css

@@ -1 +1 @@
-.n8tgem0{position:absolute;bottom:50%;left:0;right:0;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;z-index:1}.n8tgem1{padding:2.67vw 4.27vw;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw;display:flex;align-items:center}.n8tgem2{padding-right:2.67vw;max-width:41.33vw}.n8tgem3{display:-webkit-box;font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.n8tgem4{margin-top:.53vw;font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff;line-height:4.27vw;opacity:.8}.n8tgem5{width:1.758vw;height:2.93vw}.n8tgem6{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw}.n8tgem7{width:6.9355vw;height:10.67vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1d8ur7t0,._7anfuo0{position:relative}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}
+.n8tgem0{pointer-events:none;position:absolute;bottom:50%;left:0;right:0;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;z-index:1}.n8tgem1{pointer-events:auto;padding:2.67vw 4.27vw;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw;display:flex;align-items:center}.n8tgem2{padding-right:2.67vw;max-width:41.33vw}.n8tgem3{display:-webkit-box;font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.n8tgem4{margin-top:.53vw;font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff;line-height:4.27vw;opacity:.8}.n8tgem5{width:1.758vw;height:2.93vw}.n8tgem6{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw}.n8tgem7{width:6.9355vw;height:10.67vw}.rgf09w0{width:7.1045vw;height:10.93vw;display:flex}._15rq2xn0{display:flex;flex-direction:column;align-items:center;margin-bottom:-1.6vw}._15rq2xn1{padding:2.13vw 4.5vw 2.67vw 4.27vw;display:flex;align-items:center;background:linear-gradient(90deg,#79AFFF 0%,#5C8DFF 32%,#507FFF 75%,#4471FF 100%);border-radius:3.2vw}._15rq2xn2{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#fff;line-height:4.8vw;white-space:nowrap}._15rq2xn3{font-size:2.93vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#eafaf8;line-height:4.27vw;white-space:nowrap;opacity:.8}._15rq2xn4{margin-left:3.2vw;width:1.44vw;height:2.4vw}._15rq2xn5{width:.8vw;height:4vw;background:#4C80FF;border-radius:0vw 0vw 26.67vw 26.67vw;z-index:1}._15rq2xn6{margin-top:-1.5vw;width:3.2vw;height:3.2vw}._1d8ur7t0,._7anfuo0{position:relative}._4a4ovk0{margin-bottom:-.4vw;display:flex;flex-direction:column;align-items:center}._4a4ovk1{padding:1.07vw 2.4vw 1.6vw 2.67vw;background:#FFFFFF;box-shadow:0 .53vw 2.4vw #3f3f3f33;border-radius:2.13vw}._4a4ovk2{padding:2.67vw 2.67vw 2.4vw 3.2vw;background:#FFFFFF;box-shadow:0 0 2.67vw #4e556c26;border-radius:4.8vw;font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk3{font-size:3.2vw;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#1e1e1e;line-height:4.53vw;white-space:nowrap}._4a4ovk4{font-size:2.4vw;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#7e7e7e;line-height:3.47vw;white-space:nowrap}._4a4ovk5{color:#4471ff;font-family:PingFangSC-Medium,PingFang SC;font-weight:500}._4a4ovk6{margin-top:1.33vw;width:6.192vw;height:7.998vw}._4a4ovk7{margin-top:2.4vw;width:6.192vw;height:7.998vw}._1l6offo0{display:flex}._1l6offo1{width:4.53vw;height:4.53vw;margin-bottom:-2.265vw}._1l6offo2{width:16.27vw;height:16.27vw;margin-bottom:-8.135vw}.fhyw80{display:flex;align-items:center}.fhyw81{flex-direction:row-reverse}.fhyw83{margin-right:-2.265vw}.fhyw84{margin-left:-2.265vw}.fhyw85{margin-bottom:-2.265vw}.fhyw86{margin-right:calc(50% - 2.265vw)}.fhyw87{margin-left:calc(50% - 2.265vw)}.fhyw88{display:flex;width:4.53vw;height:4.53vw}.fhyw89{opacity:0}.fhyw8b{font-size:3.47vw;font-family:PingFangSC-Semibold,PingFang SC;font-weight:600;color:#243e66;line-height:4.53vw;white-space:nowrap}._65j3sr1{margin-top:1.87vw;margin-bottom:-5.5vw;width:6vw;height:11vw}@keyframes rrvp0y0{0%{transform:scale(0);opacity:1}33.33%{transform:scale(.5);opacity:1}66.66%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:0}}@keyframes rrvp0y1{0%{transform:scale(0);opacity:0}33.33%{transform:scale(0);opacity:1}66.66%{transform:scale(.5);opacity:1}to{transform:scale(1);opacity:0}}.rrvp0y2{display:flex;margin-bottom:-30.935vw;width:61.87vw;height:61.87vw;animation-name:rrvp0y0;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:linear}.rrvp0y3{animation-name:rrvp0y1}

package/dist/types/interface.d.ts

@@ -14,7 +14,7 @@ export interface AutoCompletePlace extends Place {
     placeId?: string;
     description: string;
 }
-export type City = {
+export type Region = {
     bound?: {
         east: number;
         north: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycar/heycars-map",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "scripts": {
     "dev": "vite -c vite.config.dev.ts",

package/src/Demo/DemoBusinessRecomendPlace.tsx

@@ -1,4 +1,4 @@
-import { computed } from "vue-demi";
+import { computed, reactive } from "vue-demi";
 import {
   BusinessRecomendPlaceMap,
   BusinessRecomendPlaceMapProps,
@@ -6,6 +6,7 @@ import {
 import { useBusinessMapAutoComplete } from "../hooks-business/useBusinessMapAutoComplete";
 import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap";
 import { defineSetup } from "../types/helper";
+import type { Region } from "../types/interface";
 import * as css from "./Demo.css";
 
 const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName: string }) {
@@ -32,6 +33,8 @@ const SomeAutoComplete = defineSetup(function SomeAutoComplete(props: { cityName
 });
 
 export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecomendPlace() {
+  const city = reactive<Region>({ name: "" });
+  const cityParent = reactive<Region>({ name: "" });
   const getRecomendPlace: BusinessRecomendPlaceMapProps["getRecomendPlace"] = async (
     place,
     context
@@ -46,22 +49,22 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
   const {
     centerPlace,
     placeCandidates,
-    setCenterPlaceByRecomand,
+    setCenterPlaceByUserSpecified,
     mapContext,
-    apiMapDistance,
     panToGeoPositionByRecomend,
   } = useBusinessRecomendPlaceMap();
-  (window as any).setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+  (window as any).setCenterPlaceByUserSpecified = setCenterPlaceByUserSpecified;
   (window as any).panToGeoPositionByRecomend = panToGeoPositionByRecomend;
   return () => {
     return (
       <div>
         placeCandidates: {placeCandidates} <br />
-        centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} |{" "}
-        {centerPlace.cityName} | {centerPlace.cityParentName} | {centerPlace.countryName} <br />
+        centerPlace: {centerPlace.lng} | {centerPlace.lat} | {centerPlace.name} | {city.name} |{" "}
+        {cityParent.name} <br />
         <SomeAutoComplete cityName="Shinjuku-ku"></SomeAutoComplete>
         <BusinessRecomendPlaceMap
           class={css.demo}
+          geoLoadingTitle={"正在读取GPS位置信息..."}
           unavailableTitle={"当前区域暂未开通服务"}
           noRecomendDescription={"附近无推荐上车地点"}
           recomendDescription={"最佳上车地点"}
@@ -70,6 +73,10 @@ export const DemoBusinessRecomendPlace = defineSetup(function DemoBusinessRecome
           mapContext={mapContext}
           onGeoError={(e) => console.log("onGeoError e = ", e)}
           onClickLocator={() => alert("hi")}
+          onChangeCity={({ cityName, cityParentName }) => {
+            city.name = cityName ?? "";
+            cityParent.name = cityParentName ?? "";
+          }}
         />
       </div>
     );

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

@@ -1,6 +1,7 @@
 import { style } from "@vanilla-extract/css";
 
 export const absoluteAddressBoxLayout = style({
+  pointerEvents: "none",
   position: "absolute",
   bottom: "50%",
   left: 0,
@@ -14,6 +15,7 @@ export const absoluteAddressBoxLayout = style({
 });
 
 export const absoluteAddressBox = style({
+  pointerEvents: "auto",
   padding: "2.67vw 4.27vw",
   background: "linear-gradient(90deg, #79AFFF 0%, #5C8DFF 32%, #507FFF 75%, #4471FF 100%)",
   borderRadius: "3.2vw",

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

@@ -25,12 +25,14 @@ export const AbsoluteAddressBox = defineSetup(function AbsoluteAddressBox(
       );
     return (
       <div class={css.absoluteAddressBoxLayout}>
-        <div class={css.absoluteAddressBox} onClick={handleClick}>
+        <div class={css.absoluteAddressBox}>
           <div class={css.boxTextLayout}>
-            <div class={css.boxTitle}>{title}</div>
+            <div class={css.boxTitle} onClick={handleClick}>
+              {title}
+            </div>
             {description && <div class={css.boxDescription}>{description}</div>}
           </div>
-          <img class={css.arrowRight} src={imgArrowRight} />
+          <img class={css.arrowRight} src={imgArrowRight} onClick={handleClick} />
         </div>
         <i class={css.straightLine} />
       </div>

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

@@ -23,6 +23,7 @@ export interface BusinessRecomendPlaceMapProps
   extends Omit<HeycarMapProps, "center" | "zoom" | "mapRef">,
     Pick<UseMapRecomendPlaceProps<CenterPlaceSource>, "getRecomendPlace">,
     MapLogProps {
+  geoLoadingTitle: string;
   unavailableTitle: string;
   recomendDescription: string;
   noRecomendDescription: string;
@@ -33,6 +34,7 @@ export interface BusinessRecomendPlaceMapProps
   onChangeByDrag?: UseMapDragProps["onChange"];
   onChangeGeoLocation?: UseGeoLocationProps["onChange"];
   onChangePlace?: UseMapPlaceProps["onChange"];
+  onChangeCity?: UseMapPlaceProps["onChangeCity"];
   onChangeRecomandPlace?: UseMapRecomendPlaceProps["onChange"];
   onGeoError?: UseGeoLocationProps["onError"];
   onClickLocator?: AbsoluteAddressBoxProps["onClick"];
@@ -47,15 +49,17 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       lng: geoDefaultPosition?.[0] ?? 0,
       lat: geoDefaultPosition?.[1] ?? 0,
       name: "",
-      cityName: undefined,
     });
     const centerPoint = computed<Point>(() => [centerPlace.lng, centerPlace.lat]);
     const centerSource: CenterPlaceSource = { source: "geo" };
     const setCenterPlaceByRecomand = (point: Point) => {
       centerSource.source = "api";
-      centerPlace.lng = point[0];
-      centerPlace.lat = point[1];
-      updatePlace();
+      updatePlace(point);
+    };
+    const setCenterPlaceByUserSpecified = (place: Place) => {
+      centerSource.source = "api";
+      setPlace(place);
+      updateRecomandPlace();
     };
     const setCenterByPlace = (place: Place) => {
       centerSource.source = "api";
@@ -64,30 +68,26 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       centerPlace.name = place.name;
     };
 
-    const { geoPosition, geoError } = useGeoLocation({
+    const { geoPosition, geoError, geoLoading } = useGeoLocation({
       geoDefaultPosition,
       onLoad: async (value) => {
         // geo 主入口
         await readyPromise;
         centerSource.source = "geo";
-        centerPlace.lng = value.position[0];
-        centerPlace.lat = value.position[1];
-        updatePlace();
+        updatePlace(value.position);
         emit("loadGeoLocation", value);
       },
       onLoadDefault: async (value) => {
         // geo default position 主入口
         await readyPromise;
         centerSource.source = "geo";
-        centerPlace.lng = value.position[0];
-        centerPlace.lat = value.position[1];
-        updatePlace();
+        updatePlace(value.position);
         emit("loadDefaultGeoLocation", value);
       },
       onChange: (v) => emit("changeGeoLocation", v),
       onError: (e) => emit("geoError", e),
     });
-    mapContext.setCenterPlaceByRecomand = setCenterPlaceByRecomand;
+    mapContext.setCenterPlaceByUserSpecified = setCenterPlaceByUserSpecified;
     mapContext.panToGeoPositionByRecomend = () => {
       if (geoError.value) return false;
       setCenterPlaceByRecomand(geoPosition.value);
@@ -97,14 +97,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       mapRef,
       onChange: (point) => {
         centerSource.source = "drag";
-        centerPlace.lng = point[0];
-        centerPlace.lat = point[1];
-        updatePlace();
+        updatePlace(point);
         emit("changeByDrag", point);
       },
     });
-    const { updatePlace, updateRecomandPlace, placeCandidates, availableRef } = useMapRecomendPlace(
-      {
+    const { updatePlace, setPlace, updateRecomandPlace, placeCandidates, availableRef } =
+      useMapRecomendPlace({
         pointRef: centerPoint,
         context: centerSource,
         getRecomendPlace,
@@ -122,7 +120,6 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
           }
         },
         onChangePlace: (place) => {
-          Object.assign(centerPlace, { ...place });
           if (centerSource.source !== "recomend") {
             updateRecomandPlace();
           }
@@ -131,11 +128,12 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
         onChange: (place) => {
           centerSource.source = "recomend";
           Object.assign(centerPlace, { ...place });
-          updatePlace();
           emit("changeRecomandPlace", place);
         },
-      }
-    );
+        onChangeCity: (value) => {
+          emit("changeCity", value);
+        },
+      });
     watchEffect(() => {
       mapContext.onChangeCenterPlace({ ...centerPlace });
     });
@@ -143,6 +141,11 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
       mapContext.onChangeRecomendPlaces([...placeCandidates.value]);
     });
     return () => {
+      const title = geoLoading.value
+        ? props.geoLoadingTitle
+        : availableRef.value
+        ? centerPlace.name
+        : props.unavailableTitle;
       const description = !availableRef.value
         ? undefined
         : placeCandidates.value.length > 0
@@ -153,7 +156,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
           <PassengerCircle position={geoPosition.value} />
           <PickupPoints places={placeCandidates.value} onClick={setCenterByPlace} log={props.log} />
           <AbsoluteAddressBox
-            title={availableRef.value ? centerPlace.name : props.unavailableTitle}
+            title={title}
             description={description}
             type={isDragging.value ? "locator" : "box"}
             log={props.log}
@@ -165,6 +168,7 @@ export const BusinessRecomendPlaceMap = defineLagecySetup(
   }
 ).props([
   "log",
+  "geoLoadingTitle",
   "unavailableTitle",
   "recomendDescription",
   "noRecomendDescription",

package/src/hooks/useGeoLocation.ts

@@ -10,6 +10,7 @@ export interface UseGeoLocationProps {
 }
 export const useGeoLocation = (props?: UseGeoLocationProps) => {
   const { onChange, onLoad, onLoadDefault, onError, geoDefaultPosition } = props ?? {};
+  let isOnLoadDefaultTriggered = false;
   const loading = ref(false);
   const readyRef = ref(false);
   const errorRef = ref<GeolocationPositionError>();
@@ -44,12 +45,15 @@ export const useGeoLocation = (props?: UseGeoLocationProps) => {
           loading.value = false;
           errorRef.value = error;
           const position = props?.geoDefaultPosition;
-          if (position) onLoadDefault?.({ position });
+          if (position && !isOnLoadDefaultTriggered) {
+            isOnLoadDefaultTriggered = true;
+            onLoadDefault?.({ position });
+          }
           onError?.(error);
           console.log("errorRef = ", errorRef);
         },
         // todo 要不要 timeout
-        { timeout: 5000, maximumAge: 0, enableHighAccuracy: true }
+        { timeout: 3000, maximumAge: 0, enableHighAccuracy: false }
       );
       onCleanup(() => navigator.geolocation.clearWatch(watchId));
     },

package/src/hooks/useMapAutoComplete.ts

@@ -1,11 +1,11 @@
 import { ref, watch } from "vue-demi";
-import type { AutoCompletePlace, City } from "../types/interface";
+import type { AutoCompletePlace, Region } from "../types/interface";
 import { MapLogProps, useMapLogVariable } from "./useMapLog";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
 export interface UseMapAutoCompleteProps extends MapLogProps {
-  city: City;
+  city: Region;
 }
 
 export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
@@ -16,7 +16,7 @@ export const useAmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
-  const setCity = (value: City) => {
+  const setCity = (value: Region) => {
     cityRef.value = value;
     update();
   };
@@ -65,7 +65,7 @@ export const useGmapAutoComplete = (props: UseMapAutoCompleteProps) => {
   const keywordRef = ref("");
   const autoCompletePlacesRef = ref<AutoCompletePlace[]>([]);
   const { update, idx: updateKey } = useUpdate();
-  const setCity = (value: City) => {
+  const setCity = (value: Region) => {
     cityRef.value = value;
     update();
   };

package/src/hooks/useMapCityBound.ts

@@ -1,13 +1,13 @@
 import { reactive, Ref, watch, watchEffect } from "vue-demi";
 import { LANGUAGE } from "../types/helper";
-import type { City } from "../types/interface";
+import type { Region } from "../types/interface";
 import { useMapSupplier } from "./useMapSupplier";
 
 export interface UseMapCityBoundProps {
   cityNameRef: Ref<string | undefined>;
-  onChange?: (value: City) => any;
+  onChange?: (value: Region) => any;
 }
-export const useAmapBoundCity = (props: UseMapCityBoundProps): City => {
+export const useAmapBoundCity = (props: UseMapCityBoundProps): Region => {
   const { cityNameRef, onChange } = props;
   const city = reactive({ name: cityNameRef.value ?? "" });
   watch(
@@ -21,10 +21,10 @@ export const useAmapBoundCity = (props: UseMapCityBoundProps): City => {
   return city;
 };
 
-export const useGmapBoundCity = (props: UseMapCityBoundProps): City => {
+export const useGmapBoundCity = (props: UseMapCityBoundProps): Region => {
   const { cityNameRef, onChange } = props;
   const { readyPromise } = useMapSupplier();
-  const city = reactive<City>({
+  const city = reactive<Region>({
     name: cityNameRef.value ?? "",
     bound: {
       east: 0,

package/src/hooks/useMapDrag.ts

@@ -18,9 +18,12 @@ export const useAmapDrag = (props: UseMapDragProps<AMap.Map>) => {
   const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<AmapProps, "onDragStart">> = () => {
-    Promise.resolve().then(() => (isDragging.value = true));
+    pipeAsync(() => {
+      isDragging.value = true;
+    });
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<AmapProps, "onDragEnd">> = (_, { target }) => {
+    console.log("on DragEnd ------");
     isDragging.value = false;
     const { lng, lat } = target.getCenter();
     centerRef.value = [lng, lat];
@@ -40,7 +43,9 @@ export const useGmapDrag = (props: UseMapDragProps<google.maps.Map>) => {
   const centerRef = ref<Point>([0, 0]);
   const isDragging = ref(false);
   const emitDragStart: SetupContextEmitHandler<Pick<GmapProps, "onDragStart">> = () => {
-    Promise.resolve().then(() => (isDragging.value = true));
+    pipeAsync(() => {
+      isDragging.value = true;
+    });
   };
   const emitDragEnd: SetupContextEmitHandler<Pick<GmapProps, "onDragEnd">> = async () => {
     isDragging.value = false;

package/src/hooks/useMapPlace.ts

@@ -1,24 +1,39 @@
-import { reactive, Ref, watch } from "vue-demi";
+import { reactive, ref, Ref, watch } from "vue-demi";
 import { LANGUAGE } from "../types/helper";
 import type { Place, Point } from "../types/interface";
 import { geocoderResult2cityName } from "../utils/transform";
 import { useMapSupplier } from "./useMapSupplier";
 import { useUpdate } from "./useUdate";
 
+export interface UseMapPlaceOnChangeCityProps {
+  cityName?: string;
+  cityParentName?: string;
+}
 export interface UseMapPlaceProps {
   pointRef: Ref<Point>;
   onChange?: (value: Place) => any;
+  onChangeCity?: (value: UseMapPlaceOnChangeCityProps) => any;
 }
 export const useAmapPlace = (props: UseMapPlaceProps) => {
-  const { pointRef, onChange } = props;
+  const { onChange, onChangeCity } = props;
+  const defaultPoint: Point = [...props.pointRef.value];
+  const pointRef = ref<Point>(defaultPoint);
   const { readyPromise } = useMapSupplier();
-  const { idx: placeKey, update: updatePlace } = useUpdate();
   const place = reactive<Place>({
     lng: pointRef.value[0],
     lat: pointRef.value[1],
     name: "",
-    cityName: undefined,
   });
+  const { idx: placeKey, update } = useUpdate();
+  const updatePlace = (value: Point) => {
+    pointRef.value = value;
+    update();
+  };
+  const setPlace = (value: Place) => {
+    place.lng = value.lng;
+    place.lat = value.lat;
+    place.name = value.name;
+  };
   watch(
     () => placeKey.value,
     async () => {
@@ -33,15 +48,12 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
             const cityName = addressComponent.city
               ? addressComponent.city
               : addressComponent.province;
-            const countryName = addressComponent.country;
             const cityParentName = addressComponent.province;
             place.name = name;
             place.lng = lng;
             place.lat = lat;
-            place.cityName = cityName;
-            place.cityParentName = cityParentName;
-            place.countryName = countryName;
-            onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
+            onChange?.({ lng, lat, name });
+            onChangeCity?.({ cityName, cityParentName });
             return;
           }
 
@@ -55,14 +67,23 @@ export const useAmapPlace = (props: UseMapPlaceProps) => {
       });
     }
   );
-  return { place, updatePlace };
+  return { place, updatePlace, setPlace };
 };
 
 export const useGmapPlace = (props: UseMapPlaceProps) => {
-  const { pointRef, onChange } = props;
+  const { pointRef, onChange, onChangeCity } = props;
   const { readyPromise } = useMapSupplier();
   const { idx: placeKey, update: updatePlace } = useUpdate();
-  const place = reactive<Place>({ lng: pointRef.value[0], lat: pointRef.value[1], name: "" });
+  const place = reactive<Place>({
+    lng: pointRef.value[0],
+    lat: pointRef.value[1],
+    name: "",
+  });
+  const setPlace = (value: Place) => {
+    place.lng = value.lng;
+    place.lat = value.lat;
+    place.name = value.name;
+  };
   watch(
     () => placeKey.value,
     async () => {
@@ -73,17 +94,15 @@ export const useGmapPlace = (props: UseMapPlaceProps) => {
       const name = results[0].formatted_address;
       const cityName = geocoderResult2cityName(results[0]);
       const cityParentName = results.slice(-2)[0].address_components[0].long_name;
-      const countryName = results.slice(-1)[0].address_components[0].long_name;
+      // const countryName = results.slice(-1)[0].address_components[0].long_name;
       place.lng = lng;
       place.lat = lat;
       place.name = name;
-      place.cityName = cityName;
-      place.cityParentName = cityParentName;
-      place.countryName = countryName;
-      onChange?.({ lng, lat, name, cityName, cityParentName, countryName });
+      onChange?.({ lng, lat, name });
+      onChangeCity?.({ cityName, cityParentName });
     }
   );
-  return { place, updatePlace };
+  return { place, updatePlace, setPlace };
 };
 
 export const useMapPlace = (props: UseMapPlaceProps) => {

package/src/hooks/useMapRecomendPlace.ts

@@ -35,16 +35,22 @@ export interface UseMapRecomendPlaceProps<C = Record<string, any>> {
   getLimit: (context?: C) => number;
   // 如果返回 undefined, 表示当前位置无服务可提供
   getRecomendPlace: (place: Place, context?: C) => Promise<Place[] | undefined>;
+  onChangeCity?: UseMapPlaceProps["onChangeCity"];
   onChangePlace?: UseMapPlaceProps["onChange"];
   onChange?: (place: Place) => any;
 }
 export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
-  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace, onChangeCity } =
+    props;
   const availableRef = ref(true);
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyPromise } = useMapSupplier();
-  const { place, updatePlace } = useAmapPlace({ pointRef, onChange: onChangePlace });
+  const { place, updatePlace, setPlace } = useAmapPlace({
+    pointRef,
+    onChange: onChangePlace,
+    onChangeCity,
+  });
   const recomendPlace = reactive<Place>({ ...place });
   watch(
     () => recomendPlaceKey.value,
@@ -73,16 +79,22 @@ export const useAmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     availableRef,
     updateRecomandPlace,
     updatePlace,
+    setPlace,
   };
 };
 
 export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
-  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace } = props;
+  const { pointRef, getRecomendPlace, getLimit, context, onChange, onChangePlace, onChangeCity } =
+    props;
   const availableRef = ref(true);
   const placeCandidatesRef = ref<Place[]>([]);
   const { idx: recomendPlaceKey, update: updateRecomandPlace } = useUpdate();
   const { readyPromise } = useMapSupplier();
-  const { place, updatePlace } = useGmapPlace({ pointRef, onChange: onChangePlace });
+  const { place, updatePlace, setPlace } = useGmapPlace({
+    pointRef,
+    onChange: onChangePlace,
+    onChangeCity,
+  });
   const recomendPlace = reactive<Place>({ ...place });
   watch(
     () => recomendPlaceKey.value,
@@ -111,6 +123,7 @@ export const useGmapRecomendPlace = <C>(props: UseMapRecomendPlaceProps<C>) => {
     availableRef,
     updateRecomandPlace,
     updatePlace,
+    setPlace,
   };
 };
 

package/src/hooks-business/useBusinessRecomendPlaceMap.ts

@@ -4,7 +4,7 @@ import type { Place, Point } from "../types/interface";
 
 export interface BusinessRecomendPlaceContext {
   panToGeoPositionByRecomend: (value: Point) => void;
-  setCenterPlaceByRecomand: (value: Point) => void;
+  setCenterPlaceByUserSpecified: (value: Place) => void;
   onChangeCenterPlace: (value: Place) => void;
   onChangeRecomendPlaces: (value: Place[]) => void;
 }
@@ -14,17 +14,17 @@ export const useBusinessRecomendPlaceMap = () => {
     lng: 0,
     lat: 0,
     name: "",
-    cityName: undefined,
   });
   const placeCandidates = ref<Place[]>([]);
   const { apiMapDistance } = useMapGeometry();
   const panToGeoPositionByRecomend = (value: Point) => mapContext.panToGeoPositionByRecomend(value);
-  const setCenterPlaceByRecomand = (value: Point) => mapContext.setCenterPlaceByRecomand(value);
+  const setCenterPlaceByUserSpecified = (value: Place) =>
+    mapContext.setCenterPlaceByUserSpecified(value);
   const mapContext: BusinessRecomendPlaceContext = {
     panToGeoPositionByRecomend: () => {
       throw new Error("MyError: panToGeoPositionByRecomend used before assigned");
     },
-    setCenterPlaceByRecomand: () => {
+    setCenterPlaceByUserSpecified: () => {
       throw new Error("MyError: setCenterPlaceByRecomand used before assigned");
     },
     onChangeCenterPlace: (place: Place) => {
@@ -39,7 +39,7 @@ export const useBusinessRecomendPlaceMap = () => {
     centerPlace,
     placeCandidates,
     panToGeoPositionByRecomend,
-    setCenterPlaceByRecomand,
+    setCenterPlaceByUserSpecified,
     apiMapDistance,
   };
 };

package/src/types/interface.ts

@@ -16,7 +16,7 @@ export interface AutoCompletePlace extends Place {
   description: string;
 }
 
-export type City = {
+export type Region = {
   bound?: {
     east: number;
     north: number;