xy-map 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xy-map",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "地图组件",
   "main": "src/index.js",
   "scripts": {

package/public/index.html

@@ -17,5 +17,13 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
+<script type="text/javascript">
+  window._AMapSecurityConfig = {
+    securityJsCode: '261f789527e95a030aee9155590ff24c',
+  }
+</script>
+<script
+  src="https://webapi.amap.com/maps?v=2.0&key=dbd721a5a7d1276483505b5b821aa9e9&plugin=AMap.DistrictSearch&plugin=AMap.Geocoder&plugin=AMap.MouseTool&plugin=AMap.DistrictLayer&plugin=AMap.MarkerClusterer&plugin=Map3D"
+  charset="utf-8"></script>
 
 </html>

package/src/map.js

@@ -3,7 +3,7 @@ var defaultOptions = {
   zoom: 12,
   center: [102.485544, 24.921785],
   pitch: 0, // 3d倾斜视角
-  bearing: -50, // 旋转
+  bearing: 0, // 旋转
   terrain: 1.5, // 开启地形传0不开启
   build: true, // 显示建筑
   pitchWithRotate: true, // 禁止绕x轴旋转 false禁止

package/src/package/draw/index.vue

@@ -23,6 +23,7 @@
       </div>
     </div>
 
+    <slot></slot>
   </div>
 </template>
 
@@ -57,7 +58,7 @@ export default {
         { id: 'polygon', type: 'draw_polygon', name: '绘制面', icon: 'el-icon-house' },
         // { id: 'circle', type: 'draw_circle', name: '绘制圆', icon: 'el-icon-pie-chart' },
       ]
-      let filter = this.list.length > 0 ? arr.filter(item => this.list.includes(item.type)) : arr
+      let filter = this.list.length > 0 ? arr.filter(item => this.list.includes(item.id)) : arr
       return filter
     }
   },
@@ -127,11 +128,11 @@ export default {
   left: 0;
   top: 0;
   margin: 15px;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 14px;
+  border-radius: 5px;
 
   .tools-bar {
-    background-color: rgba(255, 255, 255, 0.9);
-    padding: 14px;
-    border-radius: 5px;
     cursor: pointer;
   }
 }

package/src/package/mapMarker.vue

@@ -23,19 +23,21 @@ export default {
     }
   },
   data () {
-    return {}
+    return {
+      marker: ''
+    }
   },
   watch: {
     map () {
       let el = this.$refs.dom
-      const marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(this.map)
+      const marker = this.marker = new mapBoxGl.Marker(el, { draggable: this.drag }).setLngLat(this.position).addTo(this.map)
       if (this.drag) {
         marker.on('dragend', () => {
           const lngLat = marker.getLngLat()
           this.$emit('dragEnd', lngLat)
         })
       }
-    }
+    },
   }
 }
 </script>

package/src/util/gaodeApi.js

@@ -0,0 +1,71 @@
+// 获取浏览器定位
+export function GeoAddress(lnglat) {
+  return new Promise((resolve) => {
+    // eslint-disable-next-line no-undef
+    AMap.plugin('AMap.Geocoder', () => {
+      // eslint-disable-next-line no-undef
+      const geocoder = new AMap.Geocoder()
+
+      geocoder.getAddress(lnglat, (status, result) => {
+        let address = {}
+        if (status === 'complete' && result.info === 'OK') {
+          console.log(result)
+          // result为对应的地理位置详细信息
+          address = {
+            formattedAddress: result.regeocode.formattedAddress,
+            ...result.regeocode.addressComponent
+          }
+          // console.log(address)
+          resolve(address)
+        }
+      })
+    })
+  })
+}
+
+
+// 获取浏览器定位
+export function Geolocation() {
+  return new Promise((resolve) => {
+    // eslint-disable-next-line no-undef
+    new AMap.plugin('AMap.Geolocation', () => {
+      // eslint-disable-next-line no-undef
+      const geolocation = new AMap.Geolocation({
+        // 是否使用高精度定位，默认：true
+        enableHighAccuracy: true,
+        // 设置定位超时时间，默认：无穷大
+        timeout: 10000,
+        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+        // eslint-disable-next-line no-undef
+        buttonOffset: new AMap.Pixel(10, 20),
+        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+        zoomToAccuracy: true,
+        //  定位按钮的排放位置,  RB表示右下
+        buttonPosition: 'RB'
+      })
+
+      geolocation.getCurrentPosition((status, result) => {
+        if (status === 'complete') {
+          onComplete(result)
+        } else {
+          onError(result)
+        }
+      })
+
+      function onComplete(data) {
+        // data是具体的定位信息
+        const info = {
+          lng: data.position.lng,
+          lat: data.position.lat,
+          formattedAddress: data.formattedAddress,
+          ...data.addressComponent
+        }
+        resolve(info)
+      }
+
+      function onError(data) {
+        // 定位出错
+      }
+    })
+  })
+}