基于高德地图实现省区域展示，打点标记，用于可视化大屏展示，复选框多选，单选展示，自定义弹窗

实现的效果图

1.高德地图初始化那些都不说了 这些可以去高德官网自行查看

高德地图

简单说一下异步加载，现在2.0版本你的key是要和秘钥一起使用的，至于从哪来你们可以自行决定（可以选择后台返给你）

说一下我发布线上遇到的问题 （qiankun）

        1.首先我们是写完嵌入整项目的，用到了qiankun微前端这个框架，我们作为子应用需要嵌入于主框架的，遇到的问题就是安全秘钥的问题（如果你是从后端传来的那可以忽略）

        讲解一下qiankun主框架与子应用的合并的时候window是会打乱的，站在最后的只有主框架的window，这点明白就好了，我是把这个框选的代码放入主框架了，然后线上问题就解决了

2. 省区域展示

        2.1  名字一换代码可直接复用

 const that = this
      this.loading = false
      const opts = {
        extensions: 'all',
        level: 'city'
      }
      const district = new AMap.DistrictSearch(opts)
      DrawSection('菏泽市', district, true)
      function DrawSection(cityName, district, isSearchNextLevel) {
        district.search(cityName, function(status, result) {
          const bounds = result.districtList[0].boundaries
          if (bounds) {
            for (let i = 0; i < bounds.length; i += 1) {
              if (isSearchNextLevel) {
                // 绘制省的版块
                new AMap.Polygon({
                  map: that.map,
                  path: bounds[i],
                  strokeColor: '#0dcdd1',
                  fillColor: '#003c70',
                  fillOpacity: 0.5
                })
              } else {
                // 绘制市的边界线
                new AMap.Polyline({
                  path: bounds[i],
                  strokeColor: '#0dcdd1',
                  map: that.map
                })
              }
            }
            if (isSearchNextLevel) {
              const districtList = result.districtList[0].districtList
              for (let i = 0; i < districtList.length; i += 1) {
                DrawSection(districtList[i].name, district, false)
              }
            }
          }
        })
      }
      // 这隐藏其他地图添加遮罩层
      new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
      }).search('菏泽市', function(status, result) {
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ]
        var holes = result.districtList[0].boundaries
        var pathArray = [
          outer
        ]
        pathArray.push.apply(pathArray, holes)
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#07e5e6',
          strokeWeight: 1,
          fillColor: '#030e3a',
          zIndex: 50,
          fillOpacity: 1
        })
        polygon.setPath(pathArray)
        that.map.add(polygon)
        that.$nextTick(() => {
          that.setMarker()
        })
      })

3. 单选复选框显示标点信息

     3.1 我使用的是Element  ui 的复选框然后自己CSS修改样式即可

    /**
     * @获取十站点列表并标点到地图
     */
    geTen(e) {
      this.checked = e
      if (e) {
        const pointArr = []
        getMap({ 'siteType': 1 }).then(res => {
          // 获取接口数据
          const dataArr = res.data
          dataArr.forEach(item => {
            const obj = {
              name: item.siteName,
              position: [Number(item.xCoordinates), Number(item.yCoordinates)],
              url: require('../mapIcon/circle.png'),
              id: item.id,
              type: 'ten'
            }
            pointArr.push(obj)
          })
          this.addTenMarker(pointArr)
        })
      } else {
        this.$nextTick(() => {
          // 这个地方是把所有的标点隐藏 用了高德地图自己的api方法设置为null
          this.TenList.forEach(function(marker) {
            marker.setMap(null)
          })
          this.hidden()
        })
      }
    },

将传来的数组使用高德地图内置方法打点到地图上,项目需求是弹窗里面有个轮播图展示，我的想法就是弹窗已经建立后再初始化轮播图（可以自己封装手写一个）

    /**
     * @添加十的标点信息
     */
    addTenMarker(arr) {
      const that = this
      if (Array.isArray(arr) && arr.length > 0) {
        arr.forEach((item, index) => {
          var marker = new AMap.Marker({
            position:new AMap.LngLat(item.position[0], item.position[1]),
            map: this.map,
            offset: new AMap.Pixel(-15, -30),
            icon: item.url
          })
          marker.name = item.name
          marker.id = item.id
          marker.type = item.type
          this.TenList.push(marker)
          marker.on('click', function(e) {
            getSiteDetail({ 'id': e.target.id }).then(res => {
              that.boxData = res.data
              const obj = res.data
              const list = obj.serviceSiteFileVOList.filter(item => {
                return item.bsnType == 1 && item.fileType == 1
              })
              const close = require('../mapIcon/clsoe.png')
              const context = `
                      <div id="thunDia" class="bgONG">
                          <img id="closeBtn" class="imgIcon" src="${close}" alt="">
                          <div class="thunHead">
                            <div class="title">${obj.siteName || '暂无站点'}</div>
                            <div class="thunMeks">
                              <p>站点位置：${obj.siteAddr || '暂无位置'}</p>
                              <p>所属区县：${obj.areaName || '暂无所属区县'}</p>
                              <p>所属工会组织：${obj.countyOrganName || '暂无工会组织'}</p>
                              <p>所属总工会：${obj.organName || '暂无总工会'}</p>
                            </div>
                          </div>
                          <div class="bgHead">
                            <div data-index="1" class="bgItem active">四个规范</div>
                            <div data-index="2" class="bgItem">五家建设</div>
                            <div data-index="3" class="bgItem">六种做法</div>
                          </div>
                          <div class="mesks" id="qmeks">
                            ${obj.standard || '暂无数据'}
                          </div>
                          <div class="bgCon">
                            <div class="swiperCon">
                              <div id="swiperDia">
                                <div class="swiper-container swiper">
                                  <div class="swiper-wrapper" id="wrapperBox">
                                    ${list.map(item => `<div class="swiper-slide img-item">
                                        <img src="${item.fileUrl}" alt="">
                                    </div>`).join('')}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div  style="text-align: right;width: 100%;">
<!--                            <span id="videoCall" data-user="${obj.siteManagerName}" data-phone="${obj.siteManagerPhone}" class="vrBtn">视频通话</span>-->
                            <span id="videoCall" data-user="${obj.siteManagerName}" data-phone="15866632253" class="vrBtn">视频连线</span>
                            <span id="vrbutton" data-url="${obj.chainedVr}" class="vrBtn">VR视频查看</span>
                          </div>
                      </div>
                    `
              that.$nextTick(() => {
                that.modify()
                that.swiperInit()
                that.focusHid()
                that.jumpVr()
                that.videoCallFun()
              })
              // 纠正弹窗高度问题
              if (list && list.length > 0) {
                const infoBox = that.createInfoWindow(context, 340, 450)
                infoBox.open(that.map, marker.getPosition())
              } else {
                const infoBox = that.createInfoWindow(context, 330, 335)
                infoBox.open(that.map, marker.getPosition())
              }
            })
          })
        })
      }
    },
    /**
     * @创建inforWindow这个自定义弹窗
     */
    createInfoWindow(context, x, y) {
      const infoBox = new AMap.InfoWindow({
        isCustom: true,
        content: context,
        offset: new AMap.Pixel(x, y)
      })
      return infoBox
    },

4. 多选复选框，单选与多选状态操作，显示标点信息

      4.1 使用的是饿了么的复选框组 样式那块我有改过，主要的还是看代码，我这边实现的就是请求接口保存在一个数组里面，取消勾选的时候就是会匹配接口获取与存在刚数组里面的id如果相同那么就是移除就完事，代码可直接复用

  /**
     * @单选的增删操作
     */
    getIO(e, item) {
      if (e) {
        getMap({ 'siteType': item.itemCode }).then(res => {
          const Sarr = this.siteList
          const thunArr = []
          var list = res.data
          if (list && list.length > 0) {
            list.forEach(params => {
              Sarr.forEach(Sitem => {
                if (params.siteType == Sitem.itemCode) {
                  params['url'] = Sitem.url
                  const obj = {
                    id: params.id,
                    name: params.siteName,
                    position: [params.xCoordinates, params.yCoordinates],
                    url: params.url
                  }
                  thunArr.push(obj)
                }
              })
            })
            this.addThunMarker(thunArr)
          } else { return }
        })
      } else {
        getMap({ 'siteType': item.itemCode }).then(res => {
          const dataList = res.data
          dataList.forEach((item, index) => {
            this.singleList.forEach((marker, num) => {
              if (item.id === marker.id) {
                marker.setMap(null)
                this.singleList.splice(num, 1)
              }
            })
          })
        })
      }
    },
    /**
     * @全选的增删操作
     */
    allCheck(val) {
      const all = this.siteList.map(item => {
        return item
      })
      this.checkedCities = val ? all : []
      this.isCheckAll = false
      if (val) {
        getMap({ 'siteType': 0 }).then(res => {
          const data = res.data
          const makArr = []
          data.forEach(item => {
            all.forEach(obj => {
              if (item.siteType === obj.itemCode) {
                const objthun = {
                  name: item.siteName,
                  position: [item.xCoordinates, item.yCoordinates],
                  url: obj.url,
                  id: item.id,
                  type: 'thun'
                }
                item['url'] = obj.url
                makArr.push(objthun)
              }
            })
          })
          this.addThunMarker(makArr)
        })
      } else {
        this.$nextTick(() => {
          this.singleList.forEach((marker) => {
            marker.setMap(null)
            this.singleList = []
          })
          this.hidden()
        })
      }
    },
    /**
     * @添加千的标点信息
     */
    addThunMarker(arr) {
      const that = this
      if (Array.isArray(arr) && arr.length > 0) {
        arr.forEach((item, index) => {
          var marker = new AMap.Marker({
            position: [item.position[0], item.position[1]],
            map: this.map,
            offset: new AMap.Pixel(-15, -30),
            icon: new AMap.Icon({
              image: item.url,
              imageSize: new AMap.Size(27, 30),
              imageoffset: new AMap.Pixel(-15, -30),
            })
          })
          this.singleList.push(marker)
          marker.name = item.name
          marker.id = item.id
          marker.type = item.type
          marker.on('click', function(e) {
            getSiteDetail({ 'id': e.target.id }).then(res => {
              const obj = res.data
              const close = require('../mapIcon/clsoe.png')
              const context = `
                      <div class="whiteBg" id="whiteId">
                        <img id="imgClose" class="imgIcon" src="${close}" alt="">
                        <div class="white-item">
                          <span>站点名称：</span>
                          <p>${obj.siteName || '暂无站点'}</p>
                        </div>
                        <div class="white-item">
                          <span>站点位置：</span>
                          <p>${obj.siteAddr || '暂无位置'}</p>
                        </div>
                        <div class="white-item">
                          <span>所属区县：</span>
                          <p>${obj.areaName || '暂无所属区县'}</p>
                        </div>
                        <div class="white-item">
                          <span>所属工会组织：</span>
                          <p>${obj.countyOrganName || '暂无工会组织'}</p>
                        </div>
                        <div class="white-item">
                          <span>所属总工会：</span>
                          <p>${obj.organName || '暂无总工会'}</p>
                        </div>
                      </div>
                    `
              that.$nextTick(() => {
                that.clearDia()
                // that.thunHid()
              })
              // 纠正弹窗高度问题
              const infoBox = that.createInfoWindow(context, -10, 225)
              infoBox.open(that.map, marker.getPosition())
            })
          })
        })
      }
    },
    /**
     * @全选状态与单选状态的增删操作
     */
    getCheck(value) {
      const count = value.length
      this.checkAll = count === this.siteList.length
      this.isCheckAll = count > 0 && count < this.siteList.length
    },

自定义弹窗也是写在上面的  3 与 4 里了，创建弹窗的方法与隐藏弹窗的方法都在以上图中，这篇博客到此结束咯，有啥不懂得可以用随时沟通，共勉加油噻