|
@@ -271,12 +271,74 @@
|
|
|
that.contentList = data.data;
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ getParkDetail(id) {
|
|
|
+ let that = this;
|
|
|
+ $.ajax({
|
|
|
+ url: conpath + "/parkData/" + id,
|
|
|
+ type: "get",
|
|
|
+ dataType: "json",
|
|
|
+ success: function (data) {
|
|
|
+ that.loadMap(data.addr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadMap(points) {
|
|
|
+ let that = this;
|
|
|
+ that.parkMap = new BMap.Map("mapcontainer");
|
|
|
+ that.parkMap.enableScrollWheelZoom();// 启用滚轮缩放
|
|
|
+ that.parkMap.enableDragging(); // 启用拖拽功能
|
|
|
+ const addr = new URL(window.location.href);
|
|
|
+ const id = addr.searchParams.get('id');
|
|
|
+ // 设定中心点和地图级别
|
|
|
+ if (id == 1) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
|
|
|
+ } else if (id == 2) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
|
|
|
+ } else if (id == 3) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
|
|
|
+ } else if (id == 4) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
|
|
|
+ } else if (id == 5) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
|
|
|
+ } else if (id == 6) {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
|
|
|
+ } else {
|
|
|
+ that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
|
|
|
+ }
|
|
|
+ that.parkMap.setMapType(BMAP_SATELLITE_MAP);
|
|
|
+ if (!points) return;
|
|
|
+ let pointList = points.split('@');
|
|
|
+ let result = [];
|
|
|
+ pointList.forEach(function (point) {
|
|
|
+ let arr = point.split(',');
|
|
|
+ result.push(new BMap.Point(arr[0], arr[1]));
|
|
|
+ });
|
|
|
+ // 创建多边形
|
|
|
+ let polygon = new BMap.Polygon(result, {
|
|
|
+ strokeColor: "blue",
|
|
|
+ strokeWeight: 2,
|
|
|
+ strokeOpacity: 0.5,
|
|
|
+ strokeStyle: "dashed",
|
|
|
+ fillColor: "#4B98F6",
|
|
|
+ fillOpacity: 0.3
|
|
|
+ });
|
|
|
+ // 将多边形添加到地图中
|
|
|
+ that.parkMap.addOverlay(polygon);
|
|
|
+
|
|
|
+ that.pointList.forEach(function (point) {
|
|
|
+ let arr = point.split(',');
|
|
|
+ let p = new BMap.Point(arr[0], arr[1]);
|
|
|
+ let marker = new BMap.Marker(p);
|
|
|
+ that.parkMap.addOverlay(marker);
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
const url = new URL(window.location.href);
|
|
|
const id = url.searchParams.get('id');
|
|
|
this.getParkData(id);
|
|
|
+ this.getParkDetail(id);
|
|
|
}
|
|
|
})
|
|
|
</script>
|