• 高德地图的标记使用


    <template>
      <ui-container class="is-vertical" v-loading="sysLoading" :element-loading-text="syncLoadingText">
        <ui-main>
          <div class="row-wrap">
            <ui-row :gutter="24">
              <ui-col :span="18">
                <ui-card class="base-table-card" style="position: reletive" body-style="padding: 0px;">
                  <!--使用地图-->
                  <div class="map-content" id="map-container"></div>
                </ui-card>
              </ui-col>
              <ui-col :span="6">
                <ui-button v-if="!showAllPro" class="back_btn" @click="backShow"><i class="el-icon-arrow-left"></i>返回查看总览</ui-button>
                <ui-card v-if="showTable" v-loading="projectLoading" class="base-table-card" body-style="padding: 0 10px 10px;">
                  <div class="head-title">
                    <span>{{proTitle}}</span>
                  </div>
                  <ui-table
                    stripe border :fit="true" :data="projectData" highlight-current-row>
                    <ui-table-column prop="projectName" label="项目名称" align="center"></ui-table-column>
                    <ui-table-column prop="contractAmount" label="合同金额" align="center"></ui-table-column>
                    <ui-table-column label="详情" width="60px" align="center">
                      <template slot-scope="scope">
                        <ui-button size="mini" type="text" @click="modal('edit', scope.row)">查看</ui-button>
                      </template>
                    </ui-table-column>
                  </ui-table>
                </ui-card>
                <ui-card v-if="showAllPro" v-loading="allProjectLoading" class="base-table-card" body-style="padding: 0 10px 10px;">
                  <div class="head-title">
                    <span>所有省份项目总览</span>
                  </div>
                  <ui-table
                    stripe border :fit="true" :data="allProjectList" highlight-current-row>
                    <ui-table-column prop="projectAddress" label="省份" align="center"></ui-table-column>
                    <ui-table-column prop="totalNumber" label="总项目数" align="center"></ui-table-column>
                    <ui-table-column label="详情" width="60px" align="center">
                      <template slot-scope="scope">
                        <ui-button size="mini" type="text" @click="showPro(scope.row)">查看</ui-button>
                      </template>
                    </ui-table-column>
                  </ui-table>
                </ui-card>
                <project-detail v-if="showProject" @resolve="modal" :form="detailData" :title="title"></project-detail>
              </ui-col>
            </ui-row>
          </div>
        </ui-main>
      </ui-container>
    </template>
    <script>
    import AMap from 'AMap'
    import project from '@/api/project'
    import {formatTime} from '@/helper/filters'
    import projectDetail from './projectDetail'
    var map
    var districtExplorer
    var locMarker
    var adcode
    var currentAreaNode = null
    export default {
    components: { projectDetail },
    name: 'home',
    props: [],
    methods: {
    // 返回总览-switchAreaNode(100000)-全国的地址代码
    backShow() {
    districtExplorer.clearFeaturePolygons()
    this.switchAreaNode(100000)
    map.remove(locMarker)
    this.showAllPro = true
    this.showTable = false
    },
    showPro(row) {
    this.showAllPro = false
    this.getProject(row.projectAddress)
    adcode = row.projectNumber ? row.projectNumber.slice(0,2) + '0000' : ''
    this.switchAreaNode(adcode)
    },
    loadAreaNode(adcode, callback) {
    districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
    if (error) {
    if (callback) {
    callback(error)
    }
    console.error(error)
    return
    }
    let props = areaNode.getProps()
    if (callback) {
    callback(null, areaNode)
    }
    })
    },
    // 渲染地区
    renderAreaPolygons(areaNode) {
      let fillColor = null
      if (areaNode === '100000') {
        fillColor = this.colors[0]
      } else {
        fillColor = this.colors[1]
      }
      //更新地图视野--会放大
      // map.setBounds(areaNode.getBounds(), null, null, true)
      //清除已有的绘制内容
      districtExplorer.clearFeaturePolygons()
      //绘制父区域(也就是当前点击的省份区域)
      districtExplorer.renderParentFeature(areaNode, {
        cursor: 'default',
        bubble: true,
        strokeColor: 'black', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: fillColor, //填充色
        fillOpacity: 0.35, //填充透明度
      })
    },
    // 选中的节点渲染
    switchAreaNode(adcode, callback) {
      let _this = this
      if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
        return
      }
      this.loadAreaNode(adcode, function(error, areaNode) {
      if (error) {
        if (callback) {
          callback(error)
        }
        return
      }
      currentAreaNode = window.currentAreaNode = areaNode
      //设置当前使用的定位用节点
      districtExplorer.setAreaNodesForLocating([currentAreaNode])
        _this.refreshAreaNode(areaNode)
        if (callback) {
          callback(null, areaNode)
        }
      })
    },
    // 重新刷新地图页面节点
    refreshAreaNode(areaNode) {
      districtExplorer.setHoverFeature(null)
      this.renderAreaPolygons(areaNode)
    },
    // 项目总揽
    getAllProject() {
    this.allProjectLoading = true
    project.getAllProject().then(r => {
    this.allProjectList = r.data.data
    this.allProjectLoading = false
    })
    },
    // 根据城市获取项目信息
    getProject(params) {
    this.showAllPro = false
    if (params) {
    this.proTitle = params + '-项目基本信息'
    }
    this.projectLoading = true
    project.getProject(params).then(res => {
    this.projectLoading = false
    this.showTable = true
    res.data.data.forEach(i => {
    if (i.projectAddress) {
    i['_projectAddress'] = JSON.parse(i.projectAddress).adname.split(' ')[0]
    } else {
    i['_projectAddress'] = '--'
    }
    })
    this.projectData = res.data.data
    }).catch(r => {
    this.projectLoading = false
    })
    },
    modal(type, data) {
    switch (type) {
    case 'edit':
    this.showProject = true
    if (data.projectName) {
    this.title = data.projectName + '-详情'
    } else {
    this.title = '项目详情'
    }
    this.detailData = data
    break
    case 'dismiss':
    this.showProject = false
    break
    case 'close':
    this.showProject = false
    break
    }
    },
    formatTime(val) {
    return formatTime(val)
    },
    listenMouseEvents() {
    let _this = this
    var isLocating = false
    map.on('click', function(e) {
    if (isLocating) {
    return
    }
    isLocating = true
    districtExplorer.locatePosition(e.lnglat, function(err, features) {
    _this.lnglat = e.lnglat
    console.log(e.lnglat)
    isLocating = false
    if (err) {
    console.error(err)
    return
    }
    _this.renderFeatures(features)
    locMarker.setPosition(e.lnglat)
    locMarker.setMap(map)
    }, {
    levelLimit: 2
    })
    })
    },
      // 在地图的上选择城市渲染
      renderCountry(setBounds) {
        let _this = this
        districtExplorer.loadCountryNode(function(err, countryNode) {
          if (setBounds) {
            map.setBounds(countryNode.getBounds())
          }
          districtExplorer.renderParentFeature(countryNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 2, //线宽
            fillColor: _this.colors[0], //填充色
            fillOpacity: 0.35, //填充透明度
          })
        })
      },
      renderFeatures(features) {
        this.provinceName = features[1].properties.name
        this.getProject(this.provinceName)
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons()
        if (!features.length) {
          renderCountry(false)
          return
        }
        for (var i = 0, len = features.length; i < len; i++) {
          let strokeColor = this.colors[i % this.colors.length]
          let fillColor = strokeColor
          districtExplorer.renderFeature(features[i], {
            cursor: 'default',
            bubble: true,
            strokeColor: strokeColor, //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: fillColor, //填充色
            fillOpacity: 0.35, //填充透明度
          })
        }
      }
    },
    mounted() {
      this.getAllProject()
      map = new AMap.Map('map-container', {
      resizeEnable: true,
        zoom: 9
      })
      let _this = this
      AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
      districtExplorer = new DistrictExplorer({
        map: map
      })
      locMarker = new AMap.Marker()
      _this.listenMouseEvents()
      _this.renderCountry(true)
    })
    },
    data() {
    return {
    projectData: [],
    allProjectList: [],
    allProjectLoading: false,
    detailData: null,
    lnglat: null,
    hackReset: true,
    showAllPro: true,
    showTable: false,
    showProject: false,
    sysLoading: false,
    projectLoading: false,
    syncLoadingText: null,
    colors: ["#ff9900", "#109618", "#3b3eac"],
    proTitle: '选择省份查看项目',
    currentAreaNode: null,
    provinceName: null
    }
    }
    }
    </script>
    <style scoped lang="scss">
    .head-title{
    font-weight: 700;
    color: #D0021B;
    padding: 10px 0;
    border-bottom: 1px solid #efecec;
    }
    .side-section{
    border-bottom: 1px dashed rgb(193, 193, 193);
    .side-time{
    margin: 5px 0;
    font-size: 12px;
    color: gray;
    }
    .side-content{
    color: #5E6977;
    margin-top: 10px;
    }
    .side-img{
    margin-top: 10px;
    .item-cover{
    object-fit: cover;
    height: 80px;
    58px;
    }
    }
    }
    .map-content{
    height: 500px;
    }
    .swiper-container{
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 6px 10px rgba(208, 2, 27, .5);
    left: 20%;
    40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    p{
    display: block;//块状显示
    overflow: hidden;//隐藏文字
    text-overflow: ellipsis;//显示...
    white-space: nowrap; //不换行
    100%;
    }
    }
    .form-content{
    padding: 0 0 0 20px;
    }
    #tipinput{
    position: absolute;
    top: 30px;
    right: 30px;
    }
    #panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 80px;
    right: 10px;
    280px;
    z-index: 99;
    }
    .back_btn {
    margin: 0 0px 10px;
    cursor: pointer
    }
     
    </style>
  • 相关阅读:
    AOJ 0189 Convenient Location (Floyd)
    AOJ 2170 Marked Ancestor[并查集][离线]
    POJ 1703 Find them, Catch them (并查集)
    复制构造函数 与 赋值函数 的区别(转)
    POJ 2236 Wireless Network (并查集)
    POJ 2010 Moo University
    POJ 3614 Sunscreen (优先队列)
    HTML页面下雪特效
    基于Jquery的XML解析器,返回定制的HTML
    HTML,CSS 无边框桌面窗口
  • 原文地址:https://www.cnblogs.com/soonK/p/11087924.html
Copyright © 2020-2023  润新知