二级城市页面开发完成

src/components/searchdata/kkday.vue

@@ -393,9 +393,18 @@ export default {
   mounted() {
     var CategoryName = this.getUrlKey("CategoryName", window.location.href);
      if(CategoryName) {
-      this.goodsType.find(item => item.Name === CategoryName)
+      let list = this.goodsType.find(item => item.CategoryName === CategoryName)
+      let arr = []
+      list.children.forEach(item => {
+        arr.push(item.Id)
+        if(item.children && item.children.length) {
+          item.children.forEach(item2 => {
+            arr.push(item2.Id)
+          })
+        }
+      })
+      this.ticked = arr
      }
-     console
   },
   methods: {
     handleSelected(target) {

src/pages/city/cityDetail.vue

@@ -66,6 +66,12 @@
   background: #ffffff;
   border-radius: 8px;
 }
+#dialog-map {
+  width: 800px;
+  height: 400px;
+  background: #ffffff;
+  border-radius: 8px;
+}
 .name {
   top: 20px;
   left: 20px;
@@ -181,6 +187,11 @@
         </div>
       </div>
       <nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" />
+      <q-dialog  v-model="show">
+        <div style="width: 900px;">
+        <div id="dialog-map"></div>
+        </div>
+      </q-dialog>
     </div>
   </div>
 </template>
@@ -192,6 +203,7 @@ export default {
   components: { topCard, likeCard, nearCity },
   data() {
     return {
+      show: false,
       detail: null,
       navList: [
         {
@@ -254,37 +266,23 @@ export default {
           this.$q.loading.hide();
           this.$nextTick(() => {
             this.createMap();
-    this.addMarker();
-    this.addLabel()
+            this.createTopMap()
           })
         },
         null
       );
     },
     createMap() {
-      if (!BMapGL) {
-        return;
-      }
       let map = new BMapGL.Map("baidu-map"); // 创建地图实例
       this.map = map;
-      var myGeo = new BMapGL.Geocoder();
-      const that = this
-      let address = '日本东京'
-      console.log('address', address)
-      myGeo.getPoint(address, function(point){
-    if(point){
-      console.log('get point', point)
-      that.point = point
-      let pointA = new BMapGL.Point(point.lng, point.lat); // 创建点坐标
+      let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
       map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
-    }else{
-        alert('您选择的地址没有解析到结果！');
-    }
-},'东京')
+            this.addMarker();
+            this.addLabel()
     },
     addMarker() {
-      let icon = require(`../../assets/img/info-time.png`);
-      var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
+      let icon = require(`../../assets/img/marker.png`);
+      var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(27, 32), {
         // 指定定位位置。
         // 当标注显示在地图上时，其所指向的地理位置距离图标左上
         // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
@@ -295,30 +293,89 @@ export default {
         // 需要指定大图的偏移位置，此做法与css sprites技术类似。
         // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
       });
-      let point = new BMapGL.Point(this.point.lng, this.point.lat); // 创建点坐标
+      let point = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
       // 创建标注对象并添加到地图
       var marker = new BMapGL.Marker(point, { icon: myIcon });
       this.map.addOverlay(marker);
     },
     addLabel() {
-      var point = new BMapGL.Point(this.point.lng, this.point.lat);
-      var content = "label";
+      var point = new BMapGL.Point(this.detail.Lng, this.detail.Lat);
+      var content = `<div style="font-size: 16px; font-weight: bold;">${this.detail.AreaName}</div><div style="font-size:14px">点击查看附近信息</div>`;
       var label = new BMapGL.Label(content, {
         // 创建文本标注
         position: point, // 设置标注的地理位置
         offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
       });
       this.map.addOverlay(label); // 将标注添加到地图中
+      const that = this
       label.addEventListener("click", function () {
-        alert("您点击了标注");
+        that.openDialog()
       });
       label.setStyle({
         // 设置label的样式
         color: "#000",
-        fontSize: "30px",
-        border: "2px solid #1E90FF",
+        backgrond: "#fff",
+        padding: '4px',
+        border: 'none'
       });
     },
+    createTopMap() {
+      let map = new BMapGL.Map("map"); // 创建地图实例
+      this.topMap = map;
+      let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
+      map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
+      this.addTopMarker()
+      this.addTopLabel()
+    },
+    addTopMarker() {
+      let icon = require(`../../assets/img/marker.png`);
+      var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(27, 32), {
+        // 指定定位位置。
+        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
+        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
+        // 图标中央下端的尖角位置。
+        anchor: new BMapGL.Size(10, 25),
+        // 设置图片偏移。
+        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
+        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
+        // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
+      });
+      let point = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
+      // 创建标注对象并添加到地图
+      var marker = new BMapGL.Marker(point, { icon: myIcon });
+      this.topMap.addOverlay(marker);
+    },
+    addTopLabel() {
+      var point = new BMapGL.Point(this.detail.Lng, this.detail.Lat);
+      var content = `<div style="font-size: 16px; font-weight: bold;">${this.detail.AreaName}</div><div style="font-size:14px">点击查看附近信息</div>`;
+      var label = new BMapGL.Label(content, {
+        // 创建文本标注
+        position: point, // 设置标注的地理位置
+        offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
+      });
+      this.topMap.addOverlay(label); // 将标注添加到地图中
+      const that = this
+      label.addEventListener("click", function () {
+        that.openDialog()
+      });
+      label.setStyle({
+        // 设置label的样式
+        color: "#000",
+        backgrond: "#fff",
+        padding: '4px',
+        border: 'none'
+      });
+    },
+    openDialog() {
+      this.show = true
+      this.$nextTick(() => {
+      let map = new BMapGL.Map("dialog-map"); // 创建地图实例
+      this.map = map;
+      let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
+      map.centerAndZoom(pointA, 11); // 初始化地图，设置中心点坐标和地图级别
+      map.enableScrollWheelZoom()
+      })
+    }
   },
 };
 </script>
\ No newline at end of file