From 83e2b9cffa9920bbefcc70baf42cd03543cc2d39 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 30 一月 2023 10:26:03 +0800
Subject: [PATCH] 点位显示
---
src/components/map/leafletMap.vue | 37 ++++++++++++++++++++++++++++++-------
1 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/src/components/map/leafletMap.vue b/src/components/map/leafletMap.vue
index c57b5ca..5b5faa9 100644
--- a/src/components/map/leafletMap.vue
+++ b/src/components/map/leafletMap.vue
@@ -3,13 +3,14 @@
</template>
<script>
-
export default {
name: "map",
components: {},
data() {
return {
map: null,
+ map_point: { x: "119.27179890", y: "28.59027084" },
+ map_zoom: 15,
mapUrl:
"http://117.139.13.157:41005/tilermap/rest/services/mapserver/baidu-image-db/{z}/{x}/{y}",
// mapUrls: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -18,8 +19,6 @@
crs: L.CRS.Baidu,
minZoom: 2,
maxZoom: 19,
- center: [28.59582231,119.27226470],
- zoom: 16,
zoomControl: true, // 绂佺敤 + - 鎸夐挳
doubleClickZoom: true, // 绂佺敤鍙屽嚮鏀惧ぇ
attributionControl: false, // 绉婚櫎鍙充笅瑙抣eaflet鏍囪瘑
@@ -45,25 +44,49 @@
mounted() {
setTimeout(() => {
this.createrMap();
- }, 500);
+ }, 100);
},
methods: {
/* 鍒涘缓鍦板浘瀹炰緥 */
createrMap() {
+ this.option.center = [eval(this.map_point.y), eval(this.map_point.x)];
+ this.option.zoom = this.map_zoom;
this.map = this.$map.createrMap("map-container", this.option);
// this.$map.createrLayers(this.map, this.mapUrls) //鍒囩墖鍦板浘
// this.$map.createrChinatm(this.map, this.mapUrl); // 鍥惧眰
this.map.pm.setLang("zh");
this.map.pm.addControls(this.options);
+ this.locationMap();
+ },
+ locationMap() {
+ if (this.mark && this.map) {
+ // 鍒涘缓涓�涓� Marker 瀹炰緥锛�
+ var marker = L.marker([eval(this.map_point.y), eval(this.map_point.x)]).addTo(
+ this.map
+ );
+ let that = this
+ // 灏嗗垱寤虹殑鐐规爣璁版坊鍔犲埌宸叉湁鐨勫湴鍥惧疄渚嬶細
+ marker.on("click", function (e) {
+ console.log("666");
+ that.$emit("fatherMethod");
+ });
+ }
},
},
+ watch: {
+ point(newval, oldval) {
+ this.map_point = newval;
+ this.locationMap();
+ },
+ zoom(newval, oldval) {
+ this.map_zoom = newval;
+ },
+ },
+ props: ["point", "zoom", "mark"],
};
</script>
<style >
.map-container {
- position: absolute;
- left: 0;
- top: 0;
width: 100%;
height: 100%;
}
--
Gitblit v1.8.0