cnhis-design-vue 2.1.56 → 2.1.58

package/packages/map/src/Map.vue

@@ -1,484 +1,484 @@
-<template>
-  <div class="map">
-    <div class="search-container">
-      <div>
-        <a-input-search
-          v-model="searchKey"
-          placeholder="请输入地址"
-          enter-button="检索"
-          @search="searchKeyword"
-        />
-      </div>
-    </div>
-    <div :id="cMapId" class="map-core"></div>
-    <ul class="address-list" v-if="addressList && addressList.length">
-      <li>
-        地址:{{ addressList[0] && addressList[0].name }}
-        <a-button type="primary" size="small" @click="selectLocation(addressList[0], 'li')">
-          确定</a-button
-        >
-      </li>
-      <li class="address-item" v-for="(item, index) in addressList" :key="index">
-        <div @click="selectLocation(item, 'div')">
-          <div class="title">{{ item.name }}</div>
-          <span>{{ item.address }}</span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-/**
- * @author wenhongling
- * @desc 腾讯地图
- * @time 2021-06-28
- */
-import create from '@/core/create';
-import { Button, Input } from "ant-design-vue";
-import Vue from "vue";
-let _map_i = 0;
-export default create({
-  name: 'map',
-  props: {
-    locationProp: { type: String, default: "" },
-    ak: {
-      type: String,
-      default: "KP3BZ-OAC3W-PY6RY-OJ6DV-JYKN3-H6F72"
-    }
-  },
-  // components: {
-  //   [Button.name]: Button,
-  //   [Input.name]: Input,
-  //   [Input.Search.name]: Input.Search,
-  // },
-  computed: {
-    calculateLocationProp() {
-      return (this.locationProp && JSON.parse(this.locationProp)) || null;
-    }
-  },
-  watch: {
-    location: {
-      handler() {
-        this.drawLocation();
-      },
-      deep: true
-    }
-  },
-  beforeCreate() {
-    Vue.use(Button);
-    Vue.use(Input);
-  },
-  data() {
-    _map_i++;
-    return {
-      searchKey: "",
-
-      centrePoint: {},
-
-      location: { lng: "", lat: "" },
-      localObj: {},
-      map: null,
-      ac: null,
-
-      addressList: [], // 附近地址数组
-      markers: [],
-
-      timeout: null,
-      cMapId: 'map-core' + _map_i
-    }
-  },
-  mounted() {
-    // this.$nextTick(() => {
-    //   this.reset();
-    // })
-    setTimeout(() => {
-      this.reset();
-    }, 200)
-
-  },
-  methods: {
-    // 初始化地图
-    setMap(qq) {
-      // 设置地图中心点
-      var myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
-      // 定义工厂模式函数
-      var myOptions = {
-        zoom: 12, // 设置地图缩放级别
-        center: myLatlng, // 设置中心点样式
-        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
-      };
-      // 获取dom元素添加地图信息
-      this.map = new qq.maps.Map(document.getElementById(this.cMapId), myOptions);
-      const { lat, lng, address } = this.calculateLocationProp || {};
-      if (lat && lng) {
-        const new_opint = new qq.maps.LatLng(lat, lng);
-        this.handleGeocoder({ latLng: new_opint });
-      } else if (address) {
-        setTimeout(() => {
-          this.searchKeyword(address);
-        }, 300);
-      } else {
-        this.getLocation();
-      }
-
-      this.init();
-    },
-
-    hdnelSetMapcenter(location) {
-      const { qq } = this;
-      var new_opint = new qq.maps.LatLng(location.lat, location.lng);
-      this.centrePoint = new_opint;
-      this.map.panTo(new_opint);
-
-      const mk = new qq.maps.Marker({
-        position: new_opint,
-        map: this.map
-      });
-      this.markers.push(mk);
-    },
-
-    getLocation() {
-      const { qq } = this;
-      const geolocation = new qq.maps.Geolocation(this.ak, "qqmap");
-      const options = { timeout: 9000 };
-      const _this = this;
-      function showPosition(r) {
-        if (r && r.module == "geolocation") {
-          _this.location.lng = r.lng;
-          _this.location.lat = r.lat;
-
-          const new_opint = new qq.maps.LatLng(r.lat, r.lng);
-
-          _this.handleGeocoder({ latLng: new_opint });
-          _this.hdnelSetMapcenter({ lat: r.lat, lng: r.lng });
-
-        } else {
-          console.log("用户不允许获取地理位置");
-          _this.location.lng = 113.275;
-          _this.location.lat = 23.117;
-        }
-        // _this.init();
-      }
-      function showErr(err) {
-        console.log(err);
-      }
-      geolocation.getLocation(showPosition, showErr, options);
-    },
-
-    /* 经纬度 解析地址 */
-    handleGeocoder(config = {}) {
-      const { qq } = this;
-      const _this = this;
-      const { latLng } = config;
-      const geocoder = new qq.maps.Geocoder();
-      // 设置服务请求成功的回调函数
-      geocoder.setComplete(function(result) {
-        if (result.type === "GEO_INFO") {
-          var latlngBounds = new qq.maps.LatLngBounds();
-          var nearPois = result.detail.nearPois || [];
-          _this.handleClearOverLays();
-          _this.addressList = nearPois || [];
-          for (let index = 0; index < nearPois.length; index++) {
-            const pois = nearPois[index];
-            var marker = new qq.maps.Marker({
-              map: _this.map
-            });
-            marker.setPosition(pois.latLng);
-
-            marker.setTitle(index + 1);
-            _this.markers.push(marker);
-
-            latlngBounds.extend(pois.latLng);
-          }
-
-          _this.map.fitBounds(latlngBounds);
-        }
-        var location = result.detail.location || {};
-        _this.hdnelSetMapcenter(location);
-        // new qq.maps.Marker({
-        //   map: _this.map,
-        //   position: location
-        // });
-      });
-      // 若服务请求失败，则运行以下函数
-      geocoder.setError(function() {
-        alert("出错了，请输入正确的经纬度！！！");
-      });
-
-      geocoder.getAddress(latLng);
-    },
-
-    init() {
-      const { qq } = this;
-      const _this = this;
-      // 添加dom监听事件
-      qq.maps.event.addDomListener(this.map, "click", function(event) {
-        _this.handleGeocoder({ latLng: event.latLng });
-      });
-    },
-
-    // 点击后根据经纬度绘制地图中的坐标点
-    drawLocation() {},
-
-    initSearch() {
-      const { qq } = this;
-      const _this = this;
-      // 设置Poi检索服务，用于本地检索、周边检索
-      this.searchService = new qq.maps.SearchService({
-        // 检索成功的回调函数
-        complete: function(results) {
-          // 设置回调函数参数
-          var pois = results.detail.pois || [];
-          // var infoWin = new qq.maps.InfoWindow({
-          //   map: _this.map
-          // });
-          var latlngBounds = new qq.maps.LatLngBounds();
-          if (results.type === "CITY_LIST") {
-            _this.searchService.setLocation(results.detail.cities[0].cityName);
-            _this.searchService.search(_this.searchKey);
-            return;
-          }
-
-          _this.addressList = pois || [];
-          _this.handleClearOverLays();
-          if (results.type === "POI_LIST") {
-            for (var i = 0, l = pois.length; i < l; i++) {
-              var poi = pois[i];
-              // 扩展边界范围，用来包含搜索到的Poi点
-              latlngBounds.extend(poi.latLng);
-
-              (function(n) {
-                var marker = new qq.maps.Marker({
-                  map: _this.map
-                });
-                marker.setPosition(pois[n].latLng);
-
-                marker.setTitle(i + 1);
-                _this.markers.push(marker);
-              })(i);
-            }
-          }
-
-          // 调整地图视野
-          _this.map.fitBounds(latlngBounds);
-        },
-        // 若服务请求失败，则运行以下函数
-        error: function(e) {
-          console.log(e);
-          if (e === "NO_RESULTS") {
-            // alert("查无结果！");
-            _this.$message.warning("查无结果！");
-            return;
-          }
-          _this.$message.warning("地址检索先输入城市名称");
-        },
-        autoExtend: true
-      });
-    },
-
-    handleClearOverLays() {
-      if (this.markers && this.markers.length) {
-        this.clearOverlays(this.markers);
-      }
-      this.markers = [];
-    },
-
-    // 清除地图上的marker
-    clearOverlays(overlays) {
-      var overlay;
-      while ((overlay = overlays.pop())) {
-        overlay.setMap(null);
-      }
-    },
-
-    searchOnchange() {
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        this.searchKeyword();
-      }, 300);
-    },
-
-    searchKeyword(value) {
-      // const { qq } = this;
-      // let keyword = value;
-      this.searchKey = value;
-      if (!value) {
-        return;
-      }
-
-      if (this.markers && this.markers.length) {
-        this.clearOverlays(this.markers);
-      }
-      // this.addressList = [];
-      // this.markers = [];
-      if(!this.searchService){
-        this.initSearch()
-      }
-      // 根据输入的城市设置搜索范围
-      this.searchService.setLocation("");
-      // 设置搜索页码
-      // searchService.setPageIndex(pageIndex);
-      // 设置每页的结果数
-      this.searchService.setPageCapacity(50);
-      // 根据输入的关键字在搜索范围内检索
-      this.searchService.search(value);
-      // 根据输入的关键字在圆形范围内检索
-      // var region = new qq.maps.LatLng(39.916527,116.397128);
-      // this.searchService.searchNearBy(keyword, this.centrePoint, 200000);
-      // 根据输入的关键字在矩形范围内检索
-      // region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
-      // searchService.searchInBounds(keyword, region);
-    },
-
-    // 寻找附近的pio点
-    nearAddress(point) {
-      this.addressList = [];
-      this.geocoder.getLocation(point, e => {
-        const { addressComponents, surroundingPois } = e;
-        // console.log(e, addressComponents, "附近的点");
-        this.addressList = surroundingPois.map(surround => {
-          return {
-            province: addressComponents.province,
-            address: surround.address,
-            title: surround.title,
-            point: {
-              lat: surround.point.lat,
-              lng: surround.point.lng
-            }
-          };
-        });
-      });
-    },
-
-    // 向父组件传递经纬度
-    selectLocation(item) {
-      const { qq } = this;
-      const _this = this;
-      const { name, address, latLng } = item;
-      const { lat, lng } = latLng;
-      const geocoder = new qq.maps.Geocoder();
-      // 设置服务请求成功的回调函数
-      geocoder.setComplete(function(result) {
-        if (result.type === "GEO_INFO") {
-          const {
-            addressComponents: {
-              province,
-              city,
-              district,
-              country
-              // street, streetNumber
-            }
-            // location: { lat, lng }
-          } = result.detail;
-          const emitData = JSON.stringify({
-            name,
-            address,
-            province,
-            city,
-            district,
-            country,
-            // street,
-            // streetNumber,
-            lat,
-            lng
-          });
-          _this.$emit("selectLocation", {
-            locationProp: emitData,
-            isInit: false
-          });
-        }
-      });
-      // 若服务请求失败，则运行以下函数
-      geocoder.setError(function() {
-        alert("出错了，请输入正确的经纬度！！！");
-      });
-      geocoder.getAddress(latLng);
-    },
-
-    initMap(qq) {
-      this.qq = qq;
-      setTimeout(() => {
-        this.setMap(qq);
-        this.initSearch();
-      }, 0);
-    },
-
-    getMapScript() {
-      if (!global.qq) {
-        const ak = this.ak || this._qq().ak;
-        global.qq = {};
-        global.qq._preloader = new Promise(resolve => {
-          global._initBaiduMap = function() {
-            resolve(global.qq);
-            global.document.body.removeChild($script);
-            global.qq._preloader = null;
-            global._initBaiduMap = null;
-          };
-          const $script = document.createElement("script");
-          global.document.body.appendChild($script);
-          // $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`;
-          $script.src = `https://map.qq.com/api/js?v=2.exp&key=${ak}&callback=_initBaiduMap`;
-
-          const $script1 = document.createElement("script");
-          global.document.body.appendChild($script1);
-          $script1.src = `https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js`;
-
-          // const $script2 = document.createElement("script");
-          // global.document.body.appendChild($script2);
-          // $script2.src = `https://map.qq.com/api/js?v=2.exp&key=${ak}&libraries=place`;
-        });
-        return global.qq._preloader;
-      } else if (!global.qq._preloader) {
-        return Promise.resolve(global.qq);
-      } else {
-        return global.qq._preloader;
-      }
-    },
-
-    reset() {
-      const { getMapScript, initMap } = this;
-      getMapScript().then(initMap);
-    }
-  }
-});
-</script>
-
-<style lang="less" scoped>
-  .map {
-    width: 100%;
-    height: 500px;
-    .map-core {
-      width: 100%;
-      height: 250px;
-    }
-    .search-container {
-      margin-top: 20px;
-      height: 40px;
-      #suggestId {
-        width: 100%;
-      }
-    }
-    .address-list {
-      height: calc(100% - 75px);
-      overflow-y: auto;
-      .address-item {
-        height: 60px;
-        cursor: pointer;
-        padding-top: 10px;
-        .title {
-          font-size: 16px;
-        }
-        span {
-          font-size: 12px;
-          color: #b9b9b9;
-      }
-      &:first-child {
-        height: 57px;
-        padding-top: 20px;
-        line-height: 40px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="map">
+    <div class="search-container">
+      <div>
+        <a-input-search
+          v-model="searchKey"
+          placeholder="请输入地址"
+          enter-button="检索"
+          @search="searchKeyword"
+        />
+      </div>
+    </div>
+    <div :id="cMapId" class="map-core"></div>
+    <ul class="address-list" v-if="addressList && addressList.length">
+      <li>
+        地址:{{ addressList[0] && addressList[0].name }}
+        <a-button type="primary" size="small" @click="selectLocation(addressList[0], 'li')">
+          确定</a-button
+        >
+      </li>
+      <li class="address-item" v-for="(item, index) in addressList" :key="index">
+        <div @click="selectLocation(item, 'div')">
+          <div class="title">{{ item.name }}</div>
+          <span>{{ item.address }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+/**
+ * @author wenhongling
+ * @desc 腾讯地图
+ * @time 2021-06-28
+ */
+import create from '@/core/create';
+import { Button, Input } from "ant-design-vue";
+import Vue from "vue";
+let _map_i = 0;
+export default create({
+  name: 'map',
+  props: {
+    locationProp: { type: String, default: "" },
+    ak: {
+      type: String,
+      default: "KP3BZ-OAC3W-PY6RY-OJ6DV-JYKN3-H6F72"
+    }
+  },
+  // components: {
+  //   [Button.name]: Button,
+  //   [Input.name]: Input,
+  //   [Input.Search.name]: Input.Search,
+  // },
+  computed: {
+    calculateLocationProp() {
+      return (this.locationProp && JSON.parse(this.locationProp)) || null;
+    }
+  },
+  watch: {
+    location: {
+      handler() {
+        this.drawLocation();
+      },
+      deep: true
+    }
+  },
+  beforeCreate() {
+    Vue.use(Button);
+    Vue.use(Input);
+  },
+  data() {
+    _map_i++;
+    return {
+      searchKey: "",
+
+      centrePoint: {},
+
+      location: { lng: "", lat: "" },
+      localObj: {},
+      map: null,
+      ac: null,
+
+      addressList: [], // 附近地址数组
+      markers: [],
+
+      timeout: null,
+      cMapId: 'map-core' + _map_i
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.reset();
+    // })
+    setTimeout(() => {
+      this.reset();
+    }, 200)
+
+  },
+  methods: {
+    // 初始化地图
+    setMap(qq) {
+      // 设置地图中心点
+      var myLatlng = new qq.maps.LatLng(39.916527, 116.397128);
+      // 定义工厂模式函数
+      var myOptions = {
+        zoom: 12, // 设置地图缩放级别
+        center: myLatlng, // 设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
+      };
+      // 获取dom元素添加地图信息
+      this.map = new qq.maps.Map(document.getElementById(this.cMapId), myOptions);
+      const { lat, lng, address } = this.calculateLocationProp || {};
+      if (lat && lng) {
+        const new_opint = new qq.maps.LatLng(lat, lng);
+        this.handleGeocoder({ latLng: new_opint });
+      } else if (address) {
+        setTimeout(() => {
+          this.searchKeyword(address);
+        }, 300);
+      } else {
+        this.getLocation();
+      }
+
+      this.init();
+    },
+
+    hdnelSetMapcenter(location) {
+      const { qq } = this;
+      var new_opint = new qq.maps.LatLng(location.lat, location.lng);
+      this.centrePoint = new_opint;
+      this.map.panTo(new_opint);
+
+      const mk = new qq.maps.Marker({
+        position: new_opint,
+        map: this.map
+      });
+      this.markers.push(mk);
+    },
+
+    getLocation() {
+      const { qq } = this;
+      const geolocation = new qq.maps.Geolocation(this.ak, "qqmap");
+      const options = { timeout: 9000 };
+      const _this = this;
+      function showPosition(r) {
+        if (r && r.module == "geolocation") {
+          _this.location.lng = r.lng;
+          _this.location.lat = r.lat;
+
+          const new_opint = new qq.maps.LatLng(r.lat, r.lng);
+
+          _this.handleGeocoder({ latLng: new_opint });
+          _this.hdnelSetMapcenter({ lat: r.lat, lng: r.lng });
+
+        } else {
+          console.log("用户不允许获取地理位置");
+          _this.location.lng = 113.275;
+          _this.location.lat = 23.117;
+        }
+        // _this.init();
+      }
+      function showErr(err) {
+        console.log(err);
+      }
+      geolocation.getLocation(showPosition, showErr, options);
+    },
+
+    /* 经纬度 解析地址 */
+    handleGeocoder(config = {}) {
+      const { qq } = this;
+      const _this = this;
+      const { latLng } = config;
+      const geocoder = new qq.maps.Geocoder();
+      // 设置服务请求成功的回调函数
+      geocoder.setComplete(function(result) {
+        if (result.type === "GEO_INFO") {
+          var latlngBounds = new qq.maps.LatLngBounds();
+          var nearPois = result.detail.nearPois || [];
+          _this.handleClearOverLays();
+          _this.addressList = nearPois || [];
+          for (let index = 0; index < nearPois.length; index++) {
+            const pois = nearPois[index];
+            var marker = new qq.maps.Marker({
+              map: _this.map
+            });
+            marker.setPosition(pois.latLng);
+
+            marker.setTitle(index + 1);
+            _this.markers.push(marker);
+
+            latlngBounds.extend(pois.latLng);
+          }
+
+          _this.map.fitBounds(latlngBounds);
+        }
+        var location = result.detail.location || {};
+        _this.hdnelSetMapcenter(location);
+        // new qq.maps.Marker({
+        //   map: _this.map,
+        //   position: location
+        // });
+      });
+      // 若服务请求失败，则运行以下函数
+      geocoder.setError(function() {
+        alert("出错了，请输入正确的经纬度！！！");
+      });
+
+      geocoder.getAddress(latLng);
+    },
+
+    init() {
+      const { qq } = this;
+      const _this = this;
+      // 添加dom监听事件
+      qq.maps.event.addDomListener(this.map, "click", function(event) {
+        _this.handleGeocoder({ latLng: event.latLng });
+      });
+    },
+
+    // 点击后根据经纬度绘制地图中的坐标点
+    drawLocation() {},
+
+    initSearch() {
+      const { qq } = this;
+      const _this = this;
+      // 设置Poi检索服务，用于本地检索、周边检索
+      this.searchService = new qq.maps.SearchService({
+        // 检索成功的回调函数
+        complete: function(results) {
+          // 设置回调函数参数
+          var pois = results.detail.pois || [];
+          // var infoWin = new qq.maps.InfoWindow({
+          //   map: _this.map
+          // });
+          var latlngBounds = new qq.maps.LatLngBounds();
+          if (results.type === "CITY_LIST") {
+            _this.searchService.setLocation(results.detail.cities[0].cityName);
+            _this.searchService.search(_this.searchKey);
+            return;
+          }
+
+          _this.addressList = pois || [];
+          _this.handleClearOverLays();
+          if (results.type === "POI_LIST") {
+            for (var i = 0, l = pois.length; i < l; i++) {
+              var poi = pois[i];
+              // 扩展边界范围，用来包含搜索到的Poi点
+              latlngBounds.extend(poi.latLng);
+
+              (function(n) {
+                var marker = new qq.maps.Marker({
+                  map: _this.map
+                });
+                marker.setPosition(pois[n].latLng);
+
+                marker.setTitle(i + 1);
+                _this.markers.push(marker);
+              })(i);
+            }
+          }
+
+          // 调整地图视野
+          _this.map.fitBounds(latlngBounds);
+        },
+        // 若服务请求失败，则运行以下函数
+        error: function(e) {
+          console.log(e);
+          if (e === "NO_RESULTS") {
+            // alert("查无结果！");
+            _this.$message.warning("查无结果！");
+            return;
+          }
+          _this.$message.warning("地址检索先输入城市名称");
+        },
+        autoExtend: true
+      });
+    },
+
+    handleClearOverLays() {
+      if (this.markers && this.markers.length) {
+        this.clearOverlays(this.markers);
+      }
+      this.markers = [];
+    },
+
+    // 清除地图上的marker
+    clearOverlays(overlays) {
+      var overlay;
+      while ((overlay = overlays.pop())) {
+        overlay.setMap(null);
+      }
+    },
+
+    searchOnchange() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.searchKeyword();
+      }, 300);
+    },
+
+    searchKeyword(value) {
+      // const { qq } = this;
+      // let keyword = value;
+      this.searchKey = value;
+      if (!value) {
+        return;
+      }
+
+      if (this.markers && this.markers.length) {
+        this.clearOverlays(this.markers);
+      }
+      // this.addressList = [];
+      // this.markers = [];
+      if(!this.searchService){
+        this.initSearch()
+      }
+      // 根据输入的城市设置搜索范围
+      this.searchService.setLocation("");
+      // 设置搜索页码
+      // searchService.setPageIndex(pageIndex);
+      // 设置每页的结果数
+      this.searchService.setPageCapacity(50);
+      // 根据输入的关键字在搜索范围内检索
+      this.searchService.search(value);
+      // 根据输入的关键字在圆形范围内检索
+      // var region = new qq.maps.LatLng(39.916527,116.397128);
+      // this.searchService.searchNearBy(keyword, this.centrePoint, 200000);
+      // 根据输入的关键字在矩形范围内检索
+      // region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
+      // searchService.searchInBounds(keyword, region);
+    },
+
+    // 寻找附近的pio点
+    nearAddress(point) {
+      this.addressList = [];
+      this.geocoder.getLocation(point, e => {
+        const { addressComponents, surroundingPois } = e;
+        // console.log(e, addressComponents, "附近的点");
+        this.addressList = surroundingPois.map(surround => {
+          return {
+            province: addressComponents.province,
+            address: surround.address,
+            title: surround.title,
+            point: {
+              lat: surround.point.lat,
+              lng: surround.point.lng
+            }
+          };
+        });
+      });
+    },
+
+    // 向父组件传递经纬度
+    selectLocation(item) {
+      const { qq } = this;
+      const _this = this;
+      const { name, address, latLng } = item;
+      const { lat, lng } = latLng;
+      const geocoder = new qq.maps.Geocoder();
+      // 设置服务请求成功的回调函数
+      geocoder.setComplete(function(result) {
+        if (result.type === "GEO_INFO") {
+          const {
+            addressComponents: {
+              province,
+              city,
+              district,
+              country
+              // street, streetNumber
+            }
+            // location: { lat, lng }
+          } = result.detail;
+          const emitData = JSON.stringify({
+            name,
+            address,
+            province,
+            city,
+            district,
+            country,
+            // street,
+            // streetNumber,
+            lat,
+            lng
+          });
+          _this.$emit("selectLocation", {
+            locationProp: emitData,
+            isInit: false
+          });
+        }
+      });
+      // 若服务请求失败，则运行以下函数
+      geocoder.setError(function() {
+        alert("出错了，请输入正确的经纬度！！！");
+      });
+      geocoder.getAddress(latLng);
+    },
+
+    initMap(qq) {
+      this.qq = qq;
+      setTimeout(() => {
+        this.setMap(qq);
+        this.initSearch();
+      }, 0);
+    },
+
+    getMapScript() {
+      if (!global.qq) {
+        const ak = this.ak || this._qq().ak;
+        global.qq = {};
+        global.qq._preloader = new Promise(resolve => {
+          global._initBaiduMap = function() {
+            resolve(global.qq);
+            global.document.body.removeChild($script);
+            global.qq._preloader = null;
+            global._initBaiduMap = null;
+          };
+          const $script = document.createElement("script");
+          global.document.body.appendChild($script);
+          // $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`;
+          $script.src = `https://map.qq.com/api/js?v=2.exp&key=${ak}&callback=_initBaiduMap`;
+
+          const $script1 = document.createElement("script");
+          global.document.body.appendChild($script1);
+          $script1.src = `https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js`;
+
+          // const $script2 = document.createElement("script");
+          // global.document.body.appendChild($script2);
+          // $script2.src = `https://map.qq.com/api/js?v=2.exp&key=${ak}&libraries=place`;
+        });
+        return global.qq._preloader;
+      } else if (!global.qq._preloader) {
+        return Promise.resolve(global.qq);
+      } else {
+        return global.qq._preloader;
+      }
+    },
+
+    reset() {
+      const { getMapScript, initMap } = this;
+      getMapScript().then(initMap);
+    }
+  }
+});
+</script>
+
+<style lang="less" scoped>
+  .map {
+    width: 100%;
+    height: 500px;
+    .map-core {
+      width: 100%;
+      height: 250px;
+    }
+    .search-container {
+      margin-top: 20px;
+      height: 40px;
+      #suggestId {
+        width: 100%;
+      }
+    }
+    .address-list {
+      height: calc(100% - 75px);
+      overflow-y: auto;
+      .address-item {
+        height: 60px;
+        cursor: pointer;
+        padding-top: 10px;
+        .title {
+          font-size: 16px;
+        }
+        span {
+          font-size: 12px;
+          color: #b9b9b9;
+      }
+      &:first-child {
+        height: 57px;
+        padding-top: 20px;
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>