后台管理系统添加地图

admin-hanhai-vue/package.json

@@ -3,7 +3,7 @@
   "version": "3.1.0",
   "private": true,
   "scripts": {
-    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
+    "pre": "cnpm install || yarn --registry https://registry.npmmirror.com || npm install --registry https://registry.npmmirror.com ",
     "serve": "vue-cli-service serve",
     "build:test": "vue-cli-service build --mode test",
     "build": "vue-cli-service build",
@@ -35,6 +35,7 @@
     "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
+    "vue-jsonp": "^2.0.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
     "vue-photo-preview": "^1.1.3",

admin-hanhai-vue/src/main.js

@@ -49,6 +49,8 @@ import '@/components/jeecg/JVxeTable/install'
 import '@/components/JVxeCells/install'
 //表单验证
 import { rules } from '@/utils/rules'
+import { VueJsonp } from 'vue-jsonp'
+Vue.use(VueJsonp)
 Vue.prototype.rules = rules
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)

admin-hanhai-vue/src/views/system/modules/HotelShopForm.vue

@@ -53,6 +53,15 @@
               <a-input v-model="model.longitude" placeholder="请输入经度"  ></a-input>
             </a-form-model-item>
           </a-col>
+          <a-col :span="24">
+            <a-form-model-item label="地图选择位置" :labelCol="labelCol" :wrapperCol="wrapperCol" >
+              <TencentMapPicker
+                :latitude="model.latitude"
+                :longitude="model.longitude"
+                @onLocationSelected="handleLocationSelected"
+              />
+            </a-form-model-item>
+          </a-col>
           <a-col :span="24">
             <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
               <a-input v-model="model.address" placeholder="请输入地址"  ></a-input>
@@ -88,10 +97,12 @@
 
   import { httpAction, getAction } from '@/api/manage'
   import { validateDuplicateValue } from '@/utils/util'
+  import TencentMapPicker from './TencentMapPicker.vue';
 
   export default {
     name: 'HotelShopForm',
     components: {
+      TencentMapPicker
     },
     props: {
       //表单禁用
@@ -137,6 +148,11 @@
       this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
+      handleLocationSelected({latitude, longitude}) {
+        console.log('event',latitude, longitude)
+        this.model.latitude = latitude;
+        this.model.longitude = longitude;
+      },
       add () {
         this.edit(this.modelDefault);
       },

admin-hanhai-vue/src/views/system/modules/TencentMapPicker.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+      <div class="map-box">
+          <div class="map" ref="map" style="height: 400px" ></div>
+          <div class="map-search">
+              <div>
+                  <a-input-search id="place" v-model="searchValue" placeholder="请输入详细地址" enter-button @search="searchAddress(searchValue)" />
+              </div>
+              <div>
+                  <ul v-if="kwData.length">
+                      <li v-for="(item, index) in kwData" :key="index" @click="selectKeyword(item)">{{ item.address }}</li>
+                  </ul>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TencentMapPicker',
+  props: {
+      latitude: {
+          type: Number|String,
+          default: 0
+      },
+      longitude: {
+          type: Number|String,
+          default: 0
+      }
+  },
+  watch: {
+      latitude(newVal, oldVal) {
+          console.info(`newVal`,newVal,`oldVal`,oldVal)
+          if (newVal) {
+              this.form.latitude = newVal
+              // this.$nextTick(()=>{
+              //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              // })
+          }
+      },
+      longitude(newVal, oldVal) {
+          console.info(`newVal`,newVal,`oldVal`,oldVal)
+          if (newVal) {
+              this.form.longitude = newVal
+              // this.$nextTick(()=>{
+              //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              // })
+          }
+      }
+  },
+  data() {
+      return {
+          searchValue: '', //地图搜索
+          form: {
+              longitude: 116.397128,
+              latitude: 39.916527
+          },
+          kwData:[]
+      }
+  },
+  mounted() {
+      let that = this
+      if (that.script) return;
+      that.script = document.createElement('script');
+      that.script.type = 'text/javascript';
+      that.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=XHJBZ-JNL3U-LOHVO-G5LSQ-SPQ4S-AWFN4`;
+      document.head.appendChild(that.script);
+      that.script.onload = () => {
+          window.initMap = that.initMap;
+          that.$nextTick(() => {
+              that.initMap();
+          });
+      };
+  },
+  methods: {
+      // 地图
+      initMap() {
+          // 搜索类
+          this.searchEr = new window.TMap.service.Search({ pageSize: 15 });
+          // 地图主类
+          this.map = new window.TMap.Map(this.$refs.map, {
+              backgroundColor: '#f7f7f7',
+              mapStyleId: 'style1',
+              zoom: 14,
+              mapTypeControlOptions: {
+                  mapTypeIds: [],
+              },
+              draggableCursor: 'crosshair',
+              center: new window.TMap.LatLng(this.form.latitude, this.form.longitude),
+          });
+          // 图层类
+          this.markerLayer = new window.TMap.MultiMarker({
+              map: this.map,
+              geometries: [],
+          });
+          // 地址逆解析
+          this.geocoder = new window.TMap.service.Geocoder();
+          const setMarker = () => {
+              const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
+              this.markerLayer.setGeometries([]);
+              let geometries = this.markerLayer.getGeometries();
+              geometries.push({
+                  id: '-1',
+                  position: latlng,
+              });
+              this.markerLayer.updateGeometries(geometries);
+          };
+          this.map.on('click', (e) => {
+              this.form.longitude = e.latLng.getLng(); // 经度
+              this.form.latitude = e.latLng.getLat(); // 纬度
+              
+              setMarker();
+              this.getAddressFormat();
+          });
+          if (this.form.longitude) {
+              this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              setMarker();
+          }
+      },
+      selectKeyword(event){
+          this.map.setCenter(new window.TMap.LatLng(event.location.lat, event.location.lng));
+          this.kwData = []
+      },
+      // 地图搜索
+      searchAddress(keyword = '') {
+          if (!keyword) return;
+          this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
+              key: 'XHJBZ-JNL3U-LOHVO-G5LSQ-SPQ4S-AWFN4',
+              output: 'jsonp',
+              keyword: keyword,
+          }).then((res) => {
+              console.log(`res`,res)
+              if (res.status === 0) {
+                  this.kwData = res.data
+              } else {
+                  this.kwData = []
+              }
+          }).catch((e) => {
+              console.log(e)
+          })
+          this.markerLayer.setGeometries([]);
+          this.searchEr.searchRectangle({
+                  keyword,
+                  bounds: this.map.getBounds(),
+              })
+              .then((result) => {
+                  console.info(`result`,result)
+                  const { location = {} } = result.data[0] || {};
+                  const { lat = 39.916527, lng = 116.397128 } = location;
+                  this.map.setCenter(new window.TMap.LatLng(lat, lng));
+                  result.data.forEach((item, index) => {
+                      let geometries = this.markerLayer.getGeometries();
+                      // 点标注数据数组
+                      geometries.push({
+                          id: String(index),
+                          position: item.location,
+                      });
+                      // 绘制地点标注
+                      this.markerLayer.updateGeometries(geometries);
+                  });
+              });
+      },
+      getAddressFormat() {
+          const { longitude, latitude } = this.form;
+          this.geocoder
+              .getAddress({
+                  location: new window.TMap.LatLng(latitude, longitude),
+              })
+              .then((res) => {
+                  const {
+                      formatted_addresses: { recommend = '' },
+                  } = res.result || {};
+                  this.searchValue = recommend
+                  this.form.hotelDetailAddress = recommend;
+                  this.$emit('onLocationSelected', this.form);
+                  console.log(this.form);
+              });
+      },
+  }
+}
+</script>
+<style>
+.map-box {
+  position: relative;
+
+}
+.map-search {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 300px;
+
+}
+
+button {
+  border-radius: 0;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.time {
+  margin-top: 15px;
+  width: 100%;
+  font-size: 12px;
+  flex-wrap: wrap;
+  height: 70%;
+}
+ul{
+  background: white;
+  list-style-type: none;
+  padding-left: 0px;
+  height: 280px;
+  overflow: scroll;
+}
+li{
+  padding-left: 6px;
+  font-size: 10px;
+  text-align: left;
+  height: 40px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+}
+li:hover{
+  cursor: pointer;
+  background: #f5f5f5;
+}
+</style>