| 高德地图2.0 点聚合 点击 Maker显示信息窗体和自己的数据 | 您所在的位置：网站首页 › 高德地图有没有linux版 › 高德地图2.0 点聚合 点击 Maker显示信息窗体和自己的数据 |
高德地图2.0 点聚合 点击 Maker显示信息窗体和自己的数据
1.vue3+ts 使用高德地图2.0 点聚合 单击maker 显示信息窗体 解决无法 maker 和 需要的信息 相对应问题
2.直接上代码 效果图在下方
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Scale",
"AMap.MapType",
'AMap.PlaceSearch',
'AMap.AutoComplete',
'AMap.MouseTool',
'AMap.Circle',
'AMap.MarkerCluster'
],
})
.then((AMap) => {
map = new AMap.Map("map_box", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 6, //初始化地图级别
center: locationArr.value, //初始化地图中心点位置
// mapStyle: "amap://styles/270733bbb12c36d9bd368103b6a9e244"
mapStyle: "amap://styles/darkblue"
});
let lineArr: any = []
let LngLatArray2: any = [];
// lineArr2 = []
var size: number = 40;
var convertNum = 0;
var count = state.car_data.length;
//聚合点样式
var _renderClusterMarker = function (context) {
let data: any = context.clusterData[0].extData
var div = document.createElement("div");
var fontColor = "hsla(120,50%,0%,1)";
div.style.width = "37px";
div.style.height = "46px";
div.innerHTML = context.count;
div.style.lineHeight = size + "px";
div.style.color = fontColor;
div.style.fontSize = "14px";
div.style.textAlign = "center";
//自定义显示maker 的图标
div.style.backgroundImage = "url(自己图片的地址 网图)"
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
context.marker.on('click', function (e) {
var curZoom = map.getZoom();
if (curZoom < 20) {
curZoom += 1;
}
map.setZoomAndCenter(curZoom, e.lnglat);
});
};
//非聚合点样式
var _renderMarker = function (context) {
let data: any = context.data[0].extData
let content = ' ';
context.marker.setLabel({
direction: 'bottom',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: " " + data.license_plate_number + " " + "" + " " + data.car_speed + 'km/h' + "", //设置文本标注内容
});
context.marker.on('click', function () {
var info: any = [];
info.push("")
info.push("")
info.push("" + data.license_plate_number + "")
info.push(" ")
info.push("")
info.push("")
info.push(" 车辆名称 车牌号码 VIN码 车辆状态 定位时间 行驶速度 ")
info.push(" " + data.car_name + " " + data.license_plate_number + " " + data.vin + " " + data.online_status + " " + data.positioning_time + " " + data.car_speed + "km/h ")
info.push("")
info.push(" ")
// info.push("轨迹详情跟踪车辆 ")
infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
content: info.join("") //使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(map, context.marker.getPosition());
});
var offset = new AMap.Pixel(-9, -9);
context.marker.setContent(content);
context.marker.setOffset(offset);
};
const MarkerCluster = (data: any) => {
var gridSize = 40;
var cluster = new AMap.MarkerCluster(map, data, {
gridSize: gridSize,
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
});
};
//处理数据 从接口获得的数据 拿出 经纬度
for (let i = 0; i < state.car_data.length; i++) {
lat = state.car_data[i].latitude
lng = state.car_data[i].longitude
if (lat != '0') {
lineArr.push(new AMap.LngLat(lng, lat))
}
}
// 进行批量 gps 转高德坐标点
let pageNum = parseInt((lineArr.length + size - 1) / size + '');
const convert = (LngLatArray: any) => {
AMap.convertFrom(LngLatArray, 'gps', function (status: any, result: any) {
if (result.info === "ok" && status == 'complete') {
var resLnglat = result.locations[0];
console.log(result.locations.length);
//这里是重点 extData 把你要在maker 上显示的数据
//塞在里面 1对1 对应好 这里赋空值在下面赛
for (let index = 0; index < result.locations.length; index++) {
LngLatArray2.push({
weight: '',
lnglat: [result.locations[index].lng, result.locations[index].lat],
extData: ""
})
}
convertNum++;
if (convertNum >= pageNum) {
for (let index = 0; index < LngLatArray2.length; index++) {
LngLatArray2[index].extData = state.car_data[index];
}
// const combinedArr = LngLatArray2.concat(factoryArray, hydrogenArray);
MarkerCluster(LngLatArray2);
}
}
});
}
for (var i = 0; i < pageNum; i++) {
var LngLatArraySlice = lineArr.slice(i * size, (i + 1) * size);
convert(LngLatArraySlice);
}
})
}
3.这里重点分析 讲解一下
高德地图api2.0 以后 不能MarkerCluster 只能传入
不再像以前可以传 maker 数组，可以把对应数据的标识赛在maker 的title中 ,相当于添加一个唯一标识，然后去匹配数据，而是只能塞入上方图片的数组，所以无法做到点击maker 拿到该maker对应的信息，所以有了新的数据形式 构建这样一个数组 weight是权重，这里没用到就不解释了，extData 可以存入你要显示的数据， 然后自定义聚合点样式 let data: any = context.clusterData[0].extData和非聚合点样式 let data: any = context.data[0].extData这样就可以获取到每个maker 中存入相对应的数据进行 信息窗体的显示 3.自定义点聚合的样式
4.点击maker 显示窗体 显示自己需要显示的信息
|
【本文地址】
公司简介
联系我们