image.png
代码如下
<template>
<div class="map">
<div id="container" class="map" tabindex="0"></div>
<div v-show="info" class="info"></div>
</div>
</template>
<script>
export default {
data() {
return {
info: false,
list: [
{
lnt: 108.95119,
lat: 34.278319,
content: "aaa",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 108.933506,
lat: 34.281149,
content: "bbb",
url:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg",
},
{
lnt: 108.948382,
lat: 34.275452,
content: "ccc",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 108.943747,
lat: 34.262714,
content: "ddd",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 108.499153,
lat: 34.305575,
content: "eee",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 109.348806,
lat: 34.16184,
content: "fff",
url:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg",
},
{
lnt: 109.334227,
lat: 34.144932,
content: "ggg",
url:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg",
}, //上海
{
lnt: 109.519305,
lat: 34.250988,
content: "hhh",
url:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg",
},
{
lnt: 109.495131,
lat: 34.203172,
content: "iii",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 109.506769,
lat: 34.227889,
content: "jjjj",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
}, //汉中
{
lnt: 109.038082,
lat: 32.692036,
content: "kkkk",
url:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524499220&di=061f5404ccf4b56ca5109c6a74cad7e8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F01%2F15%2Fecc1be26af0ccb3aab8a64cbc1d7d5b9.jpg",
},
{
lnt: 108.932603,
lat: 32.726199,
content: "lll",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 108.098527,
lat: 34.286414,
content: "mmm",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 108.451597,
lat: 34.312657,
content: "nnnn",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 108.354436,
lat: 34.566548,
content: "oooo",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
],
};
},
mounted() {
this.getMap();
},
methods: {
getMap() {
var cluster,
markers = [];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [108.95119, 34.278319],
zoom: 8,
viewMode: "3D",
pinch: 45,
mapStyle: "amap://styles/52787a3119fdf6e3d0d9fe858462deb0",
});
var url = "../../static/maker.png";
this.list.map((data) => {
// 海量生成marker点
var marker = new AMap.Marker({
position: new AMap.LngLat(data.lnt, data.lat),
title: data.title,
content: `<div><img style="width:60px;height:60px" src="${url}"></img></div>`,
offset: new AMap.Pixel(-15, -15),
});
var content = `<div style="width:200px;height:50px;">${data.content},${data.lnt},${data.lat}<div>
<a href="${data.url}" />详情</div></div>`;
content.replace(/undefined/g, "");
// 窗体信息
let infoWindow = new AMap.InfoWindow({
content: content, //使用默认信息窗体框样式，显示信息内容
offset: new AMap.Pixel(0, -15),
});
var that = this;
//监听marker的点击事件
AMap.event.addListener(marker, "click", function (e) {
that.infoBtn();
infoWindow.open(
map,
// 窗口信息的位置
marker.getPosition(data.lnt, data.lat)
);
});
markers.push(marker);
//添加监听事件，当前缩放级别
AMap.event.addListener(map, "zoomend", function () {
var zoom = map.getZoom();
that.info = false;
// 关闭信息窗体
map.clearInfoWindow(infoWindow);
});
});
//使用renderClusterMarker属性实现聚合点的完全自定义绘制
var count = markers.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement("div");
var Hue = 180 - factor * 180;
var bgColor = "hsla(" + Hue + ",100%,50%,0.7)";
var fontColor = "hsla(" + Hue + ",100%,20%,1)";
var borderColor = "hsla(" + Hue + ",100%,40%,1)";
var shadowColor = "hsla(" + Hue + ",100%,50%,1)";
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + "px";
div.style.border = "solid 1px " + borderColor;
div.style.borderRadius = size / 2 + "px";
div.style.boxShadow = "0 0 1px " + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + "px";
div.style.color = fontColor;
div.style.fontSize = "14px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
};
if (cluster) {
cluster.setMap(null);
}
// 点聚合样式
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80,
});
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,
//线条颜色，使用16进制颜色代码赋值。默认值为#006600
strokeColor: "rgb(20,164,173)",
strokeWeight: 4,
//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
strokeOpacity: 0.5,
//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
fillColor: "rgba(0,0,0)",
//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
fillOpacity: 1,
//轮廓线样式，实线:solid，虚线:dashed
strokeStyle: "dashed",
/*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
ie9+浏览器有效 取值：
实线：[0,0,0]
虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 （如此反复）组成的虚线*/
strokeDasharray: [10, 2, 10],
});
polygon.setPath(pathArray);
map.add(polygon);
AMap.plugin(["AMap.ControlBar"], function () {
// 添加 3D 罗盘控制
map.addControl(new AMap.ControlBar());
});
});
},
infoBtn() {
this.info = true;
},
},
};
</script>
<style lang="less" scope>
.map {
width: 100%;
height: 100%;
background: #000;
position: relative;
#container {
width: 100%;
height: 100%;
}
.info {
position: absolute;
width: 100px;
height: 100px;
background: pink;
}
}
</style>
注意：点聚合引入文件可以在这里找到https://www.jianshu.com/p/4659b0897007
