地图

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

@@ -33,6 +33,7 @@ window._AMapSecurityConfig = {
 };
 const radius = 2500 //圆半径
 var map
+var mapCircle
 var AMapOut
 var infoWindow
 var placeSearch = ''
@@ -55,7 +56,8 @@ export default {
         latitude: 22.5436,
         longitude: 114.057999,
         institutionList: [], //获取的机构
-        markers:[]
+        markers:[],
+        addMarkersList:[]
       }
     },
     mounted() {
@@ -63,11 +65,14 @@ export default {
     },
     created() {
       window.jumpDetailTap=(id)=>{
+        
          console.log('跳转到详情页:'+id);
+          // console.log( idTwo)
+          // let id = idOne+idTwo
           this.$router.push({path:'/detail',query:{institutionsId:id}})
       }
       this.getInstitutional()
-      // this.getInstitutions_search()
+      this.getInstitutions_search()
     },
   methods: {
     async getInstitutional() {
@@ -76,11 +81,12 @@ export default {
       this.categorieList = institutionalData.data
     },
 
-     async getInstitutions_search(naturesType) {
-      console.log('tab点击2:'+naturesType)
+     async getInstitutions_search() {
+      console.log('tab点击2:')
+      this.removeMarkers()
       var institutionSearch = await institutions_search({
         "radius": radius,
-        "institutionalTypeList": naturesType,
+        "institutionalTypeList": this.categoryId,
         "lat": this.latitude,
         "lng": this.longitude
       })
@@ -96,34 +102,53 @@ export default {
       this.addMarkers();
     },
 
+    removeMarkers:function() {
+      if(this.addMarkersList.length>0) {
+        map.clearInfoWindow()
+        map.remove(this.addMarkersList)
+        this.markers = []
+        this.addMarkersList = []
+      }
+    },
+
     addMarkers() {
-      this.markers.forEach((item, index) => {
+      let that = this
+      that.markers.forEach((item, index) => {
           let markerContent = '' +
           '<div class="custom-content-marker">' +
           '   <img :src="item.iconPath" />' +
           '</div>';
-          var marker = new AMapOut.Marker({
+          let marker = new AMapOut.Marker({
             position: new AMapOut.LngLat(item.longitude,item.latitude),
             // content:markerContent,
             offset: new AMapOut.Pixel(0, 0),
             icon: item.iconPath, // 添加 Icon 图标 URL
-            title: item.id
+            title: item.id,
+            extData:item.id
           });
           marker.on('click', markerTap);
-          function markerTap(e) {
+
+          function  markerTap(e) {
             console.log('markerTap:')
             console.log(e)
+             console.log( marker.getExtData())
+              console.log( item.id)
             // var positionInfo = map.getPosition()
             // 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)
+
+              let idTemp = item.id
              var windowContent =  
-            '<div class="customCallout" onclick="jumpDetailTap('+ `${item.id}`+')">' +
+            '<div class="customCallout" onclick="jumpDetailTap('+ `${idTemp}`+')">' +
             '<div class="customCallout_top">' +
               '<img class="icon" src=' + `${item.coverImgUrl}` + ' />' +
               '<div class="callout-right">' +
                 '<div class="title">' +
-                   `${item.name}` +
+                   `${item.name}` +`${idTemp}`+
                 '</div>'+
                 '<div class="name">' +
                   `${item.contact}` + `${item.phone}` +
@@ -143,11 +168,13 @@ export default {
             // });
 
             infoWindow.open(map, [e.lnglat.lng,e.lnglat.lat]);
-          }
+      }
+
+        
+          that.addMarkersList.push(marker)
           map.add(marker)
       })
     },
-
     formatData(e, index) {
       var mapIcon = this.getMapIcon(e.institutionalTypeId)
       return {
@@ -231,6 +258,7 @@ export default {
 
 
     async  mapInit(){
+      let that = this;
       AMapOut =  await AMapLoader.load({
           "key": "017ac002b4b1a16ec87b2182b17bbed9",   // 申请好的Web端开发者Key，首次调用 load 时必填
           "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -238,12 +266,12 @@ export default {
       })
       map =new AMapOut.Map('container_home', {
         // center: [117.743109, 36.862989],
-        center: [114.057999, 22.5436],
-        zoom: 11,
+        center: [that.longitude,that.latitude],
+        zoom: 13,
         resizeEnable : true
       });
-      var circle = new AMapOut.Circle({
-          center: new AMapOut.LngLat("114.057999", "22.5436"), // 圆心位置
+      mapCircle = new AMapOut.Circle({
+          center: new AMapOut.LngLat(that.longitude,that.latitude), // 圆心位置
           radius: radius,  //半径
           strokeColor: "#fff",  //线颜色
           strokeOpacity: 1,  //线透明度
@@ -251,7 +279,7 @@ export default {
           fillColor: '#3B82F670',
           fillOpacity: 0.35 //填充透明度
       });
-      map.add(circle);
+      map.add(mapCircle);
 
       var autoOptions = {
         city: "邹平",
@@ -259,7 +287,15 @@ export default {
       };
 
       var autocomplete =new AMapOut.AutoComplete(autoOptions);
-
+      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()
+      });
+     
       //  var windowContent =  
       //   '<div class="custom-content-window">' +
       //     '测试跳转跳转调准大幅度' +