高德地圖
代碼如下
在index.html中引入
<link rel="stylesheet" />
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2cc213d13f7567d2723e87c1540625b5&plugin=AMap.MarkerClusterer"></script>
在map.vue中寫入如下
<template>
<div class="map">
<div id="container" class="map" tabindex="0"></div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
lnt: 113.951955,
lat: 22.530825,
content: "aaa",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 116.397428,
lat: 39.90923,
content: "bbb",
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: 117.000923,
lat: 36.675807,
content: "ccc",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 112.89114340293699,
lat: 38.06208615376387,
content: "ddd",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 116.303843,
lat: 39.983412,
content: "eee",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 108.94444,
lat: 34.14248,
content: "fff",
url:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg",
},
{
lnt: 121.472644,
lat: 31.231706,
content: "ggg",
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: 121.506377,
lat: 31.245105,
content: "hhh",
url:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg",
},
{
lnt: 121.392735,
lat: 31.083714,
content: "iii",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 107.0138,
lat: 33.0436,
content: "jjjj",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
}, //漢中
{
lnt: 108.95,
lat: 34.27,
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: 109.11,
lat: 35.09,
content: "lll",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 110.51,
lat: 38.83,
content: "mmm",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 109.77,
lat: 38.3,
content: "nnnn",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 106.16,
lat: 33.34,
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: [105, 34],
zoom: 4,
});
this.list.map((data) => {
// 海量生成marker點(diǎn)
var marker = new AMap.Marker({
position: new AMap.LngLat(data.lnt, data.lat),
title: data.title,
content: `<div><img style="width:100px;height:60px" src="${data.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, //使用默認(rèn)信息窗體框樣式递递，顯示信息內(nèi)容
offset: new AMap.Pixel(0, -15),
});
//監(jiān)聽marker的點(diǎn)擊事件
AMap.event.addListener(marker, "click", function (e) {
infoWindow.open(
map,
// 窗口信息的位置
marker.getPosition(data.lnt, data.lat)
);
});
markers.push(marker);
//添加監(jiān)聽事件盏求，當(dāng)前縮放級別
AMap.event.addListener(map, "zoomend", function () {
var zoom = map.getZoom();
// 關(guān)閉信息窗體
map.clearInfoWindow(infoWindow);
});
});
//使用renderClusterMarker屬性實(shí)現(xiàn)聚合點(diǎn)的完全自定義繪制
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);
}
// 點(diǎn)聚合樣式
cluster = new AMap.MarkerClusterer(map, markers, {
gridSize: 80,
});
},
},
};
</script>
<style lang="less" scope>
.map {
width: 100%;
height: 100%;
#container {
width: 100%;
height: 100%;
}
}
</style>
百度地圖
代碼如下
在index.html中引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<!--引入聚合點(diǎn)文件-->
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
在map.vue中寫入如下
<template>
<div class="total">
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
lnt: 113.951955,
lat: 22.530825,
content: "aaa",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 116.397428,
lat: 39.90923,
content: "bbb",
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: 117.000923,
lat: 36.675807,
content: "ccc",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 112.89114340293699,
lat: 38.06208615376387,
content: "ddd",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 116.303843,
lat: 39.983412,
content: "eee",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 108.94444,
lat: 34.14248,
content: "fff",
url:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg",
},
{
lnt: 121.472644,
lat: 31.231706,
content: "ggg",
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: 121.506377,
lat: 31.245105,
content: "hhh",
url:
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605524653591&di=fce2171454e6d4d44545e51b41bb4224&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Foriginal_pic%2F19%2F03%2F18%2Fbf2928abcd5f96beab12f7a8611614c5.jpg",
},
{
lnt: 121.392735,
lat: 31.083714,
content: "iii",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 107.0138,
lat: 33.0436,
content: "jjjj",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
}, //漢中
{
lnt: 108.95,
lat: 34.27,
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: 109.11,
lat: 35.09,
content: "lll",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
{
lnt: 110.51,
lat: 38.83,
content: "mmm",
url:
" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794114107,2569649938&fm=26&gp=0.jpg",
},
{
lnt: 109.77,
lat: 38.3,
content: "nnnn",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3897032442,810482418&fm=26&gp=0.jpg",
},
{
lnt: 106.16,
lat: 33.34,
content: "oooo",
url:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2126240618,1874470849&fm=26&gp=0.jpg",
},
],
};
},
mounted() {
this.getData();
},
methods: {
getData() {
var map = new BMap.Map("map");
var poi = new BMap.Point(112.53, 37.87);
map.enableScrollWheelZoom();
map.centerAndZoom(poi, 5);
//添加比例尺
map.addControl(new BMap.ScaleControl());
var markers = [];
var pt = null;
var i = 0;
var opts = {
width: 250,
height: 80,
title: "信息窗口",
enableMessage: true, //
};
for (var i; i < this.list.length; i++) {
pt = new BMap.Point(this.list[i]["lnt"], this.list[i]["lat"]);
markers.push(new BMap.Marker(pt));
var content = `<div>
<div>${this.list[i]["content"]}</div>
<a href="${this.list[i]["url"]}">詳情</a>
</div>`;
addClickHandler(content, markers[i]);
}
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e);
});
function openInfo(content, e) {
var p = e.target;
console.log(p);
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts);
map.openInfoWindow(infoWindow, point);
}
}
// //初始化點(diǎn)聚合
console.log("markers", markers);
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
});
map.addOverlay(markerClusterer);
//添加聚合點(diǎn)
markerClusterer.addMarkers(markers);
console.log(markerClusterer);
},
},
};
</script>
<style lang="less" scope>
.total {
width: 100%;
height: 100%;
#map {
width: 100%;
height: 100%;
}
}
</style>
