@uiw/react-amap-require-script - npm Package Compare versions

Comparing version 2.7.0 to 2.7.1

cjs/index.d.ts

 /**
  * load dependency by css tag
  */
-export declare function requireCss(src: string): Promise<void>;
+export declare function requireCss(src: string, id?: string): Promise<void>;
 /**
@@ -6,0 +6,0 @@ * load dependency by script tag

cjs/index.js

@@ -14,5 +14,7 @@ "use strict";
 function requireCss(src) {
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_react_amap_css';
   var headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  var dom = document.getElementById(id);
   return new Promise(function (resolve, reject) {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -25,2 +27,3 @@ return;
     script.rel = 'stylesheet';
+    script.id = id;
     script.href = src;
@@ -47,6 +50,7 @@
 function requireScript(src) {
-  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_react_amap';
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_react_amap_plugin';
   var headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  var dom = document.getElementById(id);
   return new Promise(function (resolve, reject) {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -53,0 +57,0 @@ return;

esm/index.d.ts

 /**
  * load dependency by css tag
  */
-export declare function requireCss(src: string): Promise<void>;
+export declare function requireCss(src: string, id?: string): Promise<void>;
 /**
@@ -6,0 +6,0 @@ * load dependency by script tag

esm/index.js

@@ -6,6 +6,11 @@ var _importedScript = {};
 
-export function requireCss(src) {
+export function requireCss(src, id) {
+  if (id === void 0) {
+    id = '_react_amap_css';
+  }
+
   var headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  var dom = document.getElementById(id);
   return new Promise((resolve, reject) => {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -18,2 +23,3 @@ return;
     script.rel = 'stylesheet';
+    script.id = id;
     script.href = src;
@@ -40,8 +46,9 @@
   if (id === void 0) {
-    id = '_react_amap';
+    id = '_react_amap_plugin';
   }
 
   var headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  var dom = document.getElementById(id);
   return new Promise((resolve, reject) => {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -48,0 +55,0 @@ return;

package.json

 {
   "name": "@uiw/react-amap-require-script",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "基于 React 封装的高德地图组件。AMap Component Based On React.",
@@ -36,3 +36,3 @@ "homepage": "https://uiwjs.github.io/react-amap/#/api-loader",
   "dependencies": {
-    "@uiw/react-amap-types": "2.7.0"
+    "@uiw/react-amap-types": "2.7.1"
   },
@@ -39,0 +39,0 @@ "devDependencies": {

README.md

@@ -1,5 +0,5 @@
-APILoader
+@uiw/react-amap-require-script
 ===
 
-用于加载高德地图 SDK 依赖，加载完成，全局将会有 **`window.AMap`** 对象。
+用于加载高德地图其它 SDK 依赖，官方示例中的 css, js加载。
 
@@ -14,48 +14,69 @@ ```jsx
 
-Map 的父组件必须具有宽度和高度；
-
 <!--rehype:bgWhite=true&codeSandbox=true-->
 ```jsx
 import ReactDOM from 'react-dom';
-import { Map, APILoader } from '@uiw/react-amap';
+import React, { useState, useRef } from 'react';
+import { Map, APILoader, MassMarks } from '@uiw/react-amap';
 
-const Demo = () => (
-  <div style={{ width: '100%', height: '300px' }}>
-    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
-      <Map />
-    </APILoader>
-  </div>
-);
-ReactDOM.render(<Demo />, _mount_);
+const Example = (props) => {
+  const [show, setShow] = useState(true);
+  const [points, setPoints] = useState([]);
+  const map = useRef()
+  const marker = useRef()
+  useEffect(() => {
+    if(points.length === 0) {
+      requireScript('https://a.amap.com/jsapi_demos/static/citys.js', 'citys_id').then(() => {
+        if(citys && Array.isArray(citys)) {
+          setPoints(citys);
+        }
+      });
+    }
+  });
+  return (
+    <>
+      <button onClick={() => setShow(!show)}>
+        {show ? '隐藏' : '显示'}
+      </button>
+      <div style={{ width: '100%', height: '300px' }}>
+        <Map zoom={4}>
+          <MassMarks
+            visiable={show}
+            data={points}
+            onMouseMove={(evn) => {
+              if (!map.current) {
+                map.current = evn.target.getMap();
+                if (!marker.current) {
+                  marker.current = new AMap.Marker({ content: ' ', map: map.current });
+                }
+              }
+              if (marker.current) {
+                marker.current.setPosition(evn.data.lnglat);
+                marker.current.setLabel({content: evn.data.name})
+              }
+            }}
+          />
+        </Map>
+      </div>
+    </>
+  );
+}
+
+ReactDOM.render((
+  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
+    <Example />
+  </APILoader>
+), _mount_);
 ```
 
-### 多个地图
+### API
 
-<!--rehype:bgWhite=true&codeSandbox=true-->
-```jsx
-import ReactDOM from 'react-dom';
-import { Map, APILoader } from '@uiw/react-amap';
-
-const Demo = () => (
-  <div style={{ width: '100%', height: 300 }}>
-    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
-      <Map style={{ height: 100, marginBottom: 10 }} />
-      <div style={{ border: '1px solid red' }}>
-        <Map style={{ height: 100 }} />
-      </div>
-    </APILoader>
-  </div>
-);
-ReactDOM.render(<Demo />, _mount_);
+```typescript
+/**
+ * load SDK by css tag
+ */
+export declare function requireCss(src: string): Promise<void>;
+/**
+ * load SDK by script tag
+ */
+export declare function requireScript(src: string, id?: string): Promise<void>;
 ```
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|--------- |-------- |--------- |-------- |
-| akay | **`必填`** 您需先[申请密钥（ak）](https://lbs.amap.com/api/webservice/guide/create-project/get-key)才可使用该服务。⚠️ 注意申请 `Web端(JS API)` | string | - |
-| version | SDK 版本 | string | `2.0` |
-| protocol | 协议，默认是根据当前网站协议的 | `http`/`https` | `window.location.protocol` |
-| hostAndPath | 请求 SDK 的前半部分 | string | `webapi.amap.com/maps` |
-| callbackName | 回调函数 | string | `load_amap_sdk` |
-| plugin | 加载一个或者多个插件 `AMap.ToolBar,AMap.Driving` | string | `-` |

src/index.ts

@@ -6,6 +6,7 @@ const _importedScript: { [src: string]: true } = {};
  */
-export function requireCss(src: string): Promise<void> {
+export function requireCss(src: string, id: string = '_react_amap_css'): Promise<void> {
   const headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  const dom = document.getElementById(id);
   return new Promise((resolve, reject) => {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -17,2 +18,3 @@ return;
     script.rel = 'stylesheet';
+    script.id = id;
     script.href = src;
@@ -34,6 +36,7 @@ script.onerror = (err) => {
  */
-export function requireScript(src: string, id: string = '_react_amap'): Promise<void> {
+export function requireScript(src: string, id: string = '_react_amap_plugin'): Promise<void> {
   const headElement = document && (document.head || document.getElementsByTagName('head')[0]);
+  const dom = document.getElementById(id);
   return new Promise((resolve, reject) => {
-    if (!document || src in _importedScript) {
+    if (!document || src in _importedScript || dom) {
       resolve();
@@ -40,0 +43,0 @@ return;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17710

increased by10.23%

Lines of code

198

increased by7.03%

Number of lines in readme file

82

increased by36.67%

Dependency changes

• + Added@uiw/react-amap-types@2.7.1(transitive)

• - Removed@uiw/react-amap-types@2.7.0(transitive)

• Updated@uiw/react-amap-types@2.7.1