演示用临沂二村

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 const Main = () => import('@/views/main.vue')
+const HouseMap = () => import('@/views/house-map.vue')
 // const Test = () => import('@/views/test.vue')
 
 Vue.use(Router)
@@ -12,6 +13,11 @@ export default new Router({
       name: 'main',
       component: Main,
     },
+    {
+      path: '/house-map',
+      name: 'house-map',
+      component: HouseMap,
+    }
     // {
     //   path: '/test',
     //   name: 'test',

src/views/house-map.vue

+<template>
+  <div id="HouseMapContainer">
+    <div class="icon-tooltip">
+      <p><img src="@/assets/images/focus.png"/>重点关注对象</p>
+      <p><img src="@/assets/images/rent.png"/>出租房</p>
+      <p><img src="@/assets/images/old.png"/>独居高龄老人</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HouseMap',
+  data() {
+    return {
+      mapConfig: {
+        resizeEnable: true,
+        rotateEnable: true,
+        pitchEnable: true,
+        showLabel: true,
+        zoom: 17.5,
+        pitch: 40,
+        rotation: 45,
+        viewMode: '3D', // 开启3D视图,默认为关闭
+        buildingAnimation:true, // 楼块出现是否带动画
+        expandZoomRange:true,
+        zooms: [10,20],
+        center: [121.510659, 31.195735], // 临沂二村
+        showIndoorMap: false,
+        mapStyle:'amap://styles/light',
+        features: ['bg','road', 'building'],
+      },
+      curPolygon: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(this.initMap)
+  },
+  methods: {
+    initMap(area) {
+      this.map = new AMap.Map('HouseMapContainer', this.mapConfig)
+      this.addController()
+      this.highlightArea()
+      this.addPoints()
+    },
+    addController() { // 添加地图控制器
+      this.map.addControl(new AMap.ControlBar({
+        showZoomBar: false,
+        showControlButton: true,
+        position: {
+          right: '10px',
+          top: '10px',
+        }
+      }))
+    },
+    highlightArea(area) { // 高亮区域
+      const path = [
+        ['121.510899', '31.196536'],
+        ['121.510817', '31.19635'],
+        ['121.510783', '31.196269'],
+        ['121.510764', '31.196208'],
+        ['121.510758', '31.196133'],
+        ['121.510817', '31.196033'],
+        ['121.5114', '31.1963'],
+        ['121.51184', '31.195641'],
+        ['121.511222', '31.195362'],
+        ['121.511755', '31.194543'],
+        ['121.511158', '31.194246'],
+        ['121.510662', '31.195048'],
+        ['121.509983', '31.194731'],
+        ['121.509945', '31.194815'],
+        ['121.509653', '31.195489'],
+        ['121.509447', '31.19599'],
+        ['121.509439', '31.196088'],
+        ['121.509482', '31.196188'],
+        ['121.509824', '31.196632'],
+        ['121.51008', '31.196474'],
+        ['121.510275', '31.196489'],
+        ['121.510407', '31.196535'],
+        ['121.511175', '31.197527'],
+        ['121.511229', '31.197524'],
+        ['121.511518', '31.197214'],
+        ['121.511295', '31.197034'],
+        ['121.511176', '31.196933'],
+        ['121.511056', '31.196831'],
+        ['121.510899', '31.196536'],
+      ]
+      const polygon = new AMap.Polygon({
+        zIndex: 1,
+        strokeWeight: 3,
+        strokeStyle: 'dashed',
+        path: path,
+        fillOpacity: 0.2,
+        fillColor: '#80d8ff',
+        strokeColor: '#0091ea'
+      })
+      this.curPolygon = polygon
+      this.map.add([polygon])
+    },
+    addPoints() { // 初始化添加楼栋图标，返回图标集合
+      const markerCollection = []
+      const mock = [
+        {lon: 121.509987, lat: 31.195844, address: '南码头路451弄9号', icon: 'rent.png'},
+        {lon: 121.510955, lat: 31.195374, address: '南码头路451弄23号', icon: 'focus.png'},
+        {lon: 121.511426, lat: 31.196219, address: '浦三路12弄24号', icon: 'old.png'},
+      ]
+      const configMarker = item => {
+        const marker = new AMap.Marker({
+          position: [item.lon, item.lat],
+          icon: new AMap.Icon({
+            size: [30, 45],
+            image: require(`@/assets/images/${item.icon}`),
+          }),
+          extData: {
+            community: '临沂二村',
+            address: item.address,
+            lon: item.lon,
+            lat: item.lat,
+          },
+        }).on('click', e => {
+          this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData())
+        })
+        markerCollection.push(marker)
+      }
+      mock.forEach(configMarker)
+      this.map.add(markerCollection)
+    },
+    showInfoTips(e, location, data) { // 地图显示浮窗信息
+      let infoWindow = new AMap.InfoWindow({
+        content: `
+          <div>
+            <b>${data.community}</b>
+            <p>${data.address}</p>
+          </div>
+        `
+      })
+      infoWindow.open(this.map, location)
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+#HouseMapContainer
+  width 100%
+  height 100%
+  resize both
+  position relative
+  .icon-tooltip
+    position absolute
+    bottom 2rem
+    left 2rem
+    z-index 100
+    p
+      display flex
+      align-items center
+      color #000
+      font-weight bold
+      margin-bottom 1rem
+      font-size 1.4rem
+      img
+        width 2rem
+        margin-right 1rem
+</style>
+<style lang="stylus">
+.amap-logo
+.amap-copyright
+  display none !important
+.amap-icon
+  img
+    width 100%
+    height 100%
+</style>