高德地图实现标点、点聚合和信息窗体
2021-03-06 19:27
阅读：606
标签：无数据 pix cti 创建 ddr 实例 icon 尺寸 数组
//展示
showscenicPoints() {
var icon = new AMap.Icon({
size: new AMap.Size(35, 45), // 图标尺寸
image: "/images/scenic.png" // Icon的图像
});
// console.log(this.scenicList);
this.scenicList.forEach((element, i) => {
// console.log(element);
if (element.latitude != "") {
var marker = new AMap.Marker({
position: new AMap.LngLat(element.longitude, element.latitude),
offset: new AMap.Pixel(-10, -10),
icon: icon // 添加 Icon 实例
// title:element.scenicName
});
marker.title = element.scenicName;
marker.imgUrl = element.pictureAddress;
marker.address = element.scenicAddress;
if (this.scenicTourist[i].num == undefined) {
marker.tourist = "暂无数据";
} else {
marker.tourist = this.scenicTourist[i].num;
}
marker.on("click", this.markerScenicClick);
this.allscenicPoints.push(marker);
}
});
this.map.add(this.allscenicPoints);
var that = this;
this.map.plugin(["AMap.MarkerClusterer"], function() {
// console.log(that.allscenicPoints);
new AMap.MarkerClusterer(
that.map, // 地图实例
that.allscenicPoints // 海量点组成的数组
);
});
},
// 创建信息窗口
markerClick(e) {
if (e.target.imgUrl == null) {
var content = [
"
",
"
",
"
",
"
地址：" +
e.target.address +
"",
"
" ];
} else {
var content = [
"
",
"
",
"
e.target.imgUrl +
"‘>
", "
地址：" +
e.target.address +
"",
"
" ];
}
var title = e.target.title;
var title = "
" + e.target.title + "
"; var infoWindow = new AMap.InfoWindow({
content: title + content.join("
")
")
});
infoWindow.open(this.map, [
e.target.getPosition().lng,
e.target.getPosition().lat
]);
},
高德地图实现标点、点聚合和信息窗体
标签：无数据 pix cti 创建 ddr 实例 icon 尺寸 数组
原文地址：https://www.cnblogs.com/w-rong/p/12850798.html
评论
亲，登录后才可以留言！