二级城市页面编写

src/pages/city/cityDetail.vue

@@ -92,9 +92,12 @@
       </div>
 
       <div class="flex justify-between">
-        <div v-for="item in navList" :key="item" class="nav-item">
-          <img class="nav-img" :src="require(`../../assets/img/${item.img}.png`)" />
-          <div class="f16 bold text-center">{{item.title}}</div>
+        <div v-for="item in navList" :key="item.img" class="nav-item">
+          <img
+            class="nav-img"
+            :src="require(`../../assets/img/${item.img}.png`)"
+          />
+          <div class="f16 bold text-center">{{ item.title }}</div>
         </div>
       </div>
       <div class="top-title">TOP榜单</div>
@@ -108,8 +111,11 @@
         <likeCard v-for="item in 4" :key="item" />
       </div>
       <div class="top-title">關於東京</div>
-      <div class="flex jusify-between">
-        <div style="width: 720px">虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。</div>
+      <div class="flex justify-between">
+        <div style="width: 720px">
+          虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。
+          作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。
+        </div>
         <div>
           <div id="baidu-map"></div>
         </div>
@@ -124,28 +130,40 @@
         </div>
         <div class="flex mt">
           <div class="flex time-item">
-            <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
+            <img
+              class="info-icon"
+              :src="require(`../../assets/img/info-time.png`)"
+            />
             <div>
               <div class="f16 bold">時區</div>
               <div>-12° -17°</div>
             </div>
           </div>
           <div class="flex time-item">
-            <img class="info-icon" :src="require('../../assets/img/info-currency.png')" />
+            <img
+              class="info-icon"
+              :src="require('../../assets/img/info-currency.png')"
+            />
             <div>
               <div class="f16 bold">貨幣</div>
               <div>-12° -17°</div>
             </div>
           </div>
           <div class="flex time-item">
-            <img class="info-icon" :src="require(`../../assets/img/info-ele.png`)" />
+            <img
+              class="info-icon"
+              :src="require(`../../assets/img/info-ele.png`)"
+            />
             <div>
               <div class="f16 bold">電壓</div>
               <div>-12° -17°</div>
             </div>
           </div>
           <div class="flex time-item">
-            <img class="info-icon" :src="require(`../../assets/img/info-time.png`)" />
+            <img
+              class="info-icon"
+              :src="require(`../../assets/img/info-time.png`)"
+            />
             <div>
               <div class="f16 bold">旅遊時間</div>
               <div>-12° -17°</div>
@@ -161,7 +179,6 @@
 import topCard from "./components/top-card.vue";
 import likeCard from "./components/like-card.vue";
 import nearCity from "./components/near-city.vue";
-import Vue from "vue";
 export default {
   components: { topCard, likeCard, nearCity },
   data() {
@@ -169,35 +186,75 @@ export default {
       navList: [
         {
           title: "觀光行程",
-          img: "nav-map"
+          img: "nav-map",
         },
         {
           title: "景點門票",
-          img: "nav-ticket"
+          img: "nav-ticket",
         },
         {
           title: "住宿",
-          img: "nav-hotal"
+          img: "nav-hotal",
         },
         {
           title: "交通",
-          img: "nav-trip"
-        }
-      ]
+          img: "nav-trip",
+        },
+      ],
     };
   },
   mounted() {
-    this.createMap()
+    this.createMap();
+    this.addMarker();
+    this.addLabel()
   },
   methods: {
     createMap() {
-      if(!BMapGL) {
-        return
+      if (!BMapGL) {
+        return;
       }
       let map = new BMapGL.Map("baidu-map"); // 创建地图实例
       let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
       map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
-    }
-  }
+      this.map = map;
+    },
+    addMarker() {
+      let icon = require(`../../assets/img/info-time.png`);
+      var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
+        // 指定定位位置。
+        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
+        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
+        // 图标中央下端的尖角位置。
+        anchor: new BMapGL.Size(10, 25),
+        // 设置图片偏移。
+        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
+        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
+        // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
+      });
+      let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
+      // 创建标注对象并添加到地图
+      var marker = new BMapGL.Marker(point, { icon: myIcon });
+      this.map.addOverlay(marker);
+    },
+    addLabel() {
+      var point = new BMapGL.Point(116.404, 39.915);
+      var content = "label";
+      var label = new BMapGL.Label(content, {
+        // 创建文本标注
+        position: point, // 设置标注的地理位置
+        offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
+      });
+      this.map.addOverlay(label); // 将标注添加到地图中
+      label.addEventListener("click", function () {
+        alert("您点击了标注");
+      });
+      label.setStyle({
+        // 设置label的样式
+        color: "#000",
+        fontSize: "30px",
+        border: "2px solid #1E90FF",
+      });
+    },
+  },
 };
 </script>
\ No newline at end of file