地图

src/views/zhulao/views/circle/index.vue

@@ -11,7 +11,7 @@
       </div>
       <!-- <input bindinput="addressInputAction" id="address" class="text" placeholder="搜索" /> -->
     </div>
-    <van-tabs @click="clickTab" sticky offset-top="80">
+    <van-tabs @click="clickTab" sticky >
       <van-tab v-for="item in categorieList" sticky :key="item.id" :title="item.name" :name="item.id">
       </van-tab>
     </van-tabs>
@@ -64,8 +64,6 @@ export default {
       window.jumpDetailTap=(id)=>{
         
          console.log('跳转到详情页:'+id);
-          // console.log( idTwo)
-          // let id = idOne+idTwo
           this.$router.push({path:'/detail',query:{institutionsId:id}})
       }
       this.getInstitutional()
@@ -110,7 +108,7 @@ export default {
 
     addMarkers() {
       let that = this
-      that.markers.forEach((item, index) => {
+      that.markers.forEach((item) => {
           let markerContent = '' +
           '<div class="custom-content-marker">' +
           '   <img :src="item.iconPath" />' +
@@ -119,7 +117,10 @@ export default {
             position: new AMapOut.LngLat(item.longitude,item.latitude),
             // content:markerContent,
             offset: new AMapOut.Pixel(0, 0),
-            icon: item.iconPath, // 添加 Icon 图标 URL
+            icon:new AMapOut.Icon({
+              image:item.iconPath,
+              imageSize:[28,31]
+            }),
             title: item.id,
             extData:item.id
           });
@@ -134,10 +135,6 @@ export default {
             // console.log('positionInfo:')
             // console.log(positionInfo)
             // 在地图上打开信息窗体
-            let subIdOne =item.id.substring(0,item.id.length-6)
-             let subIdTwo =item.id.substring(item.id.length-6)
-              console.log(subIdOne + ':' +subIdTwo)
-
              var windowContent =  
             '<div class="customCallout" onclick=jumpDetailTap('+'"'+ `${item.id}`+'"'+')>' +
             '<div class="customCallout_top">' +
@@ -171,7 +168,7 @@ export default {
           map.add(marker)
       })
     },
-    formatData(e, index) {
+    formatData(e) {
       var mapIcon = this.getMapIcon(e.institutionalTypeId)
       return {
         id: e.id,
@@ -179,8 +176,8 @@ export default {
         longitude: e.lng,
         // iconPath:e.coverImgUrl ? e.coverImgUrl : '/image/location.png',
         iconPath: mapIcon ? mapIcon : '/image/elderly/location.png',
-        width: 30,
-        height: 35,
+        width: 20,
+        height: 25,
         name:e.name,
         coverImgUrl:e.coverImgUrl,
         contact:e.contact,
@@ -263,16 +260,23 @@ export default {
       map =new AMapOut.Map('container_home', {
         // center: [117.743109, 36.862989],
         center: [that.longitude,that.latitude],
-        zoom: 13,
+        zoom: 13.5,
         resizeEnable : true
       });
+      map.on('click',function mapClick(e) {
+         console.log('点击')
+        console.log(e)
+        that.latitude = e.lnglat.lat
+        that.longitude = e.lnglat.lng
+        that.handleEvent()
+      })
       mapCircle = new AMapOut.Circle({
           center: new AMapOut.LngLat(that.longitude,that.latitude), // 圆心位置
           radius: radius,  //半径
           strokeColor: "#fff",  //线颜色
           strokeOpacity: 1,  //线透明度
           strokeWeight: 2,  //线粗细度
-          fillColor: '#3B82F670',
+          fillColor: '#3B82F6',
           fillOpacity: 0.35 //填充透明度
       });
       map.add(mapCircle);
@@ -286,10 +290,7 @@ export default {
       autocomplete.on("select",  function selectAddress(e) {
         that.latitude = e.poi.location.lat
         that.longitude = e.poi.location.lng
-        map.setCenter([that.longitude,that.latitude],true,500)
-        mapCircle.setCenter(new AMapOut.LngLat(that.longitude,that.latitude))
-        that.removeMarkers();
-        that.getInstitutions_search()
+        that.handleEvent(e)
       });
      
       //  var windowContent =  
@@ -335,6 +336,14 @@ export default {
     
     },
 
+    // 搜索以及点击地图后的处理
+    handleEvent() {
+      map.setCenter([this.longitude,this.latitude],true,500)
+      mapCircle.setCenter(new AMapOut.LngLat(this.longitude,this.latitude))
+      this.removeMarkers();
+      this.getInstitutions_search()
+    },
+
     // 地址栏输入
     addressInputAction(value) {
       console.log('地址栏输入')
@@ -361,6 +370,8 @@ export default {
 .page {
   background-color: #f5f5f5;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .input_bg {
   background-color: white;
@@ -395,7 +406,8 @@ export default {
 
 .map_bg {
   width: 100%;
-  height: calc(100% - 360px);
+  flex: 1;
+  // height: calc(100% - 360px);
 }
 .van-tabs {
   border-bottom: 0;