高德地图的标记使用

<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;

width: 58px;

}

}

}

.map-content{

height: 500px;

}

.swiper-container{

position: absolute;

background-color: #fff;

box-shadow: 0px 6px 10px rgba(208, 2, 27, .5);

left: 20%;

width: 40%;

height: 40px;

line-height: 40px;

text-align: center;

p{

display: block;//块状显示

overflow: hidden;//隐藏文字

text-overflow: ellipsis;//显示...

white-space: nowrap; //不换行

width: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;

width: 280px;

z-index: 99;

}

.back_btn {

margin: 0 0px 10px;

cursor: pointer

}

 

</style>

转载于:https://www.cnblogs.com/soonK/p/11087924.html