修复bug

select/place/index.vue

@@ -1,280 +1,337 @@
 <template>
-    <view>
-        <map id="Mymap" class="Mymap" :longitude="choose.longitude" :latitude="choose.latitude" show-location scale="16"
-            :markers="markers" />
-        <view class="search-box">
-            <picker v-if="area.show" :value="area.name" mode="region" level="city" @change="regionChange">
-                <view class="picker">
-                    <view class="name">
-                        {{ area.name[1] }}
-                    </view>
-                    <view class="iconfont icon-a-wodetiaozhuan" />
-                </view>
-            </picker>
-            <view style="flex: 1;margin-left: 10px;">
-                <My_search @onSearch="onSearch" isInput />
-            </view>
+  <view>
+    <map
+      id="Mymap"
+      class="Mymap"
+      :longitude="choose.longitude"
+      :latitude="choose.latitude"
+      show-location
+      scale="16"
+      :markers="markers"
+    />
+    <view class="search-box">
+      <picker
+        v-if="area.show"
+        :value="area.name"
+        mode="region"
+        @change="regionChange"
+        level='city'
+      >
+        <view class="picker">
+          <view class="name">
+            {{ area.name[1] }}
+          </view>
+          <view class="iconfont icon-a-wodetiaozhuan" />
         </view>
-        <My_listbox boxBackground="#fff" bottomHeight="70" pullDown="false">
-            <view v-if="list.length == 0" style="padding-top: 6vw;">
-                <u-empty mode="search" />
-            </view>
-            <view class="item" @click="changeChoose(item)"
-                :style="{ background: choose.lonlat == item.lonlat ? '#F8FBFF' : '#fff' }" v-for="item in list"
-                :key="item.lonlat" hover-class="navigator-hover">
-                <view class="name">
-                    {{ item.name }}
-                </view>
-                <view class="address">
-                    {{ getCity(item) }}
-                </view>
-            </view>
-        </My_listbox>
-        <view class="footer">
-            <view class="confirm" :class="choose.name ? '' : 'forbidden'" @click="choose.name ? submit() : ''"
-                hover-class="navigator-hover">
-                确定
-            </view>
+      </picker>
+      <view style="flex: 1; margin-left: 10px">
+        <My_search @onSearch="onSearch" isInput />
+      </view>
+    </view>
+    <My_listbox boxBackground="#fff" bottomHeight="70" :pullDown="false">
+      <view v-if="list.length == 0" style="padding-top: 6vw">
+        <u-empty mode="search" />
+      </view>
+      <view
+        class="item"
+        @click="changeChoose(item)"
+        :style="{
+          background: choose.lonlat == item.lonlat ? '#F8FBFF' : '#fff',
+        }"
+        v-for="item in list"
+        :key="item.lonlat"
+        hover-class="navigator-hover"
+      >
+        <view class="name">
+          {{ item.name }}
+        </view>
+        <view class="address">
+          {{ getCity(item) }}
         </view>
+      </view>
+    </My_listbox>
+    <view class="footer">
+      <view
+        class="confirm"
+        :class="choose.name ? '' : 'forbidden'"
+        @click="choose.name ? submit() : ''"
+        hover-class="navigator-hover"
+      >
+        确定
+      </view>
     </view>
+  </view>
 </template>
 
 <script>
-import { tianditu } from "../../utils/tianditu.js"
+import { tianditu } from "../../utils/tianditu.js";
 const api = new tianditu();
 
 export default {
-    data() {
-        return {
-            keyWord: "",
-            choose: {
-                longitude: "",
-                latitude: ""
+  data() {
+    return {
+      keyWord: "",
+      choose: {
+        longitude: "",
+        latitude: "",
+      },
+      area: {
+        show: false,
+      },
+      markers: [],
+      list: [],
+      circumjacents: [],
+    };
+  },
+  onLoad(options) {
+    this.getLocation(true).then((location) => {
+      this.choose = location;
+      api.getPlace(location.longitude, location.latitude).then((place) => {
+        console.log("逆解析", place);
+        if (place.msg == "ok") {
+          this.list = [
+            {
+              ...place.result.addressComponent,
+              name: place.result.addressComponent.poi,
+              lonlat: `${location.longitude},${location.latitude}`,
+              ...location,
             },
-            area: {
-                show: false,
-            },
-            markers: [],
-            list: [],
-            circumjacents: []
-        }
-    },
-    onLoad(options) {
-        this.getLocation(true).then(location => {
-            this.choose = location;
-            api.getPlace(location.longitude, location.latitude).then(place => {
-                console.log("逆解析", place)
-                if (place.msg == 'ok') {
-                    this.list = [{
-                        ...place.result.addressComponent,
-                        name: place.result.addressComponent.poi,
-                        lonlat: `${location.longitude},${location.latitude}`,
-                        ...location
-                    }]
+          ];
 
-                    this.choose = this.list[0];
+          this.choose = this.list[0];
 
-                    this.markers = [{
-                        longitude: this.choose.longitude,
-                        latitude: this.choose.latitude
-                    }];
+          this.markers = [
+            {
+              longitude: this.choose.longitude - 0,
+              latitude: this.choose.latitude - 0,
+              width: "35",
+              height: "50",
+            },
+          ];
 
-                    this.area = {
-                        show: true,
-                        name: [place.result.addressComponent.province, place.result.addressComponent.city, place.result.addressComponent.county],
-                        specify: [place.result.addressComponent.province_code, place.result.addressComponent.city_code, place.result.addressComponent.county_code]
-                    }
+          this.area = {
+            show: true,
+            name: [
+              place.result.addressComponent.province,
+              place.result.addressComponent.city,
+              place.result.addressComponent.county,
+            ],
+            specify: [
+              place.result.addressComponent.province_code,
+              place.result.addressComponent.city_code,
+              place.result.addressComponent.county_code,
+            ],
+          };
 
-                    this.getCircumjacent(place.result);
-                } else {
-                    uni.showModal({
-                        title: '提示',
-                        content: '获取位置失败',
-                        showCancel: false,
-                    })
-                }
-            })
+          this.getCircumjacent(place.result);
+        } else {
+          uni.showModal({
+            title: "提示",
+            content: "获取位置失败",
+            showCancel: false,
+          });
+        }
+      });
+    });
+    uni.setNavigationBarTitle({
+      title: options.title || "选择地点",
+    });
+  },
+  methods: {
+    getCircumjacent(place) {
+      api
+        .placeNameSearch({
+          keyWord: place.addressComponent.road,
+          queryRadius: "1000",
+          pointLonlat: `${place.location.lon},${place.location.lat}`,
+          queryType: 3,
+          start: 0,
+          count: 5,
+          dataTypes:
+            "公司,标志性建筑物,家装建材零售,家居用品,五金,电器零售,工业园",
+          show: 2,
         })
-        uni.setNavigationBarTitle({
-            title: options.title || '选择地点'
+        .then((res) => {
+          console.log("地址", res);
+          for (const key in res) {
+            if (key != "keyWord" && res[key].pois) {
+              this.list = this.unique(
+                this.list.concat(
+                  res[key].pois.map((v) => {
+                    let lonlat = v.lonlat.split(",");
+                    v.longitude = lonlat[0];
+                    v.latitude = lonlat[1];
+                    return v;
+                  })
+                ),
+                "lonlat"
+              );
+              this.circumjacents = JSON.parse(JSON.stringify(this.list));
+            }
+          }
         });
     },
-    methods: {
-        getCircumjacent(place) {
-            api.placeNameSearch({
-                keyWord: place.addressComponent.road,
-                queryRadius: "1000",
-                pointLonlat: `${place.location.lon},${place.location.lat}`,
-                queryType: 3,
-                start: 0,
-                count: 5,
-                dataTypes: "公司,标志性建筑物,家装建材零售,家居用品,五金,电器零售,工业园",
-                show: 2
-            }).then(res => {
-                console.log("地址", res)
-                for (const key in res) {
-                    if (key != 'keyWord' && res[key].pois) {
-                        this.list = this.unique(this.list.concat(res[key].pois.map(v => {
-                            let lonlat = v.lonlat.split(",")
-                            v.longitude = lonlat[0]
-                            v.latitude = lonlat[1]
-                            return v
-                        })), 'lonlat')
-                        this.circumjacents = JSON.parse(JSON.stringify(this.list))
-                    }
-                }
-            })
-        },
-        regionChange({ detail }) {
-            this.area = {
-                show: true,
-                name: detail.value,
-                specify: detail.code.map(v => "156" + v),
-            }
-            if (this.keyWord) this.onSearch(this.keyWord)
-        },
-        unique(arr, key) {
-            for (let i = 0; i < arr.length; i++) {
-                for (let j = i + 1; j < arr.length; j++) {
-                    if (arr[i][key] == arr[j][key]) {
-                        arr.splice(j, 1);
-                        j--;
-                    };
-                };
-            };
-            return arr;
-        },
-        changeChoose(item) {
-            this.choose = item;
-            this.markers = [{
-                longitude: item.longitude,
-                latitude: item.latitude
-            }];
+    regionChange({ detail }) {
+      this.area = {
+        show: true,
+        name: detail.value,
+        specify: detail.code.map((v) => "156" + v),
+      };
+      if (this.keyWord) this.onSearch(this.keyWord);
+    },
+    unique(arr, key) {
+      for (let i = 0; i < arr.length; i++) {
+        for (let j = i + 1; j < arr.length; j++) {
+          if (arr[i][key] == arr[j][key]) {
+            arr.splice(j, 1);
+            j--;
+          }
+        }
+      }
+      return arr;
+    },
+    changeChoose(item) {
+      this.choose = item;
+      this.markers = [
+        {
+          longitude: item.longitude - 0,
+          latitude: item.latitude - 0,
+          width: "35",
+          height: "50",
         },
-        onSearch(keyWord) {
-            this.keyWord = keyWord;
-            if (!keyWord) {
-                this.list = this.circumjacents;
+      ];
+    },
+    onSearch(keyWord) {
+      this.keyWord = keyWord;
+      if (!keyWord) {
+        this.list = this.circumjacents;
+      } else {
+        api
+          .placeNameSearch({
+            keyWord: keyWord,
+            specify: this.area.specify[1],
+            queryType: 12,
+            start: 0,
+            count: 30,
+            show: 2,
+          })
+          .then((res) => {
+            console.log("搜索地址", res);
+            if (res.pois) {
+              this.list = this.unique(
+                res.pois.map((v) => {
+                  let lonlat = v.lonlat.split(",");
+                  v.longitude = lonlat[0];
+                  v.latitude = lonlat[1];
+                  return v;
+                }),
+                "lonlat"
+              );
             } else {
-                api.placeNameSearch({
-                    keyWord: keyWord,
-                    specify: this.area.specify[1],
-                    queryType: 12,
-                    start: 0,
-                    count: 30,
-                    show: 2
-                }).then(res => {
-                    console.log("搜索地址", res)
-                    if (res.pois) {
-                        this.list = this.unique(res.pois.map(v => {
-                            let lonlat = v.lonlat.split(",")
-                            v.longitude = lonlat[0]
-                            v.latitude = lonlat[1]
-                            return v
-                        }), 'lonlat')
-                    } else {
-                        this.list = [];
-                        this.markers = [];
-                        this.choose = {
-                            longitude: "",
-                            latitude: ""
-                        };
-                    }
-                })
-            }
-            if (this.list.length) {
-                this.choose = this.list[0];
-                this.markers = [{
-                    longitude: this.choose.longitude,
-                    latitude: this.choose.latitude
-                }];
+              this.list = [];
+              this.markers = [];
+              this.choose = {
+                longitude: "",
+                latitude: "",
+              };
             }
-        },
-        submit() {
-            this.$Http.routeSelected(this.choose)
-        }
+          });
+      }
+      if (this.list.length) {
+        this.choose = this.list[0];
+        this.markers = [
+          {
+            longitude: this.choose.longitude - 0,
+            latitude: this.choose.latitude - 0,
+            width: "35",
+            height: "50",
+          },
+        ];
+      }
     },
-}
+    submit() {
+      this.$Http.routeSelected(this.choose);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .Mymap {
-    width: 100vw;
-    height: 37vh;
+  width: 100vw;
+  height: 37vh;
 }
 
 .search-box {
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  padding: 10px;
+  box-sizing: border-box;
+  background: #fff;
+
+  .picker {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    width: 100vw;
-    padding: 10px;
-    box-sizing: border-box;
-    background: #fff;
 
-    .picker {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .icon-a-wodetiaozhuan {
-            transform: rotate(90deg);
-            margin-left: 4px;
-        }
+    .icon-a-wodetiaozhuan {
+      transform: rotate(90deg);
+      margin-left: 4px;
     }
-
-
+  }
 }
 
 .item {
-    width: 100vw;
-    margin: 0 auto;
-    // border-bottom: .5px solid #ddd;
-    padding: 10px;
-    box-sizing: border-box;
+  width: 100vw;
+  margin: 0 auto;
+  // border-bottom: .5px solid #ddd;
+  padding: 10px;
+  box-sizing: border-box;
 
-    .name {
-        line-height: 20px;
-        font-family: Source Han Sans SC, Source Han Sans SC;
-        font-weight: bold;
-        font-size: 14px;
-        color: #333333;
-        margin-bottom: 5px;
-    }
+  .name {
+    line-height: 20px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: bold;
+    font-size: 14px;
+    color: #333333;
+    margin-bottom: 5px;
+  }
 
-    .address {
-        line-height: 17px;
-        font-family: Source Han Sans SC, Source Han Sans SC;
-        font-size: 12px;
-        color: #999999;
-    }
+  .address {
+    line-height: 17px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-size: 12px;
+    color: #999999;
+  }
 }
 
 .footer {
-    position: fixed;
-    bottom: 0;
-    width: 100vw;
-    height: 65px;
-    background: #FFFFFF;
-    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
-    box-sizing: border-box;
-    padding: 5px 10px;
-    z-index: 2;
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
+  height: 65px;
+  background: #ffffff;
+  box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
+  padding: 5px 10px;
+  z-index: 2;
 
-    .confirm {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 45px;
-        background: #C30D23;
-        border-radius: 5px;
-        font-family: PingFang SC, PingFang SC;
-        font-size: 14px;
-        color: #FFFFFF;
-    }
+  .confirm {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 45px;
+    background: #c30d23;
+    border-radius: 5px;
+    font-family: PingFang SC, PingFang SC;
+    font-size: 14px;
+    color: #ffffff;
+  }
 
-    .forbidden {
-        opacity: .6;
-    }
+  .forbidden {
+    opacity: 0.6;
+  }
 }
 </style>