t

src/views/map/dtl.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="scoped-top-tips">洪楼plus小程序提示：点击图中区域、楼盘、学校可查看更多</div>
+    <div class="scoped-top-tips">洪楼plus小程序</div>
     <div class="scoped-bg"></div>
     <div v-if="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' || $route.query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5'" class="scoped-tab">
       <div @click="linkChange('95542fdc-b542-4582-9be2-9ab8005728d3')" :class="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' ? 'op cur' : 'op'">小学</div>
@@ -51,11 +51,9 @@
           :offset="marker.offset"
           :extData="{index}"
           :icon="marker.icon"
-          :title="marker.text"
           :events="markersEvents">
-          <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.text}}</div>
+          <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.content}}</div>
         </el-amap-marker>
-          <!-- :label="{content: marker.text}" -->
       </template>
       <template v-else>
         <template v-if="mapDiyObj.isAreaShow === '1'">
@@ -84,6 +82,7 @@
         :strokeColor="polygon.strokeColor"
         :strokeWeight="polygon.strokeWeight"
         :strokeOpacity="polygon.strokeOpacity"
+        :strokeStyle="polygon.strokeStyle"
         :extData="{index}"
         :events="polygonEvents">
       </el-amap-polygon>
@@ -96,10 +95,13 @@
         :strokeColor="polyline.strokeColor"
         :strokeWeight="polyline.strokeWeight"
         :strokeOpacity="polyline.strokeOpacity"
+        :strokeStyle="polyline.strokeStyle"
         :extData="{index}"
         :events="polylineEvents"
         :path="polyline.path">
       </el-amap-polyline>
+      <!-- closeWhenClickMap="true"  -->
+      <el-amap-info-window :isCustom="true" :position="winObj.position" :content="winObj.content"></el-amap-info-window>
     </el-amap>
   </div>
 </template>
@@ -113,6 +115,7 @@ export default {
   data() {
     const that = this
     return {
+      isImgShow: false,
       polylines: [],
       estateList: [],
       schoolList: [],
@@ -129,6 +132,10 @@ export default {
         zooms: [15, 19],
       },
       amapManager,
+      winObj: {
+        position: [115.852386, 28.684076],
+        content: '',
+      },
       polygons: [
         // {
         //   path: [[115.823481,28.702359],[115.861933,28.672241],[115.812838,28.629609],[115.793784,28.657179]],
@@ -155,23 +162,23 @@ export default {
             var layerControl = new BasicControl.LayerSwitcher({
               baseLayers: [
                 {
-                  id: 'basic',//图层id，需唯一
+                  id: 'Satellite',//图层id，需唯一
                   enable: true, //是否启用
-                  name: '基础地图',//显示名称，html
-                  layer: new AMap.TileLayer()
+                  name: '卫星图',//显示名称，html
+                  layer: new AMap.TileLayer.Satellite()
                 },
                 {
-                  id: 'Satellite',//图层id，需唯一
+                  id: 'basic',//图层id，需唯一
                   enable: false, //是否启用
-                  name: '卫星图',//显示名称，html
-                  layer: new AMap.TileLayer.Satellite()
+                  name: '基础地图',//显示名称，html
+                  layer: new AMap.TileLayer()
                 },
               ],
               overlayLayers:[
               ],
               position: {
-                bottom:'50px',
-                right:'30px',
+                left:'230px',
+                top:'2px',
               },
             });
             map.addControl(layerControl);
@@ -191,6 +198,8 @@ export default {
       },
       markersEvents: {
         dragend(e) {
+          const eData = e.target.getExtData()
+          that.curMarkersIndex = eData.index
           const { lng, lat } = e.lnglat
           let markerData = JSON.parse(JSON.stringify(that.markerData))
           markerData[that.curMarkersIndex].position = [lng, lat]
@@ -205,7 +214,85 @@ export default {
         click(e) {
           const eData = e.target.getExtData()
           that.polygonIndex = eData.index
-          // wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
+          const lnglatObj = e.lnglat
+          const cObj = that.polygons[that.polygonIndex]
+          const estateObj = cObj.estateObj ? JSON.parse(cObj.estateObj) : {}
+          const schoolObj = cObj.schoolObj ? JSON.parse(cObj.schoolObj) : {}
+          const typeObj = {
+            '#fb6557': '专本科',
+            '#ff9149': '幼儿园',
+            '#ff0': '新楼盘',
+            '#9f7df4': '二手房',
+            '#ff7fbf': '教育用地',
+            '#ff003f': '商业用地',
+            '#007299': '公用设施',
+            '#00ff3f': '公园用地',
+            '#4da4ee': '医院用地',
+          }
+          that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
+          if (estateObj.id) {
+            const ptObj = {
+              bs: "别墅",
+              cgc: "超高层",
+              dc: "低层",
+              dpc: "大平层",
+              ds: "叠墅",
+              gc: "高层",
+              gy: "公寓",
+              other: "其它",
+              ptyf: "普通洋房",
+              ttyf: "退台洋房",
+              xgc: "小高层",
+              xsdyf: "新时代洋房"
+            }
+            const ptArr = estateObj.product_type.split(',')
+            let ptStrArr = []
+            ptArr.forEach(n => {
+              ptStrArr.push(ptObj[n])
+            })
+            const productTypeStr = ptStrArr.join(',')
+            that.winObj.content = `
+              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
+                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
+                <div style="display: flex;padding-left: 10px;">
+                  <div style="width: 100px;">
+                    <img style="width: 100px;height: auto;" src="${estateObj.pri_image}_xs" />
+                  </div>
+                  <div style="width: 160px;">
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">价格：￥${estateObj.price_range}</div>
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">物业：${estateObj.property_type}</div>
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">产品：${productTypeStr}</div>
+                  </div>
+                </div>
+              </div>
+            `
+          } else if (schoolObj.id) {
+            const saObj = arrToObj(that.$dictData.school_attrib)
+            const stObj = arrToObj(that.$dictData.school_type)
+            that.winObj.content = `
+              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
+                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
+                <div style="display: flex;padding-left: 10px;">
+                  <div style="width: 100px;">
+                    <img style="width: 100px;height: auto;" src="${schoolObj.pri_image}_xs" />
+                  </div>
+                  <div style="width: 260px;">
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">${saObj[schoolObj.school_attrib]}、${stObj[schoolObj.school_type]}</div>
+                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">备注：${schoolObj.remarked}</div>
+                  </div>
+                </div>
+              </div>
+            `
+          } else {
+            that.winObj.content = `
+              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
+                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: center;">${cObj.text}</div>
+                <div style="padding: 0 10px 10px;color: #999;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
+                <div style="padding: 0 10px 10px;color: #999;">状态：${cObj.strokeStyle === 'dashed' ? '规划中' : '已规划'}</div>
+              </div>
+            `
+          }
         },
       },
       polylineEvents: {
@@ -240,7 +327,7 @@ export default {
       }],
       mteStr: 'polygonAdd',
       mteObj: {},
-    dictData: {
+      dictData: {
         sys_yesno: [
           {key: '是', val: '1'},
           {key: '否', val: '2'},
@@ -421,63 +508,63 @@ export default {
   computed: {},
   created() {
     this.getData()
-    this.$api.base.apiareainfolist().then(areaArr => {
-      const arr = areaArr.map((a, aIndex) => {
-        return {
-          key: aIndex,
-          val: a.option1,
-          longitude: a.longitude,
-          latitude: a.latitude,
-          areaName: a.area_name,
-        }
-      })
-      this.$api.base.admmapcoordinall().then(res => {
-        let estateList = res.estate_list || []
-        estateList.map(item => {
-          item.position = [item.longitude, item.latitude]
-        })
-        this.estateList = [...estateList]
+    // this.$api.base.apiareainfolist().then(areaArr => {
+    //   const arr = areaArr.map((a, aIndex) => {
+    //     return {
+    //       key: aIndex,
+    //       val: a.option1,
+    //       longitude: a.longitude,
+    //       latitude: a.latitude,
+    //       areaName: a.area_name,
+    //     }
+    //   })
+      // this.$api.base.admmapcoordinall().then(res => {
+      //   let estateList = res.estate_list || []
+      //   estateList.map(item => {
+      //     item.position = [item.longitude, item.latitude]
+      //   })
+      //   this.estateList = [...estateList]
 
-        const query = this.$route.query
-        if (query.id === '95542fdc-b542-4582-9be2-9ab8005728d3') {
-          let small_school_list = res.small_school_list || []
-          small_school_list.map(item => {
-            item.position = [item.longitude, item.latitude]
-          })
-          this.schoolList = [...small_school_list]
-        } else if (query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5') {
-          let medium_school_list = res.medium_school_list || []
-          medium_school_list.map(item => {
-            item.position = [item.longitude, item.latitude]
-          })
-          this.schoolList = [...medium_school_list]
-        } else {
-          let schoolList = res.school_list || []
-          schoolList.map(item => {
-            item.position = [item.longitude, item.latitude]
-          })
-          this.schoolList = [...schoolList]
-        }
+      //   const query = this.$route.query
+      //   if (query.id === '95542fdc-b542-4582-9be2-9ab8005728d3') {
+      //     let small_school_list = res.small_school_list || []
+      //     small_school_list.map(item => {
+      //       item.position = [item.longitude, item.latitude]
+      //     })
+      //     this.schoolList = [...small_school_list]
+      //   } else if (query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5') {
+      //     let medium_school_list = res.medium_school_list || []
+      //     medium_school_list.map(item => {
+      //       item.position = [item.longitude, item.latitude]
+      //     })
+      //     this.schoolList = [...medium_school_list]
+      //   } else {
+      //     let schoolList = res.school_list || []
+      //     schoolList.map(item => {
+      //       item.position = [item.longitude, item.latitude]
+      //     })
+      //     this.schoolList = [...schoolList]
+      //   }
 
 
-        let areaList = res.area_total || []
-        let newAreaList = []
-        areaList.forEach(item => {
-          // let lnglatArr = arrToObj(this.dictData.map_area_lnglat)[item.area_type].split(',')
-          // item.position = [lnglatArr[0], lnglatArr[1]]
-          // item.areaName = arrToObj(this.dictData.area_type)[item.area_type]
-          const areaIndex = arrToObj(arr)[item.area_type]
-          if (arr[areaIndex] && arr[areaIndex].longitude) {
-            newAreaList.push({
-              ...item,
-              position: [arr[areaIndex].longitude, arr[areaIndex].latitude],
-              areaName: arr[areaIndex].areaName
-            })
-          }
-        })
-        this.areaList = [...newAreaList]
-      })
-    })
+      //   let areaList = res.area_total || []
+      //   let newAreaList = []
+      //   areaList.forEach(item => {
+      //     // let lnglatArr = arrToObj(this.dictData.map_area_lnglat)[item.area_type].split(',')
+      //     // item.position = [lnglatArr[0], lnglatArr[1]]
+      //     // item.areaName = arrToObj(this.dictData.area_type)[item.area_type]
+      //     const areaIndex = arrToObj(arr)[item.area_type]
+      //     if (arr[areaIndex] && arr[areaIndex].longitude) {
+      //       newAreaList.push({
+      //         ...item,
+      //         position: [arr[areaIndex].longitude, arr[areaIndex].latitude],
+      //         areaName: arr[areaIndex].areaName
+      //       })
+      //     }
+      //   })
+      //   this.areaList = [...newAreaList]
+      // })
+    // })
   },
   mounted() {},
   methods: {
@@ -501,6 +588,12 @@ export default {
       }).then(res => {
         if (res.data) {
           const data = JSON.parse(res.data)
+          this.winObj = {
+            content: `
+            <div style="font-weight: bold;color:#409eff;padding: 10px 10px;background:#fff;border-radius: 6px;user-select: none;">${data.mapDiyObj.title}</div>
+            `,
+            position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
+          }
           this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
           this.polygons = [...data.polygons]
           this.markerData = [...data.markerData]
@@ -522,10 +615,9 @@ export default {
           }
         }
         document.title = res.title || '洪楼地图1'
-        // this.getDef()
       })
     },
-    
+
   }
 }
 </script>