jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseMapSearch/JfbBaseMapSearchMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-map-search'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseMapSearch/MapSearchH5.vue

@@ -0,0 +1,362 @@
+<template>
+  <view class="xd-baidu">
+    <baidu-map
+      v-if="uiAk"
+      class="xd-baidu__content"
+      :center="uiCenter"
+      :zoom="uiLevel"
+      :ak="ak"
+      @ready="handleReady"
+      @tilesloaded="handleTilesloaded"
+    >
+      <bm-navigation
+        anchor="BMAP_ANCHOR_TOP_RIGHT"
+        type="NavigationControlType"
+      ></bm-navigation>
+      <bm-geolocation
+        v-if="isGeolocation"
+        @locationSuccess="handleLocationSuccess"
+        class="xd-baidu__content-geolocation"
+        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+        :showAddressBar="true"
+        :autoLocation="true"
+      ></bm-geolocation>
+      <bm-marker
+        v-if="isGeolocation && uiGeolocation !== null"
+        :position="uiGeolocation"
+        :dragging="false"
+        animation="BMAP_ANIMATION_BOUNCE"
+      ></bm-marker>
+    </baidu-map>
+    <view class="xd-baidu__box">
+      <view class="xd-baidu__box-search">
+        <input
+          placeholder="请输入关键字"
+          v-model="keyword"
+          @input="handleInput"
+        />
+      </view>
+    </view>
+    <view class="xd-baidu__result">
+      <view class="xd-baidu__result-box" id="xd-baidu__result"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * @description 仅仅支持H5端
+ * https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
+ * https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0
+ * 文档：https://www.npmjs.com/package/gxd-helper
+ *
+ * @property {Array} center 设置中心点坐标 （选填） 默认：[116.404, 39.915]天安门
+ * @property {Number} level 缩放级别 （选填） 默认：15
+ * @property {Boolean} isGeolocation 是否启用定位控件 （选填） 默认：true
+ * @property {String} ak 百度Ak （选填） 默认：''
+ *
+ * @event {Function} onLocationSuccess 定位对象（location）
+ * @event {Function} onSelect 选择地址详情对象（address））
+ */
+
+import BaiduMap from "vue-baidu-map/components/map/Map.vue";
+import BmMarker from "vue-baidu-map/components/overlays/Marker";
+import XdButton from "@/components/XdButton/XdButton";
+import BmNavigation from "vue-baidu-map/components/controls/Navigation";
+import BmGeolocation from "vue-baidu-map/components/controls/Geolocation";
+import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch";
+
+export default {
+  name: "XdBaiduSearch",
+  components: {
+    XdButton,
+    BmMarker,
+    BaiduMap,
+    BmNavigation,
+    BmGeolocation,
+    BmLocalSearch,
+  },
+  props: {
+    ak: {
+      type: String,
+      default: "hAKGzqKPqNtR6mnXbWgCM6wc2nW8OdUK",
+    },
+
+    center: {
+      type: Array,
+      default: [],
+    },
+
+    level: {
+      type: Number,
+      default: 15,
+    },
+
+    isGeolocation: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    BMap() {
+      if (this.BMap !== null && this.loaded) {
+        this.handleInitDone({ BMap: this.BMap });
+      }
+    },
+    loaded() {
+      if (this.BMap !== null && this.loaded) {
+        this.handleInitDone({ BMap: this.BMap });
+      }
+    },
+  },
+  data() {
+    return {
+      uiLevel: 15,
+      uiCenter: null,
+      uiGeolocation: null,
+      keyword: "",
+      show: false,
+      resultPoint: [],
+      uiAk: null,
+
+      //判断地图是否加载完成
+      BMap: null,
+      loaded: false,
+      map: null,
+    };
+  },
+  created() {
+    this.uiAk = this.$settings.baiduAk || this.ak;
+    if (!this.uiAk) throw new Error("请传入百度AK值");
+    else {
+      let uiCenter = "北京";
+      if (this.center !== null) {
+        if (
+          this.$xdUniHelper.checkVarType(this.center) === "array" &&
+          this.center.length === 2
+        ) {
+          uiCenter = this.getArrayToObject(this.center);
+        }
+        if (this.$xdUniHelper.checkVarType(this.center) === "string") {
+          uiCenter = this.center;
+        }
+      }
+      this.uiCenter = uiCenter;
+    }
+  },
+  methods: {
+    getArrayToObject(arr) {
+      return {
+        lng: Number(arr[0]),
+        lat: Number(arr[1]),
+      };
+    },
+
+    handleLocationSuccess(location) {
+      let point = this.$xdUniHelper.cloneDeep(location.point);
+      delete point["of"];
+      this.uiGeolocation = point;
+      this.uiLevel = 15;
+      if (!this.uiCenter.lng || !this.uiCenter.lat) {
+        this.uiCenter = point;
+        this.getAddress(location.point, false);
+      } else {
+        this.uiGeolocation = this.uiCenter;
+        this.getAddress(this.uiCenter, false);
+        console.log(this.uiCenter,'this.uiCenter');
+      }
+      this.$emit("onLocationSuccess", location);
+    },
+
+    handleInitDone({ BMap }) {
+      if (this.isGeolocation) {
+        let geolocation = new BMap["Geolocation"]();
+        geolocation["enableSDKLocation"]();
+        geolocation.getCurrentPosition(
+          (location) => {
+            console.log("handleInitDone", location);
+            //alert(JSON.stringify(location.address))
+            let point = this.$xdUniHelper.cloneDeep(location.point);
+            delete point["of"];
+            this.uiGeolocation = point;
+            this.uiLevel = 15;
+            if (!this.uiCenter.lng || !this.uiCenter.lat) {
+              this.uiCenter = point;
+              this.getAddress(location.point, false);
+            } else {
+              this.uiGeolocation = this.uiCenter;
+              this.getAddress(this.uiCenter, false);
+            }
+            this.$emit("onLocationSuccess", location);
+          },
+          (error) => {
+            console.log("handleInitDone", error);
+          }
+        );
+      }
+    },
+
+    handleReady({ BMap, map }) {
+      this.BMap = BMap;
+      this.map = map;
+    },
+
+    handleTilesloaded() {
+      this.loaded = true;
+    },
+
+    strToNumber(str) {
+      if (str === "" || str === null || str === undefined) return "";
+      if (this.$xdUniHelper.checkVarType(str) === "string") str = Number(str);
+      return str;
+    },
+
+    getAddress(point, isShowKey = true) {
+      let geocode = new this.BMap["Geocoder"]();
+      geocode.getLocation(point, (addres) => {
+        if (addres["surroundingPois"].length > 0) {
+          if (isShowKey) {
+            this.keyword = addres["surroundingPois"][0]["title"];
+          }
+          setTimeout(() => {
+            console.log(addres["surroundingPois"]);
+            this.handleSearch(addres["surroundingPois"][0]["title"]);
+          }, 10);
+        }
+      });
+    },
+
+    handleSearch(value) {
+      if (value === "") {
+        this.map.clearOverlays();
+      }
+      let local = new BMap.LocalSearch(this.map, {
+        renderOptions: {
+          map: this.map,
+          panel: "xd-baidu__result",
+          selectFirstResult: false,
+          pageCapacity: 100,
+        },
+        onInfoHtmlSet: (result) => {
+          if (this.isFirst) this.handleSelect(result);
+          else {
+            this.$emit("onSelect", {
+              address: this.defaultValue,
+              longitude: this.resultPoint[0],
+              latitude: this.resultPoint[1],
+              sourceData: null,
+            });
+          }
+          if (!this.isFirst) this.isFirst = true;
+        },
+
+        onSearchComplete: (result) => {
+          let select = null;
+          //查找地址是否有相同，没有相同返回第一条
+          if (result && result["_pois"]) {
+            result["_pois"].map((item, index) => {
+              if (index === 0) {
+                select = item;
+                this.initIndex = index;
+              } else {
+                if (value === item.address) {
+                  select = item;
+                  this.initIndex = index;
+                }
+              }
+            });
+          }
+        },
+
+        onResultsHtmlSet: (result) => {
+          let li = result.getElementsByTagName("li");
+          this.isFirst = true;
+        },
+      });
+      console.log("handleSearch", value);
+      local.search(value);
+    },
+
+    handleSelect(result) {
+      this.resultPoint = [result["point"]["lng"], result["point"]["lat"]];
+      this.address = result["address"];
+      this.$emit("onSelect", {
+        address: `${this.keyword}@${this.address}`,
+        longitude: result["point"]["lng"],
+        latitude: result["point"]["lat"],
+        sourceData: result,
+      });
+    },
+
+    handleInput() {
+      if (this.timeer) clearTimeout(this.timeer);
+      this.timeer = setTimeout(() => {
+        this.isFirst = false;
+        this.handleSearch(this.keyword);
+      }, 600);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.xd-baidu {
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+
+  &__content {
+    width: 750rpx;
+    height: 500rpx;
+  }
+
+  &__box {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: unit(10, rpx);
+    height: unit(90, rpx);
+    box-sizing: border-box;
+
+    &-search {
+      width: unit(500, rpx);
+      background: #fff;
+      box-shadow: 0 0 unit(20, rpx) rgba(0, 0, 0, 0.3);
+      border-radius: unit(36, rpx);
+      position: absolute;
+      left: unit(20, rpx);
+      top: unit(20, rpx);
+      z-index: 10;
+      height: unit(72, rpx);
+      padding: 0 unit(20, rpx);
+
+      & > input {
+        width: 100%;
+        height: 100%;
+        font-size: @xd-font-size-lg;
+      }
+    }
+  }
+
+  &__result {
+    width: 100%;
+    height: 50%;
+    background: #fff;
+    padding: 0 unit(10, rpx);
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    & ::v-deep a {
+      display: none;
+    }
+
+    &-box {
+      & > ::v-deep * > *:nth-child(2) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseMapSearch/MapSearchMp.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="xd-map-search">
+		<view class="section">
+		  <input placeholder="输入关键字"  type="text" @input="bindKeyInput"/>
+		</view>
+		<view class="map_wrap">
+			<map style="height: 500rpx;width:750rpx"
+				:latitude="latitude" :longitude="longitude"
+				:markers="markers"
+				@updated="handleUpdated"
+				@markertap="handleMarketTap"
+			></map>
+		</view>
+		<view class="sug_info">
+		  <view class="sug_item" v-for="item in searchList" :key="item.uid" @click="handleSugTap(item)">
+		  	<view class="title">
+		  		{{item.name}}
+		  	</view>
+				<view class="sub">
+					地址：{{item.address}}
+				</view>
+		  </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import bmap from "./bmap-wx.js"
+	export default {
+		props: {
+			ak: String
+		},
+		data() {
+			return {
+				searchList: [],
+				longitude: "",
+				latitude: "",
+
+				BMap: null,
+				markers: [],
+				placeData: {},
+				city: ""
+			}
+		},
+		created(){
+			this.BMap = new bmap.BMapWX({
+				ak: this.ak
+			})
+			wx.getFuzzyLocation({
+				type: "gcj08",
+				success: res => {
+					console.log("getLocation", res);
+					this.longitude = res.longitude;
+					this.latitude = res.latitude;
+				}
+			})
+		},
+		methods: {
+			getCurCity(){
+				this.BMap.search({
+					query: "",
+					fail: (data) => {
+						console.log(data)
+					},
+					success: (res) => {
+						console.log("success", res);
+						let results = res.originalData.results;
+						this.city = results[0].city;
+					}
+				})
+			},
+			handleMarketTap(e){
+				let markerId = e.detail.markerId;
+				let curMarket = this.markers.find(item=> item.id == markerId);
+				this.handleSelectLocation(curMarket);
+			},
+			handleSugTap(item){
+				this.handleSelectLocation(item);
+			},
+			handleSelectLocation(market){
+				console.log("handleSelectLocation", market);
+				this.$emit('onSelect', {
+					address: `${market.name}@${market.address}`,
+					longitude: market['longitude'],
+					latitude: market['latitude'],
+					sourceData: market,
+				})
+			},
+			handleUpdated(e){
+				console.log("handleUpdated", e);
+				clearTimeout(this.timer);
+				this.timer = setTimeout(()=> {
+					this.getCurCity();
+				}, 100)
+			},
+			bindKeyInput(e){
+				console.log(e.detail.value)
+				clearTimeout(this.timer);
+				this.timer = setTimeout(()=> {
+					if(e.detail.valu == ''){
+						this.searchList = [];
+					}
+
+					this.BMap.suggestion({
+						query: e.detail.value,
+						region: this.city,
+						city_limit: true,
+						fail: (data) => {
+							console.log(data)
+						},
+						success: (data) => {
+							console.log("suggestion", data);
+							let list = data.result.map((item, i) => {
+								let { location, children, ...other } = item;
+								return {
+									id: parseInt(Math.random()*1000000000),
+									longitude: location.lng,
+									latitude: location.lat,
+									...other
+								}
+							});
+							let curF = list[0];
+							this.longitude = curF.longitude;
+							this.latitude = curF.latitude;
+							this.markers = list;
+							this.searchList = list;
+						}
+					})
+				}, 300)
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.xd-map-search{
+		height: 100%;
+		max-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+	.section{
+		padding: 20rpx;
+	}
+	.map_wrap{
+	}
+	.sug_info{
+		flex: 1;
+		overflow: auto;
+		.sug_item{
+			padding: 20rpx;
+			border-bottom: 1px soid #DDD;
+			.title {
+				font-size: 28rpx;
+				font-weight: 600;
+			}
+			.sub{
+				font-size: 24rpx;
+				font-weight: 400;
+			}
+		}
+	}
+</style>

package/src/components/JfbBaseMapSearch/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  aaaa: {}
+}