地图

.env.development

@@ -10,9 +10,9 @@ VUE_APP_ZL_JF='/blade-api'
 VUE_APP_ZL_WSS_ZP_BT='/subsidy'
 
 # 高德地图key
-VITE_APP_AMAP_KEY = '017ac002b4b1a16ec87b2182b17bbed9'
+VUE_APP_AMAP_KEY = '017ac002b4b1a16ec87b2182b17bbed9'
 # 高德地图密钥
-VITE_APP_AMAP_SECURITY = '0f17176ade9bdeee2ed7b9990e6423bd'
+VUE_APP_AMAP_SECURITY = '0f17176ade9bdeee2ed7b9990e6423bd'
 
 VUE_APP_ZL_HEALTH='/zhylsia'
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,

.env.production

@@ -1,5 +1,5 @@
 # just a flag
-ENV = 'development'
+ENV = 'production'
 
 # base api
 VUE_APP_BASE_API = 'https://test.poteviohealth.com/pmgw'
@@ -11,9 +11,9 @@ VUE_APP_ZL_WSS_ZP = 'https://web.poteviohealth.com/prod-api'
 VUE_APP_ZL_WSS_ZP_BT = 'https://test.poteviohealth.com/subsidy'
 
 # 高德地图key
-VITE_APP_AMAP_KEY = '017ac002b4b1a16ec87b2182b17bbed9'
+VUE_APP_AMAP_KEY = '017ac002b4b1a16ec87b2182b17bbed9'
 # 高德地图密钥
-VITE_APP_AMAP_SECURITY = '0f17176ade9bdeee2ed7b9990e6423bd'
+VUE_APP_AMAP_SECURITY = '0f17176ade9bdeee2ed7b9990e6423bd'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

public/index.html

@@ -27,6 +27,7 @@
     <!-- built files will be auto injected -->
 </body>
 <script type="text/javascript" src="https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js"></script>
+<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 <script src="./js/aes.js"></script>
 <script src="./js/index.js"></script>
 

src/views/zhulao/router/router.js

@@ -39,7 +39,7 @@ const routes = [{
               path: '/circleHome',
              name: 'circleHome',
               meta: {
-                  keepAlive: true
+                keepAlive: false
              },
              component: () => import('../views/circle/index.vue')
     },

src/views/zhulao/views/circle/detail.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <van-nav-bar title="中心详情" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
     <div class="loop_image">
-        <van-image :src="institutionsItem.coverImgUrl" lazy-load fit="fill" />
+        <van-image :src="institutionsItem.coverImgUrl" fit="fill" />
     </div>
     <div class="info_top">
         <div class="name_bg">
@@ -43,8 +43,8 @@
 
     <div class="info_center">
         <span class="title">服务详情</span>
-        <div class="content">
-           {{institutionsItem.content}}
+        <div class="contentHtml" v-html="institutionsItem.content">
+           
         </div>
     </div>
 
@@ -119,6 +119,13 @@ export default {
   padding: 10px;
   box-sizing: border-box;
 }
+.contentHtml {
+  overflow: hidden;
+  img {
+    max-width: calc(100% - 60px);
+    height: auto;
+  }
+}
 .info_center .title {
   display: inline-block;
   width: auto;

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

@@ -26,7 +26,7 @@ import Tabbar from '../../components/Tabbar.vue'
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { institutional,institutions_search} from '../../api/index.js'
 window._AMapSecurityConfig = {
-  securityJsCode: '0f17176ade9bdeee2ed7b9990e6423bd',
+  securityJsCode: process.env.VUE_APP_AMAP_SECURITY,
 };
 const radius = 2500 //圆半径
 var map
@@ -57,27 +57,40 @@ export default {
         addMarkersList:[]
       }
     },
-    mounted() {
-      this.mapInit()
+    async mounted() {
+      let that = this;
+      //1.  调用爱山东获取经纬度
+      lightAppJssdk.map.getLocation ({
+          success:function(data){ //成功
+            that.latitude =String(data.latitude)
+            that.longitude =String(data.longitude) 
+            that.mapInit()
+          },
+          fail:function(err){ //错误
+            that.mapInit()
+          }
+      })
+
+      // 2. 开发使用
+      // that.mapInit()
+     
     },
     created() {
       window.jumpDetailTap=(id)=>{
-        
-         console.log('跳转到详情页:'+id);
           this.$router.push({path:'/detail',query:{institutionsId:id}})
       }
-      this.getInstitutional()
-      this.getInstitutions_search()
+      // this.getInstitutional()
+      // this.getInstitutions_search()
     },
   methods: {
     async getInstitutional() {
       var institutionalData = await institutional();
-      institutionalData.data.splice(0, 0, this.allInfo);
+      // institutionalData.data.splice(0, 0, this.allInfo);
       this.categorieList = institutionalData.data
+      this.clickTab(this.categorieList[0].id)
     },
 
      async getInstitutions_search() {
-      console.log('tab点击2:')
       this.removeMarkers()
       var institutionSearch = await institutions_search({
         "radius": radius,
@@ -85,13 +98,10 @@ export default {
         "lat": this.latitude,
         "lng": this.longitude
       })
-      console.log('tab点击3:'+institutionSearch.rows)
       let markersTemp = []
       institutionSearch.rows.forEach((e, index) => {
         markersTemp.push(this.formatData(e, index))
       });
-      console.log("15分钟搜索接口");
-      console.log(markersTemp);
       this.institutionList = institutionSearch.rows
       this.markers = markersTemp
       this.addMarkers();
@@ -207,53 +217,10 @@ export default {
     },
 
     /**地图初始化 */
-    async initMap() {
-        await AMapLoader.load({
-          key: "017ac002b4b1a16ec87b2182b17bbed9", //process.env.VITE_APP_AMAP_KEY,
-          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-          plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        })
-        .then((AMap) => {
-          AMapOut.value = AMap;
-          map.value = new AMap.Map("container_home", {
-            //设置地图容器id
-            center: [114.057999, 22.5436],
-            zoom: 11, //初始化地图级别
-          });
-          
-          var autoOptions = {
-            // 城市，默认全国
-            city: "深圳",
-            // 使用联想输入的input的id
-            input: "address",
-          };
-
-          var autocomplete = new AMap.AutoComplete(autoOptions);
-            placeSearch.value = new AMap.PlaceSearch({
-            city: "深圳",
-            citylimit: true,
-            pageSize: 1, // 单页显示结果条数
-            pageIndex: 1, // 页码
-          });
-          nextTick(()=>{
-            var autocomplete = new AMap.AutoComplete(autoOptions);
-            autocomplete.on("select", function add (e) {
-              address.value = e.poi.name;
-            });
-          })
-        
-        })
-
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-
-
     async  mapInit(){
       let that = this;
       AMapOut =  await AMapLoader.load({
-          "key": "017ac002b4b1a16ec87b2182b17bbed9",   // 申请好的Web端开发者Key，首次调用 load 时必填
+          "key":process.env.VUE_APP_AMAP_KEY,   // 申请好的Web端开发者Key，首次调用 load 时必填
           "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
           "plugins": ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation","AMap.InfoWindow"]  //插件列表
       })
@@ -270,6 +237,10 @@ export default {
         that.longitude = e.lnglat.lng
         that.handleEvent()
       })
+      map.on('complete',function completeSource() {
+        that.getInstitutional()
+      })
+
       mapCircle = new AMapOut.Circle({
           center: new AMapOut.LngLat(that.longitude,that.latitude), // 圆心位置
           radius: radius,  //半径
@@ -292,50 +263,54 @@ export default {
         that.longitude = e.poi.location.lng
         that.handleEvent(e)
       });
-     
-      //  var windowContent =  
-      //   '<div class="custom-content-window">' +
-      //     '测试跳转跳转调准大幅度' +
-      //   '</div>';
-
+    
       infoWindow = new AMapOut.InfoWindow({
         isCustom:true,
-        // content: windowContent,
+        closeWhenClickMap:true,
         anchor: 'top-center',
         offset: [0,-135]
       });
-      var geolocation =new AMapOut.Geolocation({
-        enableHighAccuracy: false,//是否使用高精度定位，默认:true
-        timeout: 30000,          //超过10秒后停止定位，默认：无穷大
-        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
-        convert: true,          //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
-        showButton: true,        //显示定位按钮，默认：true
-        buttonPosition: 'RT',    //定位按钮停靠位置，默认：'LB'，左下角
-        buttonOffset: new AMapOut.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
-        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
-        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
-        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
-        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
 
-      });
-      map.addControl(geolocation);
-      geolocation.getCurrentPosition(function(status,result){
-        if(status=='complete'){
-            onComplete(result)
-        }else{
-            onError(result)
-        }
-      });
-      function onComplete(result) {
-        console.log(result)
+      // var geolocation =new AMapOut.Geolocation({
+      //   enableHighAccuracy: false,//是否使用高精度定位，默认:true
+      //   timeout: 30000,          //超过10秒后停止定位，默认：无穷大
+      //   maximumAge: 0,           //定位结果缓存0毫秒，默认：0
+      //   convert: true,          //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+      //   showButton: true,        //显示定位按钮，默认：true
+      //   buttonPosition: 'RT',    //定位按钮停靠位置，默认：'LB'，左下角
+      //   buttonOffset: new AMapOut.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+      //   showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
+      //   showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
+      //   panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
+      //   zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+
+      // });
+      // map.addControl(geolocation);
+      // geolocation.getCurrentPosition(function(status,result){
+      //   if(status=='complete'){
+      //       onComplete(result)
+      //   }else{
+      //       onError(result)
+      //   }
+      // });
+      // function onComplete(result) {
+      //   console.log(result)
         
-      }
-      function  onError(err) {
-        console.log(err)
-      }
+      // }
+      // function  onError(err) {
+      //   console.log(err)
+      // }
     
     },
 
+    // 从爱山东获取用户位置
+    getLocation() {
+      return new Promise((resolve,reject)=>{
+        
+      })
+     
+    },
+
     // 搜索以及点击地图后的处理
     handleEvent() {
       map.setCenter([this.longitude,this.latitude],true,500)

src/views/zhulao/views/circle/list.vue

@@ -112,6 +112,7 @@ export default {
 }
 .name {
   flex: .8;
+  font-size: 30px;
 }
 .distance_bg {
   flex: .2;
@@ -133,7 +134,7 @@ export default {
   width: 100%;
   height: auto;
   color: #3a3939;
-  font-size: 30px;
+  font-size: 28px;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;