@heycar/heycars-map 0.1.3 → 0.1.4

package/dist/utils/transform.d.ts

@@ -7,3 +7,5 @@ export interface AsteriskItem {
 export declare const decodeAsterisk: (encodedValue: string) => AsteriskItem[];
 export declare const property2emitEventName: (propertyName: string) => string;
 export declare const property2mapEventName: (propertyName: string) => string;
+export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
+export declare const language2vectorMapForeign: (lang: "en" | "zh") => VectorMapForeign;

package/package.json

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

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

@@ -124,6 +124,7 @@ export const GDrivingLine = defineSetup(function GDrivingLine(props: DrivingLine
 export const DrivingLine = defineSetup(function DrivingLine(props: DrivingLineProps) {
   const payload = useMapSupplier();
   return () => {
+    if (!props.path.length) return null;
     return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
       attrs: props,
     });

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

@@ -1,4 +1,4 @@
-import type { Ref, ShallowRef } from "vue-demi";
+import type { Ref, ShallowRef, VNodeData } from "vue-demi";
 import { useAmap } from "../../components/Amap/useAmap";
 import { useGmap } from "../../components/Gmap/useGmap";
 import { useMapSupplier } from "../../components/MapProvider/useMapSupplier";
@@ -24,7 +24,8 @@ export const ADrivingRoute = defineSetup(function DrivingRoute(
   const mapRef = useAmap();
   const pathRef = useADrivingRoute(props);
   const angleRef = useAmapAngle({ pathRef, mapRef });
-  return () => <div>{slots.render?.({ pathRef, angleRef })}</div>;
+  debugger;
+  return () => <div id="qyc">{slots.render?.({ pathRef, angleRef })}</div>;
 });
 
 export const GDrivingRoute = defineSetup(function DrivingRoute(
@@ -37,7 +38,11 @@ export const GDrivingRoute = defineSetup(function DrivingRoute(
   return () => <div>{slots.render?.({ pathRef, angleRef })}</div>;
 });
 
-export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps) {
+export const DrivingRoute = defineSetup(function DrivingRoute(props: DrivingRouteProps, { slots }) {
   const { supplier } = useMapSupplier();
-  return () => createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, { attrs: props });
+  return () =>
+    createElement(supplier === "gmap" ? GDrivingRoute : ADrivingRoute, {
+      attrs: props,
+      scopedSlots: slots as VNodeData["scopedSlots"],
+    });
 });

package/src/components/Amap/Amap.ts

@@ -7,17 +7,25 @@ import {
   watchNoneImmediatePostEffectForMapProperty,
   watchPostEffectForAMapEvent,
 } from "../../utils/compare";
+import type { VectorMapForeign } from "../../utils/transform";
 import * as css from "./Amap.css";
 import { provideAmap } from "./useAmap";
 
-export interface AmapProps extends AMap.MapOptions {
+export interface AmapProps extends Omit<AMap.MapOptions, "vectorMapForeign"> {
+  vectorMapForeign?: VectorMapForeign;
   mapRef?: SetMap<AMap.Map>;
   onDragStart?: MapEventHandler<AMap.Map>;
   onDragEnd?: MapEventHandler<AMap.Map>;
 }
 
 export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit }) {
-  const { onDragStart, onDragEnd, mapRef: setMap, ...defaultOptions } = props;
+  const {
+    onDragStart,
+    onDragEnd,
+    mapRef: setMap,
+    vectorMapForeign = "style_zh_cn",
+    ...defaultOptions
+  } = props;
   const statusOptions = computed(() => {
     return {
       dragEnable: !!props.dragEnable,
@@ -35,7 +43,11 @@ export const Amap = defineSetup(function Amap(props: AmapProps, { slots, emit })
   watchPostEffect(() => {
     // todo 这里是否会因为 mapRef 的赋值导致不停运行？
     if (mapRef.value || !elementRef.value) return;
-    const map = new AMap.Map(elementRef.value, { ...defaultOptions });
+    const map = new AMap.Map(elementRef.value, {
+      ...defaultOptions,
+      vectorMapForeign: vectorMapForeign as any,
+      mapStyle: "amap://styles/95498a904992a4c0b866a3e4d7729682",
+    });
     mapRef.value = map;
     setMap?.(map);
   });

package/src/components/AmapLoader/AmapLoader.ts

@@ -29,7 +29,7 @@ export const AmapLoader = defineSetup(function AmapLoader(props: AmapLoaderProps
   const optionsRef = computed(() => {
     const { onChange, loading, fallback, apiKey, apiSecret, apiServiceHost, version, ...options } =
       props;
-    return { ...options, key: apiKey, version: version ?? "2.0" };
+    return { ...options, key: apiKey, version: version ?? "2.0.5.16" };
   });
   watchPostEffectForDeepOption(
     () => optionsRef.value,

package/src/components/MapProvider/MapProvider.tsx

@@ -1,6 +1,6 @@
 import type { SetMap } from "../../hooks/useHeycarMap";
 import { defineLagecySetup } from "../../types/helper";
-import { vec2lnglat } from "../../utils/transform";
+import { language2vectorMapForeign, vec2lnglat } from "../../utils/transform";
 import { Amap, AmapProps } from "../Amap";
 import { AmapLoader } from "../AmapLoader";
 import { Gmap, GmapProps } from "../Gmap";
@@ -19,6 +19,7 @@ export const MapProvider = defineLagecySetup(function MapProvider(
 export interface HeycarMapProps
   extends Pick<GmapLoaderProps, "fallback" | "loading">,
     Pick<AmapProps, "center" | "zoom"> {
+  language?: "en" | "zh";
   mapRef?: SetMap<AMap.Map> | SetMap<google.maps.Map>;
   onDragEnd?: (value: [number, number]) => any;
 }
@@ -37,13 +38,15 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
   };
   return () => {
     const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
-    const { mapRef: setMap, fallback, loading, center, zoom } = props;
+    const { mapRef: setMap, center, zoom, language = "zh" } = props;
+    const { fallback, loading } = slots;
     const children = slots.default?.();
     switch (supplier) {
       case "gmap":
         return (
           <GmapLoader
             apiKey={gmapKey}
+            language={language}
             version="beta"
             libraries={["marker", "places", "geometry"]}
             loading={loading}
@@ -78,6 +81,7 @@ export const HeycarMap = defineLagecySetup(function HeycarMap(
           >
             <Amap
               mapRef={setMap as SetMap<AMap.Map>}
+              vectorMapForeign={language2vectorMapForeign(language)}
               center={center}
               zoom={zoom}
               onDragEnd={amapDebounceEmit}

package/src/hooks/useDrivingRoute.ts

@@ -18,7 +18,6 @@ export const useADrivingRoute = (props: UseDrivingRouteProps) => {
         AMap.LngLat.from(to),
         { waypoints: [] },
         (status, result) => {
-          console.log("result = ", result);
           switch (status) {
             case "complete": {
               let path: Point[] = [];

package/src/utils/transform.ts

@@ -25,3 +25,13 @@ export const property2emitEventName = (propertyName: string) => {
 export const property2mapEventName = (propertyName: string) => {
   return propertyName.slice(2).toLowerCase();
 };
+
+export type VectorMapForeign = "style_en" | "style_local" | "style_zh_cn";
+export const language2vectorMapForeign = (lang: "en" | "zh"): VectorMapForeign => {
+  switch (lang) {
+    case "en":
+      return "style_en";
+    case "zh":
+      return "style_zh_cn";
+  }
+};