flat: 国庆节暂存

src/components/map/selectLocation3.vue

@@ -6,24 +6,32 @@
       v-if="showInput"
       :placeholder="placeholder || '如：北京市延庆区延庆镇莲花池村前街50夕阳红养老院'"
     ></el-input>
-    <div class="mapDiv" id="mapDiv" style="width: 100%;height: 300px;"></div>
+    <div class="mapDiv" id="mapDiv" ref="mapDiv" style="width: 100%;height: 300px;"></div>
   </div>
 </template>
 
 <script>
 import {debounce} from '@/util/util';
 
-const script = document.createElement('script')
 let origin = ''
 if (window.location.origin.search('localhost') > 0) {
   origin = 'http://10.165.0.173'
 } else {
   origin = window.location.origin
 }
-script.src = origin + '/tianditu/api?v=4.0&tk=' + process.env.VUE_APP_TIANDITU_APIKEY
-script.onload = () => console.warn('-----------天地图加载完成-----------')
-document.head.appendChild(script)
-let Tmap = null;
+loadJS()
+
+function loadJS() {
+  const script = document.createElement('script')
+  script.type = 'text/javascript';
+  script.src = origin + '/tianditu/api?v=4.0&tk=' + process.env.VUE_APP_TIANDITU_APIKEY
+  script.onload = function () {
+    T.Protocol.value = origin + '/'
+    console.warn('-----------天地图加载完成-----------')
+  };
+  document.head.appendChild(script);
+}
+
 export default {
   data() {
     return {
@@ -31,6 +39,7 @@ export default {
       addressLocation: '',
       baseUrl: '',
       isInput: true,
+      Tmap: null,
     }
   },
   props: {
@@ -172,10 +181,10 @@ export default {
       }).then(({data}) => {
         if (data.status === '0') {
           const {keyWord, lon, lat, level} = data.location
-          if (!Tmap) {
+          if (!this.Tmap) {
             this.createTmap(lon, lat)
           } else {
-            Tmap.centerAndZoom(new T.LngLat(lon, lat), 15);
+            this.Tmap.centerAndZoom(new T.LngLat(lon, lat), 15);
             this.setIcon(lon, lat);
             this.$emit('addAddress', {
               address: this.addressLocation,
@@ -191,23 +200,23 @@ export default {
     createTmap(lng, lat) {
       const _this = this
       this.$nextTick(() => {
-        console.log(Tmap)
-        if (!Tmap) {
-          Tmap = new T.Map('mapDiv', {
+        if (!this.Tmap) {
+          this.Tmap = new T.Map(this.$refs.mapDiv, {
             projection: 'EPSG:4326',
             minZoom: this.minZoom,
             maxZoom: this.maxZoom
           });
-          Tmap.addEventListener('click', (e) => {
+          this.Tmap.addEventListener('click', (e) => {
             _this.nextPoint(e.lnglat)
           });
         }
-        Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
+        console.log(this.Tmap)
+        this.Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
         this.setIcon(lng, lat);
       })
     },
     setIcon(lng, lat) {
-      Tmap.clearOverLays()
+      this.Tmap.clearOverLays()
       const icon = new T.Icon({
         iconUrl: '/img/point.png',
         iconSize: new T.Point(30, 30),
@@ -216,7 +225,7 @@ export default {
       const marker = new T.Marker(new T.LngLat(lng, lat), {
         icon
       });
-      Tmap.addOverLay(marker);
+      this.Tmap.addOverLay(marker);
     },
     nextPoint(lnglat) {
       var that = this;