vue 引入高德地图点标记

最新推荐文章于 2024-09-02 14:32:24 发布

头秃女孩子

最新推荐文章于 2024-09-02 14:32:24 发布

阅读量309

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/xue_tingting/article/details/134443571

版权

项目场景：

vue 引入高德地图实现点聚合自定义图标标记、遮罩层

解决方案

提示：实现的效果、自定义图标以及左右耳朵展示不同效果

getAllRegionNameById(this.regionCode).then((res) => {

if (res.data != null) {

let names = res.data.split('/')

if (names.length == 3) {

this.district(names[2])

} else if (names.length == 1) {

this.district(names[0]) //加载反向遮罩

} else {

this.district(names[1]) //加载反向遮罩

}

}

})

下面是完整代码

loadMap: function (flag) {

getAllRegionNameById(this.regionCode).then((res) => {

if (res.data != null) {

let names = res.data.split('/')

if (names.length == 3) {

this.district(names[2])

} else if (names.length == 1) {

this.district(names[0]) //加载反向遮罩

} else {

this.district(names[1]) //加载反向遮罩

}

}

})

},

district: function (cityname) {

// console.log(cityname);

var _this = this

//创建一个实例

new AMap.DistrictSearch({

extensions: 'all',

subdistrict: 0,

}).search(cityname, function (status, result) {

/*获取中心点后，再初始化地图，防止跳闪*/

var _map = new AMap.Map('allmap', {

zoom: 11,

minZoom: 1,

center: result.districtList[0].center,

})

var marker = new AMap.Marker({

content: ' ',

map: _map,

offset: new AMap.Pixel(-112, -269),

})

_this.marker = marker

_this.map = _map

_this.map.clearMap()

_this.addMarkers()

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: '#71B3ff', //边线颜色

strokeWeight: 1, //边线粗细

fillColor: '#71B3ff', //遮罩颜色

fillOpacity: 0.5, //遮罩透明度

})

polygon.setPath(pathArray)

_map.add(polygon)

_this.polygon = polygon

/*初始化地图后，加载海量点*/

// _this.massMarks(_this.enterLists)

// console.log(_this.enterLists,'_this.enterLists');

})

},

addMarkers() {

this.options = []

if (this.map && this.markerClusterer) {

this.markerClusterer.clearMarkers() //

// this.initMarkers();

}

let _this = this

var marker = ''

this.enterLists.forEach((element, index) => {

这块是定义的左右耳朵不需要的可以不用看

let numL = '',

numR = '',

bgL = 'left:-10px;',

bgR = 'left:27px;'

let comcss =

'font-size:12px;color:#fff;width:20px;height:20px;border-radius: 50%;display:flex;justify-content: center;align-items: center;position: absolute;top:-6px;',

bg1 = 'background:#00DB5F;', // 状态1-正常、浓度1-合格

bg2 = 'background:red;', // 状态2-关

bg3 = 'background:#FF8000;', // 状态3-待清洗

bg4 = 'background:#FF0000;', // 状态4-故障、浓度2-超标

bg5 = 'background:#C6C6C6;', // 状态5-离线、设备状态2-离线

bg7 = 'background:#1E90FF;',

bg9 = 'background:black;',

bg8 =

'background:#ffff;color:#1E90FF;border:1px solid #1E90FF;'

// bg6 =

// 'background:#ffffff; color:#138BF5;border:1px solid #138BF5' // 多个浓度

if (element.gkaStates.length > 0) {

if (element.gkaCount > 1) {

bgR += bg8

numR = element.gkaCount

} else {

// 1展示右耳朵 2展示两耳朵

if (element.gkaStates[0] == 1) {

// 正常

bgR += bg7

numR = element.gkaCount

} else if (element.gkaStates[0] == 2) {

// 关闭

bgR += bg5

numR = element.gkaCount

} else if (element.gkaStates[0] == 3) {

// 待清洗

bgR += bg1

numR = element.gkaCount

} else if (element.gkaStates[0] == 4) {

// 故障

bgR += bg3

numR = element.gkaCount

} else if (element.gkaStates[0] == 5) {

// 故障

bgR += bg2

numR = element.gkaCount

} else if (element.gkaStates[0] == 6) {

// 故障

bgR += bg9

numR = element.gkaCount

}

}

}

if (element.rawStates.length > 0) {

if (element.rawCount > 1) {

bgL += bg8

numL = element.rawCount

} else {

if (element.rawStates[0] == 1) {

// 正常

bgL += bg1

numL = element.rawCount

} else if (element.rawStates[0] == 2) {

// 关闭

bgL += bg4

numL = element.rawCount

} else if (element.rawStates[0] == 3) {

// 待清洗

bgL += bg5

numL = element.rawCount

} else if (element.rawStates[0] == 4) {

// 故障

bgL += bg7

numL = element.rawCount

}

if (numL == 0) {

//左耳朵为零时不展示左耳朵

numL = ''

} else if (numR == 0) {

numR = ''

}

}

}

//左右耳朵end

let markerContent =

'<div class="custom-content-marker" style="position: relative;width:40px;height:40px;">'

markerContent +=

'<image src="static/base/youyan4/map/marker_blue.png" style="position: absolute;width:40px;height:40px;z-index:5"></image>'

// if (numL !== '' && numL !== null) {

markerContent +=

'<div style="' + comcss + bgL + '">' + numL + '</div>'

// }

// if (numR !== '' && numR !== null) {

markerContent +=

'<div style="' + comcss + bgR + '">' + numR + '</div>'

// }

markerContent += '</div>'

marker = new AMap.Marker({

position: [element.longitude, element.latitude],

offset: new AMap.Pixel(-13, -30),

size: new AMap.Size(40, 50),

content: markerContent,

})

marker.on('click', (e) => {

_this.initDialogData(element)

})

this.options.push(marker)

})

this.map.plugin(['AMap.MarkerClusterer'], function () {

_this.markerClusterer = new AMap.MarkerClusterer(

_this.map,

_this.options,

{ gridSize: 80 }

) // 点聚合

})

},