# up map2

src/views/counter/map2.vue

@@ -10,6 +10,7 @@ export default {
   name: 'map2',
   data() {
     return {
+      map: null,
       flag: false,
       defaultPositions: [
         {
@@ -29,8 +30,8 @@ export default {
           position: [114.124105, 22.401088]
         },
         {
-          title: '恒生管理学院',
+          title: '西贡郊野公园',
-          position: [114.223565, 22.380771]
+          position: [114.370966, 22.411628]
         },
         {
           title: '盐田',
@@ -45,26 +46,87 @@ export default {
   },
   methods: {
     initMap() {
-      const map = new AMap.Map('map-container', {
+      this.map = new AMap.Map('map-container', {
         center: [114.143472, 22.284105],
         resizeEnable: true,
         zoom: 10
       })
-      // 测试数据
+      // 窗体信息
+      // const infoWindow = new AMap.InfoWindow({
+      //   isCustom: true,
+      //   content: this.createInfoWindow(title, content.join("<br/>")),
+      //   offset: new AMap.Pixel(16, -45)
+      // })
+      // 标记点测试数据
       const markers = []
       this.defaultPositions.forEach((item, index) => {
         const marker = new AMap.Marker({
           position: item.position,
           zIndex: 10,
           title: item.title,
-          map: map
+          map: this.map
+        })
+        AMap.event.addListener(marker, 'click', () => {
+          infoWindow.open(this.map, marker.getPosition())
         })
         markers.push(marker)
       })
       AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
-        map.addControl(new AMap.ToolBar())
+        this.map.addControl(new AMap.ToolBar())
-        map.addControl(new AMap.Scale())
+        this.map.addControl(new AMap.Scale())
       })
+      // 实例化信息窗体
+      const title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>'
+      const content = []
+      content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里")
+      content.push('电话：010-64733333')
+      content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>")
+      const infoWindow = new AMap.InfoWindow({
+        isCustom: true,
+        content: this.createInfoWindow(title, content.join('<br/>')),
+        offset: new AMap.Pixel(16, -45)
+      })
+    },
+    createInfoWindow(title, content) {
+      const info = document.createElement('div')
+      info.className = 'info'
+
+      // 可以通过下面的方式修改自定义窗体的宽高
+      // info.style.width = "400px"
+      // 定义顶部标题
+      const top = document.createElement('div')
+      const titleD = document.createElement('div')
+      const closeX = document.createElement('img')
+      top.className = 'info-top'
+      titleD.innerHTML = title
+      closeX.src = 'https://webapi.amap.com/images/close2.gif'
+      closeX.onclick = this.closeInfoWindow
+
+      top.appendChild(titleD)
+      top.appendChild(closeX)
+      info.appendChild(top)
+
+      // 定义中部内容
+      const middle = document.createElement('div')
+      middle.className = 'info-middle'
+      middle.style.backgroundColor = 'white'
+      middle.innerHTML = content
+      info.appendChild(middle)
+
+      // 定义底部内容
+      const bottom = document.createElement('div')
+      bottom.className = 'info-bottom'
+      bottom.style.position = 'relative'
+      bottom.style.top = '0px'
+      bottom.style.margin = '0 auto'
+      const sharp = document.createElement('img')
+      sharp.src = 'https://webapi.amap.com/images/sharp.png'
+      bottom.appendChild(sharp)
+      info.appendChild(bottom)
+      return info
+    },
+    closeInfoWindow() {
+      this.map.clearInfoWindow()
     }
   },
   mounted() {
@@ -73,11 +135,61 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="css">
   #map-container {
     width: 100%;
     height: 80%;
     overflow: hidden;
     position: absolute;
   }
+
+  .info {
+    border: solid 1px silver;
+  }
+  div.info-top {
+    position: relative;
+    background: none repeat scroll 0 0 #F9F9F9;
+    border-bottom: 1px solid #CCC;
+    border-radius: 5px 5px 0 0;
+  }
+  div.info-top div {
+    display: inline-block;
+    color: #333333;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 31px;
+    padding: 0 10px;
+  }
+  div.info-top img {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    transition-duration: 0.25s;
+  }
+  div.info-top img:hover {
+    box-shadow: 0px 0px 5px #000;
+  }
+  div.info-middle {
+    font-size: 12px;
+    padding: 6px;
+    line-height: 20px;
+  }
+  div.info-bottom {
+    height: 0px;
+    width: 100%;
+    clear: both;
+    text-align: center;
+  }
+  div.info-bottom img {
+    position: relative;
+    z-index: 104;
+  }
+  span {
+    margin-left: 5px;
+    font-size: 11px;
+}
+  .info-middle img {
+    float: left;
+    margin-right: 6px;
+  }
 </style>