weex-amap - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

.eslintrc.json

@@ -7,4 +7,7 @@ {
     "globals":{
-      "AMap": 1
+      "AMap": true
     },
+    "env": {
+      "browser": true
+    },
     "rules": {
@@ -11,0 +14,0 @@ "func-names": 0,

package.json

 {
-    "version": "0.0.1",
+    "version": "0.0.2",
     "platform": [
@@ -4,0 +4,0 @@ "ios",

README.md

@@ -1,7 +0,7 @@
-# weex-plugin-amap
+# weex-amap
 
-<img width="320" src="https://img.alicdn.com/tps/TB1m1l.PXXXXXczXFXXXXXXXXXX-800-600.png" />
+<img width="320" src="https://img.alicdn.com/tps/TB19sYlPFXXXXaRaXXXXXXXXXXX-600-450.png" />
 
 
-一款高德地图weex插件，当前版本支持定位，缩放等地图常用操作。
+一款高德地图weex插件，当前版本支持定位，缩放，显示信息窗体等地图常用操作。
 
@@ -24,9 +24,10 @@ ### 快速开始
     position: relative;
-    height: 100%;
-    
+    flex:1; 
+    background-color: #fff;
   }
   .map{
-    width:100%;
-    height: 600;
-    background-color: #000;
+    flex: 1;
+    position: relative;
+    background-color: #fff;
+    min-height: 600;
   }
@@ -46,6 +47,2 @@ </style>
     
-    created () {
-
-    },
-    
   }
@@ -69,4 +66,5 @@ </script>
 | sdkKey   | object | {ios:'xxx',android: 'xxx',h5: 'xxx'} | 指定开发者的 SDK 密匙 
-**建议你前往[高德开发者社区](http://lbs.amap.com/)申明你对应产品的Key，保证地图正常工作**
 
+*建议你前往[高德开发者社区](http://lbs.amap.com/)申请你对应产品的Key，保证地图正常工作*
+
 #### weex-amap 事件
@@ -94,6 +92,90 @@ |事件    |     描述   |
 
-#### Amap 模块
+#### weex-amap-polyline 属性
 
+在地图上绘制折线
+
+| 属性        | 类型         | Demo  | 描述  |
+| ------------- |:-------------:| -----:|----------:|
+| path     | array | [[116.487, 40.00003],[113.487, 40.0002]...]| 折线的节点坐标数组 |
+| stroke-color | string     |    #000 | 线条颜色 |
+| stroke-width | number   |   2 | 线条宽度 |
+| stroke-opacity | number  | 0.5  | 线条透明度[0-1]
+| stroke-style   | string  | solid | 线条的样式 实线:solid，虚线:dashed
+
+code example：
+
+``` bash
+<weex-amap-polyline path="path" stroke-color="#000" stroke-weight="2"></weex-amap-polyline>
+
+<script>
+module.exports = {
+  data: {
+    path: [  
+      [116.368904, 39.913423],
+      [116.382122, 39.901176],
+      [116.387271, 39.912501],
+      [116.398258, 39.904600]
+    ],
+  
+  }
+}
+</script>
+```
+
+
+#### weex-amap-polygon 属性
+
+在地图上绘制多边形
+
+
+| 属性        | 类型         | Demo  | 描述  |
+| ------------- |:-------------:| -----:|----------:|
+| path     | array | [[116.487, 40.00003],[113.487, 40.0002]...]| 多边形轮廓线的节点坐标数组 |
+| fill-color | string     |    #000 | 多边形填充颜色 |
+| fill-opacity | string     |    #000 | 多边形填充透明度 |
+| stroke-color | string     |    #000 | 线条颜色 |
+| stroke-width | number   |   2 | 线条宽度 |
+| stroke-opacity | number  | 0.5  | 线条透明度[0-1]
+| stroke-style   | string  | solid | 线条的样式 实线:solid，虚线:dashed
+
+
+#### weex-amap-circle 属性
+
+在地图上绘制圆形
+
+
+| 属性        | 类型         | Demo  | 描述  |
+| ------------- |:-------------:| -----:|----------:|
+| center     | array | [116.346, 40.234234]| 圆形位置 |
+| radius | number     |    50 | 圆的半径 |
+| fill-color | string     |    #000 | 圆的填充颜色 |
+| fill-opacity | string     |    #000 | 圆的填充透明度 |
+| stroke-color | string     |    #000 | 圆的轮廓线条颜色 |
+| stroke-width | number   |   2 | 圆的轮廓线条宽度 |
+| stroke-opacity | number  | 0.5  | 圆的轮廓线条透明度[0-1]
+| stroke-style   | string  | solid | 圆的轮廓线条的样式 实线:solid，虚线:dashed
+
+
+####  weex-amap-info-window 属性
+
+在地图上显示自定义窗体
+
+| 属性        | 类型         | Demo  | 描述  |
+| ------------- |:-------------:| -----:|----------:|
+| position     | array | [[116.487, 40.00003]| 在地图上的位置 |
+| open | boolean     |    true | 是否在地图上打开 |
+| offset | array     |    偏移 | 相对定位点坐标偏移 |
+| children | weex comonnet     |    <text>This is a info window</text> | 窗体的内容 |
+
+*SDK限制，一个地图只允许显示一个infoWindow*
+
+
+#### amap 模块
+
+它支持下面的方法：
+
 #####  getUserLocation(completeFunc,errorFunc)
 
+获取用户的位置信息
+
 + completeFunc 定位成功后的回调函数，返回的数据:
@@ -108,4 +190,50 @@ ```
 ```
-##### 使用Amap模块
+##### getLineDistance(coor1, coor2, callback)
 
+计算两个标记点的距离
+
+该方法接收三个参数 进行计算比如:
+
+@param `coor1` 坐标1
+
+@param `coor2` 坐标2
+
+@param `callback` 计算完成后的回调 会返回一个计算出的具体距离，单位 米
+
+``` js
+//...
+amap.getLineDistance(this.marker1.position, this.marker2.position, (res) => {
+  if (res.result == 'success') {
+    this.distance = '两点相距' + res.data + '米';
+    console.log(res.data.distance + '米');
+  } else {
+    console.log('计算失败');
+  }
+})   
+```
+
+##### polygonContainsMarker(coor, polygonRef, callbcak)
+
+判断几何形是否包含某个点 
+
+该方法接收两个参数，返回一个boolean值
+
+@param `coor` 点的坐标
+
+@param `polygonRef` 多边形的ref
+
+@param  `callbcak` 计算完成后的回调 会返回一个运算的结果,其中data字段是个boolean，表示是否包含
+
+
+``` 
+amap.polygonContainsMarker([114.23423, 43.2222], this.$ref('polygon2017'), (res) => {
+  if (res.result == 'success') {
+    console.log(res.data ? '存在' : '不存在' );
+  }
+})
+
+```
+
+##### 如何使用amap模块
+
 ``` html 
@@ -143,7 +271,8 @@ <template>
 
-####H5 demo 
-直接点击[Demo](https://weex-plugins.github.io/weex-plugin-amap/)可以演示当前版本支持的功能
+#### H5 demo 
 
-####用weexpack运行demo(Android／iOS／H5)
+直接点击[Demo](https://weex-plugins.github.io/weex-amap/)可以演示当前版本支持的功能
 
+#### 用weexpack运行demo(Android／iOS／H5)
+
 参考weexpack命令([网址](https://github.com/weexteam/weex-pack))来测试地图组件demo:
@@ -163,9 +292,13 @@
 
-4.添加地图插件
+4.添加地图插件，有两种方式
 
-weexpack plugin add /users/abcd/Code/weex-plugins/weex-plugin-amap (这后面是地图插件clone到本地的目录)
+－从插件市场下载安装：
+weexpack plugin add weex-amap
 
+－地图插件代码clone到本地后安装，
+weexpack plugin add /users/abcd/Code/weex-plugins/weex-amap  (这后面是地图插件本地代码的目录)
+
 5.编译和运行demo
 
-把demo文件（所有在目录plugins/weex-plugin-amap/demos/下的文件）拷贝到项目工程MyApp/src下，然后：
+把demo文件（所有在目录plugins/weex-amap/demos/下的文件）拷贝到项目工程MyApp/src下，然后：
 
@@ -178,4 +311,4 @@ 对H5用如下命令：weexpack build web & weexpack run web
 
-<img src="https://img.alicdn.com/tps/TB1lJ51PpXXXXX5aFXXXXXXXXXX-429-687.gif">
 
+<img src="https://img.alicdn.com/tps/TB1c5BKQXXXXXckXpXXXXXXXXXX-367-633.gif">
 
@@ -185,3 +318,4 @@
 
+### 集成插件
 
-
+如何将地图插件集成到自己的项目呢，请参考[weexpack文档说明](https://github.com/weexteam/weex-pack/tree/dev#5现有应用集成插件--组件容器)

web/index.js

 import amapModuleReg from './module/amap';
 import Amap from './components/amap';
 import AmapMarker from './components/amap-marker';
+import AmapCircle from './components/amap-circle';
+import AmapPolygon from './components/amap-polygon';
+import AmapPolyline from './components/amap-polyline';
+import AmapInfoWindow from './components/amap-info-window';
 // import VueAmap from './vue-amap/index';
 const components = [
   Amap,
-  AmapMarker
+  AmapMarker,
+  AmapCircle,
+  AmapPolygon,
+  AmapPolyline,
+  AmapInfoWindow
 ];
@@ -9,0 +17,0 @@

web/module/amap.js

@@ -0,1 +1,2 @@
+import components from '../service/components';
 // AMap module
@@ -25,2 +26,29 @@ const amap = {
     });
+  },
+  /** get distance between two position
+  * @param coor1
+  * @param corr2
+  * @param callback
+  **/
+  getLineDistance(coor1, coor2, callback) {
+    const lnglat = new AMap.LngLat(coor1[0], coor1[1]);
+    const result = lnglat.distance(coor2);
+    this.sender.performCallback(callback, {
+      result: !result ? 'fail' : 'success',
+      data: {
+        distance: result
+      }
+    });
+  },
+  /** tell if the marker in a polygon
+  * @param coor the marker position
+  * @param polygonRef
+  **/
+  polygonContainsMarker(coor, polygonRef, callback) {
+    const polygonCom = components.getComponent(polygonRef);
+    const result = polygonCom.contains(coor);
+    this.sender.performCallback(callback, {
+      result: !result ? 'fail' : 'success',
+      data: result
+    });
   }
@@ -30,6 +58,16 @@ };
 const meta = {
-  amap: [{
-    name: 'getUserLocation',
-    args: ['string', 'function']
-  }]
+  amap: [
+    {
+      name: 'getUserLocation',
+      args: ['string', 'function'],
+    },
+    {
+      name: 'getLineDistance',
+      args: ['array', 'array', 'function']
+    },
+    {
+      name: 'polygonContainsMarker',
+      args: ['array', 'string']
+    }
+  ]
 };
@@ -36,0 +74,0 @@

web/package.json

@@ -7,3 +7,3 @@ {
     ],
-    "main": "./vue-amap/index.js",
+    "main": "./index.js",
     "description": "weex amap component",
@@ -10,0 +10,0 @@ "keywords": [

web/service/map-loader.js

@@ -0,39 +1,40 @@
+// load map sdk
 const DEFAULT_CONFIG = {
   key: '',
   v: '1.3',
-  url: 'https://webapi.amap.com/maps'
+  url: 'https://webapi.amap.com/maps',
+  callback: 'amapInitComponent'
 };
- 
-const gengerateScriptUrl = function(obj) {
-  let paramArr = [];
-  for(let key in obj) {
-    if(key !== 'url') {
-      paramArr.push(encodeURI(key + '=' + obj[key]));  
+const gengerateScriptUrl = function (obj) {
+  const paramArr = [];
+  for (const key in obj) {
+    if (key !== 'url') {
+      paramArr.push(encodeURI(key + '=' + obj[key]));
     }
   }
-  return obj.url += '?' + paramArr.join('&');
+  const url = obj.url += '?' + paramArr.join('&');
+  return url;
 };
 
 module.exports = {
-  
-  load(config,container,callback) {
-    let newConfig = Object.assign({},DEFAULT_CONFIG,config);
-    let lib = document.createElement('script');
+  load(config, container, callback) {
+    const newConfig = Object.assign({}, DEFAULT_CONFIG, config);
+    const lib = document.createElement('script');
+    lib.async = true;
+    lib.defer = true;
     lib.src = gengerateScriptUrl(newConfig);
     console.log(lib.src);
-    let self = this;
-    lib.addEventListener('load',function() {
+    window.amapInitComponent = function () {
       window.maploaded = true;
       callback();
-    });
-    document.head.appendChild(lib);  
+    };
+    document.head.appendChild(lib);
     this.loadTimeout(container);
   },
-  
   loadTimeout(wrap) {
     setTimeout(() => {
-      if(!window.Amap) {
-        let el = document.createElement('button');
+      if (!window.Amap) {
+        const el = document.createElement('button');
         el.appendChild(document.createTextNode('重新加载'));
-        el.addEventListener('click', function () {
+        el.addEventListener('click', () => {
           location.reload();
@@ -47,2 +48,2 @@ });
 
-};
+};

web/service/vendor.js

@@ -7,3 +7,15 @@ module.exports = {
     return str.substr(0, 1).toUpperCase() + str.substring(1);
+  },
+  getObjectFirstVal(obj) {
+    if(typeof obj === 'object') {
+      return obj[Object.keys(obj)[0]]
+    }
+    return null;
+  },
+  // offset polyfill
+  calcOffset(x, y) {
+    var halfY = y / 2;
+    var newX = x - halfY;
+    return [newX, y];
   }
 };

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

2298715

increased by108.91%

Number of package files

203

increased by45%

Lines of code

19296

increased by181.08%

Number of lines in readme file

313

increased by74.86%

Worsened metrics

Number of low supply chain risk alerts

8

increased by166.67%

No dependency changes