map view

.eslintrc.js

@@ -114,5 +114,6 @@ module.exports = {
     AsideTree: true,
     $useMap: true,
     BaiduMap: true,
+    BaiduMapModal: true,
   },
 }

src/main/resources/web/assets/css/rb-page.css

@@ -4425,4 +4425,11 @@ pre.unstyle {
   width: 100%;
   height: 100%;
   background-color: #eee;
+  position: relative;
+}
+
+.map-modal.modal .modal-dialog,
+.map-modal.modal .modal-content {
+  max-width: 1000px;
+  box-shadow: none;
 }

src/main/resources/web/assets/js/rb-components.js

@@ -980,6 +980,7 @@ UserPopup.create = function (el) {
 }
 
 // 百度地图
+// https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a1b0
 class BaiduMap extends React.Component {
   render() {
     return <div className="map-container" ref={(c) => (this._$container = c)} />
@@ -987,44 +988,36 @@ class BaiduMap extends React.Component {
 
   componentDidMount() {
     const that = this
-
     $useMap(() => {
       const _BMapGL = window.BMapGL
       const map = new _BMapGL.Map(that._$container)
-      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
+      map.enableScrollWheelZoom(true)
+
       that._map = map
 
       // 初始位置
-      const latlng = that.props.latlng
-      if (latlng) {
-        const point = new _BMapGL.Point(latlng.lng, latlng.lat)
-        map.centerAndZoom(point, 12)
-        map.addOverlay(new _BMapGL.Marker(point))
+      if (that.props.lnglat) {
+        that.center(that.props.lnglat)
       } else {
         map.centerAndZoom('北京市', 12)
-
-        // 初始定位
         const geo = new _BMapGL.Geolocation()
-        geo.getCurrentPosition(function (r) {
+        geo.getCurrentPosition(function (e) {
           if (this.getStatus() === window.BMAP_STATUS_SUCCESS) {
-            map.addOverlay(new _BMapGL.Marker(r.point))
-            map.panTo(r.point)
+            map.panTo(e.point)
           } else {
             console.log('Geolocation failed :', this.getStatus())
           }
         })
       }
 
-      // 点选
+      // 允许点选
       if (that.props.canPin) {
         map.addEventListener('click', function (e) {
           map.clearOverlays()
           const latlng = e.latlng
-          const marker = new _BMapGL.Marker(new _BMapGL.Point(latlng.lng, latlng.lat), {
-            enableDragging: false,
-          })
+          const marker = new _BMapGL.Marker(new _BMapGL.Point(latlng.lng, latlng.lat))
           map.addOverlay(marker)
-          that.geoc(latlng, (val) => {
+          that._geoc(latlng, (val) => {
             typeof that.props.onPin === 'function' && that.props.onPin(val)
           })
         })
@@ -1037,39 +1030,106 @@ class BaiduMap extends React.Component {
           console.log('onSearchComplete', r)
         },
       })
-      that.props.s && that.search(that.props.s)
+      // that.props.s && that.search(that.props.s)
 
       // 地址解析
       that._mapGeoc = new _BMapGL.Geocoder()
     })
   }
 
-  geoc(latlng, call) {
+  _geoc(latlng, call) {
     this._mapGeoc.getLocation(latlng, (r) => {
-      const val = { address: r.address, lat: latlng.lat, lng: latlng.lng }
-      typeof call === 'function' ? call(val) : console.log(val)
+      const v = {
+        lng: latlng.lng,
+        lat: latlng.lat,
+        address: r.address,
+      }
+      typeof call === 'function' ? call(v) : console.log(v)
     })
   }
 
+  center(lnglat) {
+    const _BMapGL = window.BMapGL
+    const map = this._map
+
+    const point = new _BMapGL.Point(lnglat.lng, lnglat.lat)
+    if (map.isLoaded()) {
+      map.clearOverlays()
+      // map.panTo(point)
+      map.flyTo(point)
+    }
+
+    map.addOverlay(
+      new _BMapGL.Marker(point, {
+        title: lnglat.address || '',
+      })
+    )
+
+    if (!map.isLoaded()) {
+      map.centerAndZoom(point, 12)
+    }
+  }
+
   search(s) {
     this._mapLocalSearch.search(s)
   }
 
-  // ~~ Usage
+  destroy() {
+    this._map.destroy()
+  }
+}
 
-  /**
-   * @param {object} latlng
-   */
-  static view(latlng) {
-    const title = latlng.address ? `${$L('位置')} : ${latlng.address}` : $L('地图')
-    renderRbcomp(
-      <RbModal title={title} noPadding ref={(c) => (this._dlg = c)} width={880}>
-        <div style={{ height: 600 }}>
-          <BaiduMap ref={(c) => (this._BaiduMap = c)} latlng={{ lat: latlng.lat, lng: latlng.lng }} />
+class BaiduMapModal extends React.Component {
+  render() {
+    return this.state && this.state.destroy === true ? null : (
+      <div className="modal map-modal" ref={(c) => (this._$modal = c)}>
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-body p-0">
+              <div style={{ height: 500 }}>
+                <BaiduMap ref={(c) => (this._BaiduMap = c)} lnglat={this.props.lnglat} />
+              </div>
+            </div>
+          </div>
         </div>
-      </RbModal>
+      </div>
     )
   }
+
+  componentDidMount() {
+    $(this._$modal)
+      .modal({
+        show: true,
+        keyboard: false,
+      })
+      .on('hidden.bs.modal', () => {
+        $keepModalOpen()
+      })
+  }
+
+  show(lnglat) {
+    $(this._$modal).modal('show')
+    setTimeout(() => this._BaiduMap.center(lnglat), 100)
+  }
+
+  destroy() {
+    this._BaiduMap.destroy()
+    this.setState({ destroy: true })
+  }
+
+  // ~~ Usage
+  /**
+   * @param {object} lnglat
+   */
+  static view(lnglat) {
+    if (BaiduMapModal._ViewModal) {
+      BaiduMapModal._ViewModal.show(lnglat)
+    } else {
+      renderRbcomp(<BaiduMapModal lnglat={lnglat} />, null, function () {
+        BaiduMapModal._ViewModal = this
+      })
+    }
+  }
 }
 
 /**

src/main/resources/web/assets/js/rb-datalist.js

@@ -713,8 +713,8 @@ CellRenders.addRender('LOCATION', function (v, s, k) {
           href={`#!/Map:${v[1]}`}
           onClick={(e) => {
             $stopEvent(e, true)
-            const latlng = v[1].split(',')
-            BaiduMap.view({ lng: latlng[0], lat: latlng[1], address: v[0] })
+            const lnglat = v[1].split(',')
+            BaiduMapModal.view({ lng: lnglat[0], lat: lnglat[1], address: v[0] })
           }}>
           {v[0]}
         </a>

src/main/resources/web/assets/js/rb-forms.js

@@ -1757,13 +1757,18 @@ class RbFormLocation extends RbFormElement {
     if (!value) return super.renderViewElement()
 
     const vals = typeof value === 'object' ? value : value.split('$$$$')
-    const latlng = vals[1].split(',')
+    let lnglat = vals[1].split(',')
+    lnglat = {
+      lng: lnglat[0],
+      lat: lnglat[1],
+      address: vals[0],
+    }
 
-    return !this.props.locationMapOnView ? (
+    return this.props.locationMapOnView ? (
       <div>
         <div className="form-control-plaintext">{vals[0]}</div>
         <div className="map-show">
-          <BaiduMap latlng={{ lng: latlng[0], lat: latlng[1] }} />
+          <BaiduMap lnglat={lnglat} ref={(c) => (this._BaiduMap = c)} />
         </div>
       </div>
     ) : (
@@ -1772,7 +1777,7 @@ class RbFormLocation extends RbFormElement {
           href={`#!/Map:${vals[1]}`}
           onClick={(e) => {
             $stopEvent(e, true)
-            BaiduMap.view({ lng: latlng[0], lat: latlng[1], address: vals[0] })
+            BaiduMapModal.view(lnglat)
           }}>
           {vals[0]}
         </a>
@@ -1804,6 +1809,15 @@ class RbFormLocation extends RbFormElement {
       )
     }
   }
+
+  onEditModeChanged(destroy) {
+    if (destroy) {
+      if (this._BaiduMap) {
+        this._BaiduMap.destroy()
+        this._BaiduMap = null
+      }
+    }
+  }
 }
 
 // 不支持/未开放的字段