init() {
//步骤：定义
map变量 调用
qq.maps
.Map() 构造函数 获取地图显示容器
//
设置地图中心点
var that = this;
that
.keyword = ""
var myLatlng = new
qq.maps
.LatLng(that
.center
.lat, that
.center
.lng);
//定义工厂模式函数
var myOptions = {
zoom: that
.zoom, //
设置地图缩放级别
center: myLatlng, //
设置中心点
样式
mapTypeId:
qq.maps
.MapTypeId
.ROAD
MAP, //
设置地图
样式详情参见
MapType
disableDefaultUI: true
}
//获取dom元素添加地图信息
map = new
qq.maps
.Map(document
.getElementById("container"), myOptions);
that
.getLocation()
},
async getLocation() {
const responseAll = await listUser({
sex: "1"
})
this
.peopleList = responseAll
.rows
this
.getLabel()
this
.getMaker()
},
getLabel() {
var peopleList = this
.peopleList
if (peopleList
.length != 0) {
const position
Map = new
Map();
for (let i = 0; i < peopleList
.length; i++) {
if (peopleList[i]
.lon && peopleList[i]
.lat) {
const key = `${peopleList[i]
.lat},${peopleList[i]
.lon}`;
if (!position
Map.has(key)) position
Map.set(key, []);
position
Map.get(key)
.push(peopleList[i]);
}
}
position
Map.forEach((people, key) => {
const [lat, lon] = key
.split(',')
.map(Number);
const position = new
qq.maps
.LatLng(lat, lon);
var labelName = people
.map(p => p
.userName)
.join(',')
const x = (this
.getTextByteLen(labelName)) * 10 * 0
.25 + 5;
const label = new
qq.maps
.Label({
offset: new
qq.maps
.Size(-x, -55),
position: position,
map:
map,
content: labelName,
style: {
color: "#ffffff",
fontSize: "14px",
backgroundColor: "rgba(64, 64, 65, 0
.8)",
border: "1px solid rgba(64, 64, 65, 0
.8)",
paddingLeft: "5px",
paddingTop: "2px",
paddingRight: "5px",
paddingBottom: "2px",
borderRadius: '5px'
},
visible: true
});
});
// cluster
.addMarkers(this
.markers);
}
},
getMaker() {
var peopleList = this
.peopleList
if (peopleList
.length != 0) {
this
.markers = []
for (var i = 0; i < peopleList
.length; i++) {
if (peopleList[i]
.lon && peopleList[i]
.lat) {
var anchor = new
qq.maps
.Point(14, 28),
size = new
qq.maps
.Size(28, 28),
origin = new
qq.maps
.Point(0, 0),
icon = new
qq.maps
.MarkerImage(this
.iconUrl, size, origin, anchor);
var position = new
qq.maps
.LatLng(peopleList[i]
.lat, peopleList[i]
.lon)
var marker = new
qq.maps
.Marker({
position: position,
map:
map,
icon: icon,
title: peopleList[i]
.userName,
});
this
.marker = this
.markers
.push(marker)
// 创建标记聚合器
}
}
const cluster = new
qq.maps
.MarkerCluster({
map:
map,
minimumClusterSize: 2, // 聚合触发阈值
markers: this
.markers,
gridSize: 40, // 聚合计算网格大小
zoomOnClick: true, // 点击聚合点自动缩放
onCluster: function(clusterMarker) {
clusterMarker
.setContent(`聚合数量：`);
//
鼠标悬停事件
console
.log("markers",markers)
qq.maps
.event
.addListener(clusterMarker, 'mouseover', () => {
// 提取所有标记的标签内容
const labelNames = markers
.map(marker => marker
.labelContent)
.join(',');
infoWindow
.setContent(`
<div style="background: rgba(64, 64, 65, 0
.9); color: white; padding: 6px 10px; border-radius: 4px; max-width: 250px; font-size: 12px;">
<strong>聚类点位(${count}):</strong> ${labelNames}
</div>
`);
infoWindow
.setPosition(clusterMarker
.getPosition());
infoWindow
.open(
map);
});
}
});
// cluster
.addMarkers(this
.markers);
}
},
getTextByteLen(text) {
var length = 0;
text
.split('')
.map(function(char) {
if (char
.charCodeAt(0) > 255) { //字符编码大于255，说明是双字节字符
length += 2;
} else {
length++;
}
});
return length;
},
// 位置模糊搜索
remoteMethod(query) {
if (query != '') {
this
.getAddress(query);
} else {
this
.addressList = [];
}
},
// 地址选择
onChange(val) {
console
.log(val)
map.panTo(new
qq.maps
.LatLng(val
.location
.lat, val
.location
.lng));
},
// 输入框模糊搜索
getAddress(query) {
var that = this
$
.ajax({
url: "https://apis
.map.qq.com/ws/place/v1/suggestion/",
data: {
key: '3NIBZ-NB5RB-WYUUM-NRFML-BJ6TT-I5FRV',
keyword: query,
region: '天津',
output: 'jsonp',
},
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "jsonpcallback",
success: function(result) {
console
.log(result)
that
.addressList = result
.data;
}
});
}, vue2 直接在原代码修改 聚合时不显示单个坐标点的标签，显示聚合的标签
本文介绍如何使用腾讯地图API自定义地图上的鼠标样式，通过设置draggableCursor和draggingCursor属性，实现鼠标指针在地图上的不同状态显示，如pointer和crosshair样式。
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
