npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@heycar/heycars-map-react

v0.5.0

Published

时间关系,先写个简要文档,之后会补一个全面的文档。

Downloads

98

Readme

说明

时间关系,先写个简要文档,之后会补一个全面的文档。

安装

# 安装依赖包
npm install @heycar/heycars-map-react --save

加载地图样式

import "@heycar/heycars-map-react/dist/style.css";

使用

目前有下列常用数据结构

export type Language = "en" | "zh" | "zh-TW";

export type Point = [number, number];

export type Place = {
  lng: number;
  lat: number;
  name: string;
  displayName: string;
};

export interface Zone {
  name: string;
  path: Point[];
}

export interface RecommendZonePlaces {
  // 是否强制吸附
  adsorption?: boolean;
  // 是否强制推荐点, 该字段暂时停用
  force?: boolean;
  // 是否可以提供服务
  available?: boolean;
  zone?: Zone;
  places?: Place[];
}

export type DriverStatus =
  | "SUBMIT"
  | "RE_PUSH_VEHICLE"
  | "CONFIRM_NOCAR"
  | "CONFIRM"
  | "SET_OUT"
  | "ARRIVE"
  | "DRIVING"
  | "WAIT_PAY"
  | "PAYED"
  | "DELIVERED"
  | "CANCEL_BY_CS"
  | "CANCEL_BY_USER"
  | "CANCEL_CONFIRMED";

// 上车点文字可以是
// title =
//    centerPlaceStatus === CenterPlaceStatus.GEO_LOADING ? '正在获取您当前的位置' :
//    centerPlaceStatus === CenterPlaceStatus.SERVICE_UNAVAILABLE ? '当前区域暂未开通服务' :
//    centerPlace.displayName
export enum CenterPlaceStatus {
  GEO_LOADING = "GEO_LOADING",
  QUERYING_INFO = "QUERYING_INFO",
  SERVICE_UNAVAILABLE = "SERVICE_UNAVAILABLE",
  OK = "OK",
}

// GeolocationPositionError 类型参考 [MDN Reference](https://developer.mozilla.org/docs/Web/API/GeolocationPositionError)
export interface BusinessGeolocationPositionError extends GeolocationPositionError {
  // isBusinessTimeout 是产品定义的 业务超时,不同于标准 GeolocationPositionError 的TIMEOUT
  // 参考 http://p.heycars.cn/zentaopms/www/index.php?m=story&f=view&storyID=1212
  // 参考 https://doc.weixin.qq.com/doc/w3_AZIAowasAIcGieCNESnQZe1rhTyaK?scode=ACcAmge7AAou1TTqYiAZIAowasAIc
  isBusinessTimeout: boolean;
}

在 入口文件添加 MapProvider

  • 对于 jsx/tsx 文件的例子
<MapProvider
  // 高德地图 api key
  amapKey={amapApiKey}
  // 高德地图 secret
  amapSecret={amapApiSecret}
  // 谷歌地图 id
  gmapId={gmapId}
  // 谷歌地图 api key
  gmapKey={gmapApiKey}
  // 使用哪个地图供应商,目前两个供应商: amap 高德 / gmap 谷歌
  supplier={"amap"}
  // 地图语言 "en" | "zh" | "zh-TW"
  language={"zh"}
>
  ...
</MapProvider>

在地图里可以使用的组件

为了方便集成,已经将常用业务逻辑集成在四个业务组件里面,下面是推荐使用的业务组件

  • BusinessRecomendPlaceMap
  • BusinessQuotingMap
  • BusinessTaxiServiceMap
  • BusinessTaxiEndMap

下面三个是推荐搭配使用的业务 hooks

  • useBusinessRecomendPlaceMap
  • useBusinessQuotingMap
  • useBusinessTaxiServiceMap

选择上车点和推荐点的地图组件 BusinessRecomendPlaceMap

import { useBusinessRecomendPlaceMap, BusinessRecomendPlaceMap } from "@heycar/heycars-map-react";

function DemoForBusinessRecomendPlaceMap() {
  const { mapContext, centerPlace, setCenterPlaceByUserSpecified } = useBusinessRecomendPlaceMap();
  return (
    <BusinessRecomendPlaceMap
      className={"demo"}
      geoLoadingTitle={"正在获取您当前的位置"}
      unavailableTitle={"当前区域暂未开通服务"}
      emptyTitle={"当前位置"}
      queryingTitle={"正在获取地址信息"}
      recomendDescription={"您将在此处上车"}
      getRecomendPlace={async ({ lng, lat }) => {
        // 获取推荐点。如果没有数据,可以返回 undefined
        return {
          available: true,
          zone: {
            name: "香港迪斯尼乐园",
            path: [
              [lng - 0.001, lat + 0.001],
              [lng, lat - 0.001],
              [lng + 0.001, lat + 0.0005],
            ],
          },
          places: [
            { lat: lat - 0.00001, lng: lng + 0.0001, name: "place 1", displayName: "place 1" },
            { lat: lat - 0.0002, lng: lng + 0.0002, name: "place 2", displayName: "place 2" },
            { lat: lat - 0.0002, lng: lng - 0.0001, name: "place 3", displayName: "place 3" },
          ],
        };
      }}
      defaultCenterPlace={
        (place) => place ?? ({ lng: 116.397477, lat: 39.908692 } as Place) // 北京
      }
      renderPlacePhoto={(place) => {
        place;
        return "https://oss-now.heycars.cn/image/graphicGuidance/file/hmlh38_xs6_DdksNX0_TbgF0lKXp.jpg";
        // return place.graphicPhotoUrl;
      }}
      renderPlaceTag={(place) => {
        place;
        return "最近使用";
        // switch(place.reqFrom) {
        //   case 'Recent': '最近使用';
        //   case 'Frequent': '曾经使用';
        //   default: return;
        // };
      }}
      onChangePlace={() =>
        console.log("用户操作地图,导致地址变更时触发,此时可以向后端查询城市信息")
      }
      onClickLocatorText={() =>
        console.log("用户点击了蓝色光标触发,此时可以执行用户点击起点输入框相同的逻辑")
      }
      onClickLocatorPhoto={() =>
        console.log("用户点击了蓝色光标图片触发,此时可以跳转到图文指引")
      }
      onGeoError={({ isBusinessTimeout }) => {
        console.log(
          "获取GPS失败时触发,此时可以弹框告诉用户",
          isBusinessTimeout ? "给用户超时提示" : "给用户无权限反馈",
        );
      }}
      mapContext={mapContext}
    />
  );
}

询价业务的地图组件 BusinessQuotingMap

import { useBusinessQuotingMap, BusinessQuotingMap } from "@heycar/heycars-map-react";

function DemoForBusinessQuotingMap() {
  const { setMap, registerFitVeiw } = useBusinessQuotingMap();
  return (
    <BusinessQuotingMap
      className={"demo"}
      to={{ name: "深圳宝安国际机场", displayName: "深圳宝安国际机场",, lat: 22.625687, lng: 113.81147 }}
      from={{ name: "香港国际机场", displayName: "香港国际机场",, lat: 22.308527, lng: 113.91851 }}
      waypointCandidates={[
        [113.950999, 22.490871],
        [113.980826, 22.448231],
      ]}
      fromDescription={"您将在此上车"}
      renderDescription={({ distance, duration }) =>
        `全程 *${distance / 1000}公里*  约行驶 *${duration}*`
      }
      mapRef={setMap}
      registerOverlay={registerFitVeiw}
      onClickPlaceFrom={() => console.log("用户点击起点图标时触发")}
      onClickPlaceTo={() => console.log("用户点击终点图标时触发")}
      onChangeDrivingRoute={({ distance, duration }) =>
        console.log(`驾车路线变更时触发: ${distance}米 ${duration}秒`)
      }
    />
  );
}

打车状态流转业务的地图组件 BusinessTaxiServiceMap

import {
  useBusinessTaxiServiceMap,
  BusinessTaxiServiceMap,
  DriverStatus,
} from "@heycar/heycars-map-react";

function DemoForBusinessTaxiServiceMap() {
  const { setMap, registerFitVeiw } = useBusinessTaxiServiceMap();
  const status: DriverStatus = "dispatching";
  return (
    <BusinessTaxiServiceMap
      className={css.adjustedDemo}
      from={from}
      to={to}
      driverStatus={status}
      submitTitle="2月14日 11:00 用车"
      confirmNoCarTitle="出发前1小时可见司机位置"
      arriveTitle="司机已等待 00:35"
      renderSetOutTitle={({ distance, duration }) => `距你*${distance}*公里, *${duration}*分钟`}
      renderDrivingTitle={({ distance, duration }) =>
        `距离终点*${distance}*公里, 预计*${duration}*分钟`
      }
      getDriverPosition={async () => {
        //  向后端请求司机位置和车头方向
        return { position: [121.4136983, 31.216324] as Point, angle: 30 }
      }}
      interval={5000}
      mapRef={setMap}
      registerOverlay={registerFitVeiw}
      onChangeDrivingRoute={({ distance, duration }) =>
        console.log(`当行驶路线变更时触发,行程${distance}米,${duration}秒`)
      }
    />
  );
}

服务结束的地图组件

<BusinessTaxiEndMap
  className={"demo"}
  to={{ name: "深圳宝安国际机场", displayName: "深圳宝安国际机场",, lat: 22.625687, lng: 113.81147 }}
  from={{ name: "香港国际机场", displayName: "香港国际机场",, lat: 22.308527, lng: 113.91851 }}
  waypointCandidates={[
    [113.950999, 22.490871],
    [113.980826, 22.448231],
  ]}
/>

公交车站地图组件

<BusinessBusStationMap className={"demo"} position={[103.994003, 1.35019]} title={"公交车站xxx"} />

海外接送机司机区域地图组件

<BzShuttleTaxiRangeMap
  className={"demo"}
  path={[
    [139.569, 35.555],
    [139.558, 35.55],
    [139.56, 35.565],
  ]}
  /* 是否打印内部状态信息 */
  log
/>

下面是基础业务组件的使用方法,但是目前阶段不推荐使用

下列是一些更加基础的业务组件, 虽然导出了,但是目前阶段不推荐使用

  • AbsoluteAddressBox
  • DrivingLine
  • PassengerCircle
  • PlaceCircle
  • StartEndPoint
  • TaxiCar
  • WalkingLine
  • WaveCircle
  • DrivingRoute
  • WalkingRoute
  • PickupPoints

在地图里使用 AbsoluteAddressBox ,需要放在 HeycarMap 内部

<HeycarMap center={[0, 0]} zoom={3}>
  ...
  <AbsoluteAddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} />
  ...
</HeycarMap>

在需要用到地图的地方添加 HeycarMap

  • 对于 jsx/tsx 文件的例子
<HeycarMap
  class="any class name"
  // 地图加载失败要显示的内容
  fallback={<div>error</div>}
  // 地图还没有加载完成时要显示的内容
  loading={<div>loading</div>}
  // 地图中心点
  center={[0, 0]}
  // 地图放缩
  zoom={3}
>
  ...
</HeycarMap>