Hôm nay gặp trường hợp phải đăng ký sự kiện click tới nhiều polygon trong google maps (mảng Polygon)
Mình dùng như này, tuy nhiên nó chỉ ăn 1 polygon đầu tiên, còn các polygon còn lại thì lại không ăn.
Code:
// Vẽ đường bao chiều về
if ($this.polygonBack == null) {
$this.polygonBack = [];
var pback = null;
for ( var i = 0; i < $this.center.gridLandmarkOfRouter.RouteConfigBack.length; i++) {
pback = $this.center.mapper.createPolygon(Mapper.DEFAULTPOLYGON, $this.center.gridLandmarkOfRouter.checkedPolygon());
// Vẽ đường bao lộ trình
pback.setOptions({ strokeColor: "#ff0080" });
pback.setPath(getPointsPolygon($this.center.gridLandmarkOfRouter.RouteConfigBack[i].Polygon));
$this.center.mapper.bindEvent(pback,"click", function () {
var options = {
strokeOpacity: 0.45,
strokeWeight: 3
};
// Duyệt qua và cập nhật lại giá trị mờ cho các polygon khác
polygon.setOptions({
strokeOpacity: 1,
strokeWeight: 10
});
});
// Thêm vào mảng
$this.polygonBack.push(pback);
}
Sau khi tìm hiểu thì do nó không phải dạng closure cho sự kiện click dùng asyn, mình đã chuyển lại sang dạng sau và nó hoạt động ngon.
// Vẽ đường bao chiều về
if ($this.polygonBack == null) {
$this.polygonBack = [];
for ( var i = 0; i < $this.center.gridLandmarkOfRouter.RouteConfigBack.length; i++) {
var pback = $this.center.mapper.createPolygon(Mapper.DEFAULTPOLYGON, $this.center.gridLandmarkOfRouter.checkedPolygon());
// Vẽ đường bao lộ trình
pback.setOptions({ strokeColor: "#ff0080" });
pback.setPath(getPointsPolygon($this.center.gridLandmarkOfRouter.RouteConfigBack[i].Polygon));
(function (pback) {
$this.center.mapper.bindEvent(pback, "click", function () {
var options = {
strokeOpacity: 0.45,
strokeWeight: 3
};
// Duyệt qua và cập nhật lại giá trị mờ cho các polygon khác
pback.setOptions({
strokeOpacity: 1,
strokeWeight: 6
});
});
})(pback);
// Thêm vào mảng
$this.polygonBack.push(pback);
}
}
}
}
99eb84c6-dc34-4eea-9a55-bf838e5cdb64|0|.0|27604f05-86ad-47ef-9e05-950bb762570c