webapp / GreenwayWeb

Commit 96898da23549d6267c7f39be165c7ffc456ca0b4

Authored by wesley88
1 parent d0f0cb1a

1

Inline Side-by-side
Showing 13 changed files with 982 additions and 186 deletions
admin-web-master/dist.zip deleted
View file @d0f0cb1
No preview for this file type
admin-web-master/public/index.html
  View file @96898da
@@ -7,11 +7,12 @@ @@ -7,11 +7,12 @@
7 <link rel="icon" type="image/png" href="favicon.svg"> 7 <link rel="icon" type="image/png" href="favicon.svg">
8 <!-- <title><%= htmlWebpackPlugin.options.title %></title> --> 8 <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
9 <title>招商服务系统</title> 9 <title>招商服务系统</title>
10 - <!-- 删除: <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY&callback=initMap"></script> -->  
11 - <script src="https://map.qq.com/api/js?v=2.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script> 10 + <!-- <script src="https://map.qq.com/api/js?v=2.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script>
12 <script src="https://map.qq.com/api/gljs?v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script> 11 <script src="https://map.qq.com/api/gljs?v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script>
13 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script> 12 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script>
14 - <!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU&libraries=geometry"></script> --> 13 + -->
  14 + <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU&libraries=geometry"></script>
  15 + <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script>
15 </head> 16 </head>
16 <body> 17 <body>
17 <noscript> 18 <noscript>
admin-web-master/src/components/add/addcd.vue
  View file @96898da
@@ -88,7 +88,8 @@ @@ -88,7 +88,8 @@
88 </el-form-item> --> 88 </el-form-item> -->
89 <el-form-item label="地图标点" prop="detailedLocation"> 89 <el-form-item label="地图标点" prop="detailedLocation">
90 <div style="width: 100%;height: 300px;"> 90 <div style="width: 100%;height: 300px;">
91 - <newmap :isonloed="info.id?true:false" :lat="lat" :lng="lng" @updatecenter="updatecenter"></newmap> 91 + <!-- :message="ruleForm.detailedLocation" -->
  92 + <newmap :isonloed="info.id?true:false" :lat="lat" :lng="lng" @updatecenter="updatecenter"></newmap>
92 </div> 93 </div>
93 </el-form-item> 94 </el-form-item>
94 <el-form-item label="场地描述" prop="description"> 95 <el-form-item label="场地描述" prop="description">
@@ -262,8 +263,8 @@ @@ -262,8 +263,8 @@
262 if (this.info && this.info.id) { 263 if (this.info && this.info.id) {
263 this.ruleForm = this.info 264 this.ruleForm = this.info
264 if (this.ruleForm.mapMarker) { 265 if (this.ruleForm.mapMarker) {
265 - this.lat = this.ruleForm.mapMarker.split(',')[0]  
266 - this.lng = this.ruleForm.mapMarker.split(',')[1] 266 + this.lat = Number(this.ruleForm.mapMarker.split(',')[0])
  267 + this.lng = Number(this.ruleForm.mapMarker.split(',')[1])
267 } 268 }
268 } else { 269 } else {
269 270
admin-web-master/src/components/newmap/index copy 2.vue 0 → 100644
  View file @96898da
  1 +<template>
  2 + <div style="position: relative;width: 100%;">
  3 + <div id="mapContainer" class="map"></div>
  4 + <div class="search-box">
  5 + <input v-model="searchQuery" placeholder="输入地址进行搜索" />
  6 + <button type="button" @click="searchLocation">搜索</button>
  7 + </div>
  8 + <div v-if="searchResults.length > 0" class="search-results">
  9 + <ul>
  10 + <li v-for="(result, index) in searchResults" :key="index" @click="selectResult(result)">
  11 + {{ result.title }}
  12 + </li>
  13 + </ul>
  14 + </div>
  15 + </div>
  16 +</template>
  17 +<script>
  18 + export default {
  19 + name: 'TencentMap',
  20 + props: {
  21 + lat: {
  22 + type: Number,
  23 + default: 30.67
  24 + },
  25 + lng: {
  26 + type: Number,
  27 + default: 104.06
  28 + },
  29 + isonloed: {
  30 + type: Boolean,
  31 + default: false
  32 + },
  33 + isx: {
  34 + type: Boolean,
  35 + default: true
  36 + },
  37 + message: {
  38 + type: String,
  39 + default: ''
  40 + },
  41 + },
  42 + data() {
  43 + return {
  44 + map: null,
  45 + marker: null,
  46 + address: '',
  47 + searchQuery: '', // 搜索查询
  48 + searchResults: [], // 搜索结果列表
  49 +
  50 + };
  51 + },
  52 + mounted() {
  53 + // 初始化地图
  54 + this.initMap();
  55 + },
  56 + methods: {
  57 + // 选择某一条搜索结果
  58 + selectResult(result) {
  59 + const latLng = new qq.maps.LatLng(result.location.lat, result.location.lng);
  60 +
  61 + // 移动地图中心到选择的位置
  62 + this.map.setCenter(latLng);
  63 +
  64 + // 更新标记位置
  65 + this.marker.setPosition(latLng);
  66 +
  67 + // 获取地址信息
  68 + this.getAreaCode(result.location.lat, result.location.lng);
  69 +
  70 +
  71 + },
  72 + searchLocation() {
  73 + let that = this
  74 + if (!this.searchQuery) {
  75 + this.$message.error('请输入搜索地址');
  76 + return;
  77 + }
  78 +
  79 + // 使用腾讯地图的搜索服务
  80 + this.$jsonp("https://apis.map.qq.com/ws/place/v1/search", {
  81 + keyword: this.searchQuery,
  82 + key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', // 使用你的腾讯地图API key
  83 + output: "jsonp",
  84 + boundary: 'nearby(' + that.lat + ',' + that.lng + ',1000,1)'
  85 + }).then((res) => {
  86 + console.error(res)
  87 + if (res.status === 0 && res.data.length > 0) {
  88 + this.searchResults = res.data; // 存储搜索结果
  89 + } else {
  90 + this.$message.error('未找到相关地址');
  91 + this.searchResults = []; // 清空搜索结果
  92 + }
  93 + }).catch(err => {
  94 + this.$message.error("搜索失败");
  95 + console.error(err);
  96 + });
  97 + },
  98 + initMap() {
  99 + if (this.isx) {
  100 +
  101 + } else {
  102 + this.lat = this.message.split(',')[0]
  103 + this.lng = this.message.split(',')[1]
  104 + }
  105 + // 将经纬度转换为腾讯地图的LatLng对象
  106 + const centerLatLng = new qq.maps.LatLng(this.lat, this.lng);
  107 +
  108 + // 创建地图实例
  109 + this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
  110 + center: centerLatLng,
  111 + zoom: 13,
  112 + // mapStyleId: 'style1'
  113 + });
  114 +
  115 + // 创建标记
  116 + if (this.isonloed) {
  117 + this.marker = new qq.maps.Marker({
  118 + position: centerLatLng,
  119 + map: this.map
  120 + });
  121 + } else {
  122 + this.marker = new qq.maps.Marker({
  123 + // position: centerLatLng,
  124 + map: this.map
  125 + });
  126 + }
  127 + if (this.isx) {
  128 + qq.maps.event.addListener(this.map, 'click', this.onMapClick);
  129 + } else {
  130 + const centerLatLng1 = new qq.maps.LatLng(this.message.split(',')[0], this.message.split(',')[1]);
  131 + console.error(this.message)
  132 + this.marker = new qq.maps.Marker({
  133 + position: centerLatLng1,
  134 + map: this.map
  135 + });
  136 + }
  137 +
  138 + // 添加点击事件监听器
  139 + // qq.maps.event.addListener(this.marker, 'click', this.onMarkerClick);
  140 +
  141 + // 添加地图点击事件监听器
  142 +
  143 +
  144 + // // 获取地址信息
  145 + // this.getAreaCode(this.lat, this.lng);
  146 + },
  147 + onMarkerClick() {
  148 + alert('您点击了标记点');
  149 + },
  150 + onMapClick(event) {
  151 + // 获取点击位置的经纬度
  152 + const newLatLng = event.latLng;
  153 +
  154 + // 更新标记位置
  155 + this.marker.setPosition(newLatLng);
  156 + this.getAreaCode(newLatLng.getLat(), newLatLng.getLng());
  157 + // 更新父组件中的经纬度
  158 +
  159 +
  160 + // 获取新的地址信息
  161 +
  162 + },
  163 + getAreaCode(lat, lng) {
  164 + this.searchQuery = ''
  165 + // 清空搜索结果
  166 + this.searchResults = [];
  167 + let that = this;
  168 + //这里可以直接this.$jsonp地址传入你的经纬度;
  169 + that.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
  170 + location: `${lat},${lng}`, // 经纬度
  171 + key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', //这里就是要开启那个service不然会报错让你开启
  172 + output: "jsonp", // output必须jsonp 不然会超时
  173 + }).then((res) => {
  174 + if (res.message == 'Success') {
  175 + console.log(res);
  176 + that.address = res.result.address
  177 + that.$emit('updatecenter', {
  178 + lat: lat,
  179 + lng: lng,
  180 + address: that.address
  181 + });
  182 + } else {
  183 + this.$message.error(res.message)
  184 +
  185 + }
  186 + }).catch(err => {
  187 + this.$message.error("获取城市编码失败")
  188 + console.error(err)
  189 + })
  190 + }
  191 + }
  192 + }
  193 +</script>
  194 +
  195 +<style scoped>
  196 + .map {
  197 + width: 100%;
  198 + height: 300px;
  199 + }
  200 +
  201 + .search-box {
  202 + position: absolute;
  203 + top: 10px;
  204 + left: 10px;
  205 + z-index: 1000;
  206 + background: #fff;
  207 + padding: 10px;
  208 + border-radius: 5px;
  209 + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  210 + width: 280px;
  211 + }
  212 +
  213 + .search-box input {
  214 + padding: 5px;
  215 + margin-right: 5px;
  216 + }
  217 +
  218 + .search-box button {
  219 + padding: 5px 10px;
  220 + background-color: #007bff;
  221 + color: #fff;
  222 + border: none;
  223 + border-radius: 3px;
  224 + cursor: pointer;
  225 + }
  226 +
  227 + .search-box button:hover {
  228 + background-color: #0056b3;
  229 + }
  230 +
  231 + .search-results {
  232 + position: absolute;
  233 + top: 60px;
  234 + left: 10px;
  235 + z-index: 999;
  236 + background: #fff;
  237 + padding: 10px;
  238 + border-radius: 5px;
  239 + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  240 + max-height: 200px;
  241 + overflow-y: auto;
  242 + width: 280px;
  243 +
  244 + }
  245 + .search-results::-webkit-scrollbar {
  246 + display: none; /* 隐藏滚动条 */
  247 + }
  248 + .search-results ul {
  249 + list-style: none;
  250 + padding: 0;
  251 + margin: 0;
  252 + }
  253 +
  254 + .search-results li {
  255 + padding: 5px;
  256 + cursor: pointer;
  257 + }
  258 +
  259 + .search-results li:hover {
  260 + background-color: #f0f0f0;
  261 + }
  262 +</style>
0 \ No newline at end of file 263 \ No newline at end of file
admin-web-master/src/components/newmap/index.vue
  View file @96898da
1 <template> 1 <template>
2 - <div style="position: relative;width: 100%;"> 2 + <div style="width: 100%;">
3 <div id="mapContainer" class="map"></div> 3 <div id="mapContainer" class="map"></div>
4 - <div class="search-box"> 4 + <div class="search-box" v-if="isx">
5 <input v-model="searchQuery" placeholder="输入地址进行搜索" /> 5 <input v-model="searchQuery" placeholder="输入地址进行搜索" />
6 - <button type="button" @click="searchLocation">搜索</button> 6 + <div style="box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);display: flex;align-items: center;background: #fff;padding: 0 20px;border-radius: 5px;overflow: hidden;margin-left: 10px;">
  7 + <i class="el-icon-search" style="margin-right: 10px;color: #3F9B6A;"></i>
  8 + <button type="button" @click="searchLocation">搜索</button>
  9 + </div>
7 </div> 10 </div>
8 <div v-if="searchResults.length > 0" class="search-results"> 11 <div v-if="searchResults.length > 0" class="search-results">
9 <ul> 12 <ul>
@@ -56,13 +59,27 @@ @@ -56,13 +59,27 @@
56 methods: { 59 methods: {
57 // 选择某一条搜索结果 60 // 选择某一条搜索结果
58 selectResult(result) { 61 selectResult(result) {
59 - const latLng = new qq.maps.LatLng(result.location.lat, result.location.lng);  
60 62
61 - // 移动地图中心到选择的位置  
62 - this.map.setCenter(latLng); 63 + console.error('====')
  64 + let lat = result.location.lat;
  65 + let lng = result.location.lng;
  66 +
  67 + //修改点标记的位置
  68 + this.marker.updateGeometries([
  69 + {
  70 + "styleId":"myStyle",
  71 + "id": "1",
  72 + "position": new TMap.LatLng(lat, lng),
  73 + }
  74 + ])
  75 +
  76 + // const latLng = new TMap.maps.LatLng(result.location.lat, result.location.lng);
63 77
64 - // 更新标记位置  
65 - this.marker.setPosition(latLng); 78 + // // 移动地图中心到选择的位置
  79 + // this.map.setCenter(latLng);
  80 +
  81 + // // 更新标记位置
  82 + // this.marker.setPosition(latLng);
66 83
67 // 获取地址信息 84 // 获取地址信息
68 this.getAreaCode(result.location.lat, result.location.lng); 85 this.getAreaCode(result.location.lat, result.location.lng);
@@ -99,39 +116,57 @@ @@ -99,39 +116,57 @@
99 if (this.isx) { 116 if (this.isx) {
100 117
101 } else { 118 } else {
102 - this.lat = this.message.split(',')[0]  
103 - this.lng = this.message.split(',')[1] 119 + this.lat = Number(this.message.split(',')[0])
  120 + this.lng = Number(this.message.split(',')[1])
104 } 121 }
105 // 将经纬度转换为腾讯地图的LatLng对象 122 // 将经纬度转换为腾讯地图的LatLng对象
106 - const centerLatLng = new qq.maps.LatLng(this.lat, this.lng); 123 + const centerLatLng = new TMap.LatLng(this.lat, this.lng);
107 124
108 - // 创建地图实例  
109 - this.map = new qq.maps.Map(document.getElementById('mapContainer'), { 125 + this.map = new TMap.Map(document.getElementById("mapContainer"), {
110 center: centerLatLng, 126 center: centerLatLng,
111 zoom: 13, 127 zoom: 13,
112 - // mapStyleId: 'style1' 128 + mapStyleId: 'style1'
113 }); 129 });
114 130
115 // 创建标记 131 // 创建标记
116 if (this.isonloed) { 132 if (this.isonloed) {
117 - this.marker = new qq.maps.Marker({  
118 - position: centerLatLng,  
119 - map: this.map 133 + this.marker = new TMap.MultiMarker({
  134 + map: this.map, //指定地图容器
  135 + //点标记数据数组
  136 + geometries: [
  137 + {
  138 + "styleId":"myStyle",
  139 + "id": "1",
  140 + "position": new TMap.LatLng(this.lat,this.lng),
  141 + }
  142 + ]
120 }); 143 });
121 } else { 144 } else {
122 - this.marker = new qq.maps.Marker({  
123 - // position: centerLatLng, 145 + this.marker = new TMap.MultiMarker({
124 map: this.map 146 map: this.map
125 }); 147 });
126 } 148 }
127 if (this.isx) { 149 if (this.isx) {
128 - qq.maps.event.addListener(this.map, 'click', this.onMapClick); 150 + // TMap.maps.event.addListener(this.map, 'click', this.onMapClick);
  151 +
  152 + this.map.on("click",this.onMapClick)
129 } else { 153 } else {
130 - const centerLatLng1 = new qq.maps.LatLng(this.message.split(',')[0], this.message.split(',')[1]);  
131 - console.error(this.message)  
132 - this.marker = new qq.maps.Marker({  
133 - position: centerLatLng1,  
134 - map: this.map 154 + // const centerLatLng1 = new TMap.maps.LatLng(this.message.split(',')[0], this.message.split(',')[1]);
  155 + // console.error(this.message)
  156 + // this.marker = new TMap.maps.Marker({
  157 + // position: centerLatLng1,
  158 + // map: this.map
  159 + // });
  160 + this.marker = new TMap.MultiMarker({
  161 + map: this.map, //指定地图容器
  162 + //点标记数据数组
  163 + geometries: [
  164 + {
  165 + "styleId":"myStyle",
  166 + "id": "1",
  167 + "position": new TMap.LatLng(Number(this.message.split(',')[0]), Number(this.message.split(',')[1])),
  168 + }
  169 + ]
135 }); 170 });
136 } 171 }
137 172
@@ -147,17 +182,32 @@ @@ -147,17 +182,32 @@
147 onMarkerClick() { 182 onMarkerClick() {
148 alert('您点击了标记点'); 183 alert('您点击了标记点');
149 }, 184 },
150 - onMapClick(event) {  
151 - // 获取点击位置的经纬度  
152 - const newLatLng = event.latLng; 185 + onMapClick(evt) {
  186 + console.error('====')
  187 + let lat = evt.latLng.getLat().toFixed(6);
  188 + let lng = evt.latLng.getLng().toFixed(6);
  189 +
  190 + //修改点标记的位置
  191 + this.marker.updateGeometries([
  192 + {
  193 + "styleId":"myStyle",
  194 + "id": "1",
  195 + "position": new TMap.LatLng(lat, lng),
  196 + }
  197 + ])
  198 +
  199 + // // 回显经纬度
  200 + // _this.$emit('PositionDegrees', {lng, lat})
  201 + // // 获取点击位置的经纬度
  202 + // const newLatLng = event.latLng;
153 203
154 - // 更新标记位置  
155 - this.marker.setPosition(newLatLng);  
156 - this.getAreaCode(newLatLng.getLat(), newLatLng.getLng());  
157 - // 更新父组件中的经纬度 204 + // // 更新标记位置
  205 + // this.marker.setPosition(newLatLng);
  206 + this.getAreaCode(lat,lng);
  207 + // // 更新父组件中的经纬度
158 208
159 209
160 - // 获取新的地址信息 210 + // // 获取新的地址信息
161 211
162 }, 212 },
163 getAreaCode(lat, lng) { 213 getAreaCode(lat, lng) {
@@ -175,8 +225,8 @@ @@ -175,8 +225,8 @@
175 console.log(res); 225 console.log(res);
176 that.address = res.result.address 226 that.address = res.result.address
177 that.$emit('updatecenter', { 227 that.$emit('updatecenter', {
178 - lat: lat,  
179 - lng: lng, 228 + lat: Number(lat),
  229 + lng: Number(lng),
180 address: that.address 230 address: that.address
181 }); 231 });
182 } else { 232 } else {
@@ -203,36 +253,49 @@ @@ -203,36 +253,49 @@
203 top: 10px; 253 top: 10px;
204 left: 10px; 254 left: 10px;
205 z-index: 1000; 255 z-index: 1000;
206 - background: #fff;  
207 - padding: 10px;  
208 - border-radius: 5px;  
209 - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  
210 - width: 280px; 256 + /* background: #fff; */
  257 + /* padding: 10px; */
  258 + /* border-radius: 5px; */
  259 + /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
  260 + /* width: 280px; */
  261 + display: flex;
  262 + justify-content: space-between;
211 } 263 }
212 264
213 .search-box input { 265 .search-box input {
214 - padding: 5px; 266 + /* padding: 5px; */
  267 + padding: 15px 8px;
215 margin-right: 5px; 268 margin-right: 5px;
  269 + font-size: 10px;
  270 + box-sizing: border-box;
  271 + border-radius: 5px;
  272 + border: 1px solid #eee;
  273 + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  274 + width: 200px;
216 } 275 }
217 276
218 .search-box button { 277 .search-box button {
219 - padding: 5px 10px;  
220 - background-color: #007bff;  
221 - color: #fff; 278 + padding: 15px 0;
  279 + background-color: #fff;
  280 + /* color: #fff; */
222 border: none; 281 border: none;
223 border-radius: 3px; 282 border-radius: 3px;
224 cursor: pointer; 283 cursor: pointer;
  284 + height: 100%;
  285 + box-sizing: border-box;
  286 + font-size: 10px;
  287 + color: -internal-light-dark(black, white);
225 } 288 }
226 289
227 .search-box button:hover { 290 .search-box button:hover {
228 - background-color: #0056b3; 291 + background-color: #fff;
229 } 292 }
230 293
231 .search-results { 294 .search-results {
232 position: absolute; 295 position: absolute;
233 top: 60px; 296 top: 60px;
234 left: 10px; 297 left: 10px;
235 - z-index: 999; 298 + z-index: 1000;
236 background: #fff; 299 background: #fff;
237 padding: 10px; 300 padding: 10px;
238 border-radius: 5px; 301 border-radius: 5px;
admin-web-master/src/components/newmap/indexall copy.vue 0 → 100644
  View file @96898da
  1 +<template>
  2 + <div>
  3 + <div id="container"></div>
  4 + <div class="search-box">
  5 + <input v-model="searchQuery" placeholder="输入地址进行搜索" />
  6 + <button type="button" @click="searchLocation">搜索</button>
  7 + </div>
  8 + <!-- <div id="toolControl">
  9 + <div
  10 + class="toolItem"
  11 + :class="{ active: activeType === 'marker' }"
  12 + id="marker"
  13 + title="点标记"
  14 + @click="setActiveType('marker')"
  15 + ></div>
  16 + <div
  17 + class="toolItem"
  18 + :class="{ active: activeType === 'polyline' }"
  19 + id="polyline"
  20 + title="折线"
  21 + @click="setActiveType('polyline')"
  22 + ></div>
  23 + <div
  24 + class="toolItem"
  25 + :class="{ active: activeType === 'polygon' }"
  26 + id="polygon"
  27 + title="多边形"
  28 + @click="setActiveType('polygon')"
  29 + ></div>
  30 + <div
  31 + class="toolItem"
  32 + :class="{ active: activeType === 'circle' }"
  33 + id="circle"
  34 + title="圆形"
  35 + @click="setActiveType('circle')"
  36 + ></div>
  37 + <div
  38 + class="toolItem"
  39 + :class="{ active: activeType === 'rectangle' }"
  40 + id="rectangle"
  41 + title="矩形"
  42 + @click="setActiveType('rectangle')"
  43 + ></div>
  44 + <div
  45 + class="toolItem"
  46 + :class="{ active: activeType === 'ellipse' }"
  47 + id="ellipse"
  48 + title="椭圆"
  49 + @click="setActiveType('ellipse')"
  50 + ></div>
  51 + </div> -->
  52 + <!-- <div style="height: 100px;">
  53 + 绘制：鼠标左键点击及移动即可绘制图形
  54 + <br />
  55 + 结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束
  56 + <br />
  57 + 中断：绘制过程中按下esc键可中断该过程
  58 + </div> -->
  59 + </div>
  60 +</template>
  61 +
  62 +<script>
  63 +export default {
  64 + name: 'IndexAll',
  65 + data() {
  66 + return {
  67 + map: null, // 地图
  68 + editor: null, // 编辑器
  69 + activeType: 'marker', // 激活的图形编辑类型
  70 + marker: null,
  71 + polyline: null,
  72 + polygon: null,
  73 + circle: null,
  74 + rectangle: null,
  75 + ellipse: null,
  76 + searchQuery: '', // 搜索查询
  77 + };
  78 + },
  79 + props: {
  80 + lat: {
  81 + type: Number,
  82 + default: 30.67
  83 + },
  84 + lng: {
  85 + type: Number,
  86 + default: 104.06
  87 + },
  88 + message:{
  89 + type: String,
  90 + default: ''
  91 + },
  92 + },
  93 + mounted() {
  94 + this.initMap();
  95 + this.setActiveType('polygon')
  96 + },
  97 + methods: {
  98 + searchLocation() {
  99 + let that = this
  100 + if (!this.searchQuery) {
  101 + this.$message.error('请输入搜索地址');
  102 + return;
  103 + }
  104 +
  105 + // 使用腾讯地图的搜索服务
  106 + this.$jsonp("https://apis.map.qq.com/ws/place/v1/search", {
  107 + keyword: this.searchQuery,
  108 + key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', // 使用你的腾讯地图API key
  109 + output: "jsonp",
  110 + boundary: 'nearby(' + that.lat + ',' + that.lng + ',1000,1)'
  111 + }).then((res) => {
  112 + console.error(res)
  113 + if (res.status === 0 && res.data.length > 0) {
  114 + const location = res.data[0].location;
  115 + const latLng = new qq.maps.LatLng(location.lat, location.lng);
  116 +
  117 + // 移动地图中心到搜索到的位置
  118 + this.map.setCenter(latLng);
  119 + } else {
  120 + this.$message.error('未找到相关地址');
  121 + }
  122 + }).catch(err => {
  123 + this.$message.error("搜索失败");
  124 + console.error(err);
  125 + });
  126 + },
  127 + setActiveType(type) {
  128 + this.activeType = type;
  129 + this.editor.setActiveOverlay(type);
  130 + },
  131 + initMap() {
  132 + // 初始化地图
  133 + this.map = new TMap.Map('container', {
  134 + zoom: 12, // 设置地图缩放级别
  135 + center: new TMap.LatLng(this.lat, this.lng), // 设置地图中心点坐标
  136 + });
  137 + var path = [];
  138 + if(this.message != '') {
  139 + let listall = JSON.parse(this.message)
  140 + for (let index = 0; index < listall.length; index++) {
  141 + const element = listall[index];
  142 + const c1 = new TMap.LatLng(element.lat,element.lng)
  143 + path.push(c1)
  144 + }
  145 + }
  146 +
  147 + // 初始化几何图形及编辑器
  148 + this.marker = new TMap.MultiMarker({
  149 + map: this.map,
  150 + });
  151 + this.polyline = new TMap.MultiPolyline({
  152 + map: this.map,
  153 + });
  154 + this.polygon = new TMap.MultiPolygon({
  155 + map: this.map,
  156 + geometries: [
  157 + {
  158 + 'id': 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
  159 + 'styleId': 'polygon', //绑定样式名
  160 + 'paths': path, //多边形轮廓
  161 + }
  162 + ]
  163 + });
  164 + this.circle = new TMap.MultiCircle({
  165 + map: this.map,
  166 + });
  167 + this.rectangle = new TMap.MultiRectangle({
  168 + map: this.map,
  169 + });
  170 + this.ellipse = new TMap.MultiEllipse({
  171 + map: this.map,
  172 + });
  173 +
  174 + this.editor = new TMap.tools.GeometryEditor({
  175 + map: this.map, // 编辑器绑定的地图对象
  176 + overlayList: [
  177 + {
  178 + overlay: this.marker,
  179 + id: 'marker',
  180 + },
  181 + {
  182 + overlay: this.polyline,
  183 + id: 'polyline',
  184 + },
  185 + {
  186 + overlay: this.polygon,
  187 + id: 'polygon',
  188 + },
  189 + {
  190 + overlay: this.circle,
  191 + id: 'circle',
  192 + },
  193 + {
  194 + overlay: this.rectangle,
  195 + id: 'rectangle',
  196 + },
  197 + {
  198 + overlay: this.ellipse,
  199 + id: 'ellipse',
  200 + },
  201 + ],
  202 + actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
  203 + activeOverlayId: 'marker', // 激活图层
  204 + snappable: true, // 开启吸附
  205 + });
  206 +
  207 + // 监听绘制结束事件，获取绘制几何图形
  208 + this.editor.on('draw_complete', (geometry) => {
  209 + const id = geometry.id;
  210 + if (this.editor.getActiveOverlay().id === 'rectangle') {
  211 + const geo = this.rectangle.geometries.filter((item) => item.id === id);
  212 + console.log('绘制的矩形定位的坐标：', geo[0].paths);
  213 + }
  214 +
  215 + if (this.editor.getActiveOverlay().id === 'polygon') {
  216 + // console.error(this.polygon.geometries)
  217 + const geo = this.polygon.geometries.filter((item) => item.id === id);
  218 + console.log('绘制的多边形坐标：', geo[0].paths);
  219 + // var path = [
  220 + // ];
  221 + // for (let index = 0; index < geo[0].paths.length; index++) {
  222 + // const element = geo[0].paths[index];
  223 + // const c1 = new TMap.LatLng(element.lat,element.lng)
  224 + // path.push(c1)
  225 + // }
  226 + // // 计算多边形形心
  227 + // var position = TMap.geometry.computeCentroid(path);
  228 + // console.log('绘制的多边形坐标：',position);
  229 + this.$emit('updatecenter', geo[0].paths);
  230 + }
  231 + });
  232 + },
  233 +
  234 + },
  235 +};
  236 +</script>
  237 +
  238 +<style scoped>
  239 +html,
  240 +body {
  241 + height: 100%;
  242 + margin: 0px;
  243 + padding: 0px;
  244 +}
  245 +
  246 +#container {
  247 + width: 100%;
  248 + height: 300px;
  249 +}
  250 +
  251 +#toolControl {
  252 + position: absolute;
  253 + top: 10px;
  254 + left: 0px;
  255 + right: 0px;
  256 + margin: auto;
  257 + width: 252px;
  258 + z-index: 1001;
  259 +}
  260 +
  261 +.toolItem {
  262 + width: 30px;
  263 + height: 30px;
  264 + float: left;
  265 + margin: 1px;
  266 + padding: 4px;
  267 + border-radius: 3px;
  268 + background-size: 30px 30px;
  269 + background-position: 4px 4px;
  270 + background-repeat: no-repeat;
  271 + box-shadow: 0 1px 2px 0 #e4e7ef;
  272 + background-color: #ffffff;
  273 + border: 1px solid #ffffff;
  274 +}
  275 +
  276 +.toolItem:hover {
  277 + border-color: #789cff;
  278 +}
  279 +
  280 +.active {
  281 + border-color: #d5dff2;
  282 + background-color: #d5dff2;
  283 +}
  284 +
  285 +#marker {
  286 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
  287 +}
  288 +
  289 +#polyline {
  290 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
  291 +}
  292 +
  293 +#polygon {
  294 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
  295 +}
  296 +
  297 +#circle {
  298 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
  299 +}
  300 +
  301 +#rectangle {
  302 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
  303 +}
  304 +
  305 +#ellipse {
  306 + background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
  307 +}
  308 +.search-box {
  309 + position: absolute;
  310 + top: 10px;
  311 + left: 10px;
  312 + z-index: 1000;
  313 + background: #fff;
  314 + padding: 10px;
  315 + border-radius: 5px;
  316 + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  317 + width: 280px;
  318 + }
  319 +
  320 + .search-box input {
  321 + padding: 5px;
  322 + margin-right: 5px;
  323 + }
  324 +
  325 + .search-box button {
  326 + padding: 5px 10px;
  327 + background-color: #007bff;
  328 + color: #fff;
  329 + border: none;
  330 + border-radius: 3px;
  331 + cursor: pointer;
  332 + }
  333 +
  334 + .search-box button:hover {
  335 + background-color: #0056b3;
  336 + }
  337 +</style>
0 \ No newline at end of file 338 \ No newline at end of file
admin-web-master/src/components/newmap/indexall.vue
  View file @96898da
1 <template> 1 <template>
2 <div> 2 <div>
3 <div id="container"></div> 3 <div id="container"></div>
4 - <div class="search-box"> 4 + <div class="search-box" v-if="isx">
5 <input v-model="searchQuery" placeholder="输入地址进行搜索" /> 5 <input v-model="searchQuery" placeholder="输入地址进行搜索" />
6 - <button type="button" @click="searchLocation">搜索</button> 6 + <div style="box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);display: flex;align-items: center;background: #fff;padding: 0 20px;border-radius: 5px;overflow: hidden;margin-left: 10px;">
  7 + <i class="el-icon-search" style="margin-right: 10px;color: #3F9B6A;"></i>
  8 + <button type="button" @click="searchLocation">搜索</button>
  9 + </div>
7 </div> 10 </div>
8 - <!-- <div id="toolControl">  
9 - <div  
10 - class="toolItem"  
11 - :class="{ active: activeType === 'marker' }"  
12 - id="marker"  
13 - title="点标记"  
14 - @click="setActiveType('marker')"  
15 - ></div>  
16 - <div  
17 - class="toolItem"  
18 - :class="{ active: activeType === 'polyline' }"  
19 - id="polyline"  
20 - title="折线"  
21 - @click="setActiveType('polyline')"  
22 - ></div>  
23 - <div  
24 - class="toolItem"  
25 - :class="{ active: activeType === 'polygon' }"  
26 - id="polygon"  
27 - title="多边形"  
28 - @click="setActiveType('polygon')"  
29 - ></div>  
30 - <div  
31 - class="toolItem"  
32 - :class="{ active: activeType === 'circle' }"  
33 - id="circle"  
34 - title="圆形"  
35 - @click="setActiveType('circle')"  
36 - ></div>  
37 - <div  
38 - class="toolItem"  
39 - :class="{ active: activeType === 'rectangle' }"  
40 - id="rectangle"  
41 - title="矩形"  
42 - @click="setActiveType('rectangle')"  
43 - ></div>  
44 - <div  
45 - class="toolItem"  
46 - :class="{ active: activeType === 'ellipse' }"  
47 - id="ellipse"  
48 - title="椭圆"  
49 - @click="setActiveType('ellipse')"  
50 - ></div>  
51 - </div> -->  
52 - <!-- <div style="height: 100px;">  
53 - 绘制：鼠标左键点击及移动即可绘制图形  
54 - <br />  
55 - 结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束  
56 - <br />  
57 - 中断：绘制过程中按下esc键可中断该过程  
58 - </div> -->  
59 </div> 11 </div>
60 </template> 12 </template>
61 13
@@ -77,6 +29,10 @@ export default { @@ -77,6 +29,10 @@ export default {
77 }; 29 };
78 }, 30 },
79 props: { 31 props: {
  32 + isx: {
  33 + type: Boolean,
  34 + default: true
  35 + },
80 lat: { 36 lat: {
81 type: Number, 37 type: Number,
82 default: 30.67 38 default: 30.67
@@ -112,7 +68,7 @@ export default { @@ -112,7 +68,7 @@ export default {
112 console.error(res) 68 console.error(res)
113 if (res.status === 0 && res.data.length > 0) { 69 if (res.status === 0 && res.data.length > 0) {
114 const location = res.data[0].location; 70 const location = res.data[0].location;
115 - const latLng = new qq.maps.LatLng(location.lat, location.lng); 71 + const latLng = new TMap.LatLng(location.lat, location.lng);
116 72
117 // 移动地图中心到搜索到的位置 73 // 移动地图中心到搜索到的位置
118 this.map.setCenter(latLng); 74 this.map.setCenter(latLng);
@@ -133,17 +89,19 @@ export default { @@ -133,17 +89,19 @@ export default {
133 this.map = new TMap.Map('container', { 89 this.map = new TMap.Map('container', {
134 zoom: 12, // 设置地图缩放级别 90 zoom: 12, // 设置地图缩放级别
135 center: new TMap.LatLng(this.lat, this.lng), // 设置地图中心点坐标 91 center: new TMap.LatLng(this.lat, this.lng), // 设置地图中心点坐标
  92 + mapStyleId: 'style1'
136 }); 93 });
137 var path = []; 94 var path = [];
138 if(this.message != '') { 95 if(this.message != '') {
139 let listall = JSON.parse(this.message) 96 let listall = JSON.parse(this.message)
140 for (let index = 0; index < listall.length; index++) { 97 for (let index = 0; index < listall.length; index++) {
141 const element = listall[index]; 98 const element = listall[index];
142 - const c1 = new TMap.LatLng(element.lat,element.lng) 99 + const c1 = new TMap.LatLng(Number(element.lat),Number(element.lng))
143 path.push(c1) 100 path.push(c1)
144 } 101 }
145 } 102 }
146 - 103 + console.error(path )
  104 + console.error(this.message )
147 // 初始化几何图形及编辑器 105 // 初始化几何图形及编辑器
148 this.marker = new TMap.MultiMarker({ 106 this.marker = new TMap.MultiMarker({
149 map: this.map, 107 map: this.map,
@@ -310,28 +268,41 @@ body { @@ -310,28 +268,41 @@ body {
310 top: 10px; 268 top: 10px;
311 left: 10px; 269 left: 10px;
312 z-index: 1000; 270 z-index: 1000;
313 - background: #fff;  
314 - padding: 10px;  
315 - border-radius: 5px;  
316 - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  
317 - width: 280px; 271 + /* background: #fff; */
  272 + /* padding: 10px; */
  273 + /* border-radius: 5px; */
  274 + /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
  275 + /* width: 280px; */
  276 + display: flex;
  277 + justify-content: space-between;
318 } 278 }
319 279
320 .search-box input { 280 .search-box input {
321 - padding: 5px; 281 + /* padding: 5px; */
  282 + padding: 15px 8px;
322 margin-right: 5px; 283 margin-right: 5px;
  284 + font-size: 10px;
  285 + box-sizing: border-box;
  286 + border-radius: 5px;
  287 + border: 1px solid #eee;
  288 + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  289 + width: 200px;
323 } 290 }
324 291
325 .search-box button { 292 .search-box button {
326 - padding: 5px 10px;  
327 - background-color: #007bff;  
328 - color: #fff; 293 + padding: 15px 0;
  294 + background-color: #fff;
  295 + /* color: #fff; */
329 border: none; 296 border: none;
330 border-radius: 3px; 297 border-radius: 3px;
331 cursor: pointer; 298 cursor: pointer;
  299 + height: 100%;
  300 + box-sizing: border-box;
  301 + font-size: 10px;
  302 + color: -internal-light-dark(black, white);
332 } 303 }
333 304
334 .search-box button:hover { 305 .search-box button:hover {
335 - background-color: #0056b3; 306 + background-color: #fff;
336 } 307 }
337 </style> 308 </style>
338 \ No newline at end of file 309 \ No newline at end of file
admin-web-master/src/components/newmap/map copy.vue 0 → 100644
  View file @96898da
  1 +<template>
  2 + <div style="position: relative;width: 100%;">
  3 + <div id="mapContainer" class="map"></div>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: 'TencentMap',
  10 + props: {
  11 + lat: {
  12 + type: Number,
  13 + default: 30.67
  14 + },
  15 + lng: {
  16 + type: Number,
  17 + default: 104.06
  18 + },
  19 + isonloed: {
  20 + type: Boolean,
  21 + default: false
  22 + },
  23 + isx: {
  24 + type: Boolean,
  25 + default: true
  26 + },
  27 + ontype: {
  28 + type: String,
  29 + default: '1'
  30 + },
  31 + message: {
  32 + type: Array,
  33 + default: () => []
  34 + },
  35 + },
  36 + data() {
  37 + return {
  38 + map: null,
  39 + marker: null,
  40 + address: '',
  41 + markers: [],
  42 + infoWindow: null,
  43 + };
  44 + },
  45 + mounted() {
  46 + // 初始化地图
  47 + this.initMap(this.message);
  48 + },
  49 + methods: {
  50 + initMap(e) {
  51 + // 将经纬度转换为腾讯地图的LatLng对象
  52 + const centerLatLng = new qq.maps.LatLng(this.lat, this.lng);
  53 +
  54 + // 创建地图实例
  55 + this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
  56 + center: centerLatLng,
  57 + zoom: 13
  58 + });
  59 +
  60 + // 创建信息窗口实例
  61 + this.infoWindow = new qq.maps.InfoWindow({
  62 + map: this.map
  63 + });
  64 +
  65 + // 遍历 message 数组，为每个位置创建一个标记
  66 + if (e.length > 0) {
  67 + e.forEach(item => {
  68 + // console.error( item)
  69 + let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
  70 + item.lat = parseFloat(list[0]);
  71 + item.lng = parseFloat(list[1]);
  72 + item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
  73 + const markerLatLng = new qq.maps.LatLng(item.lat, item.lng);
  74 + const customIconUrl1 = require(item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png'); // 确保返回的是 URL 字符串
  75 + const customIconUrl2 = require(item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png'); // 确保返回的是 URL 字符串
  76 + const customIconUrl3 = require(item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png'); // 确保返回的是 URL 字符串
  77 + const icon = this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
  78 + const marker = new qq.maps.Marker({
  79 + position: markerLatLng,
  80 + map: this.map,
  81 + icon:icon
  82 + });
  83 +
  84 + // 为标记添加点击事件监听器
  85 + qq.maps.event.addListener(marker, 'click', () => {
  86 + this.showInfoWindow(marker, item);
  87 + });
  88 +
  89 + this.markers.push(marker);
  90 + });
  91 + }
  92 + },
  93 + showInfoWindow(marker, item) {
  94 + // 设置信息窗口的内容
  95 + const content = `
  96 + <div style="padding:10px 0;border-radius: 18px;">
  97 + <p style="padding-top:10px;">资源名称:${item.name}</p>
  98 + <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
  99 + <p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='0'?'color: #707B86;':item.publishStatus=='1'?'color: #ECAF5C;':item.publishStatus=='2'?'color: #4A77C9;':item.publishStatus=='3'?'color: #E75A46;':item.publishStatus=='4'?'color: #2AB867;':'color: #707B86;'}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p>
  100 + </div>
  101 + `;
  102 + // <div style="background: #fff;padding:5px 15px;border-radius: 18px;">
  103 + // <el-form :model="${item}" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  104 + // <el-form-item label="资源名称" prop="entityName">
  105 + // <div class="duiqi">${item.name}</div>
  106 + // </el-form-item>
  107 + // <el-form-item label="位置" prop="entityName">
  108 + // <div class="duiqi">${item.detailedLocation}</div>
  109 + // </el-form-item>
  110 + // </el-form>
  111 + // </div>
  112 + // 设置信息窗口的位置和内容
  113 + this.infoWindow.setPosition(marker.getPosition());
  114 + this.infoWindow.setContent(content);
  115 + this.infoWindow.open();
  116 + }
  117 + }
  118 +}
  119 +</script>
  120 +
  121 +<style scoped>
  122 +.map {
  123 + width: 100%;
  124 + height: 400px;
  125 +}
  126 +
  127 +.address-info {
  128 + position: absolute;
  129 + bottom: 0;
  130 + left: 0;
  131 + z-index: 999999;
  132 + background: #fff;
  133 +}
  134 +</style>
0 \ No newline at end of file 135 \ No newline at end of file
admin-web-master/src/components/newmap/map.vue
  View file @96898da
1 <template> 1 <template>
2 - <div style="position: relative;width: 100%;"> 2 + <div style="width: 100%;">
3 <div id="mapContainer" class="map"></div> 3 <div id="mapContainer" class="map"></div>
4 </div> 4 </div>
5 </template> 5 </template>
@@ -44,75 +44,95 @@ export default { @@ -44,75 +44,95 @@ export default {
44 }, 44 },
45 mounted() { 45 mounted() {
46 // 初始化地图 46 // 初始化地图
47 - this.initMap(this.message); 47 + // this.initMap(this.message);
48 }, 48 },
49 methods: { 49 methods: {
50 initMap(e) { 50 initMap(e) {
51 // 将经纬度转换为腾讯地图的LatLng对象 51 // 将经纬度转换为腾讯地图的LatLng对象
52 - const centerLatLng = new qq.maps.LatLng(this.lat, this.lng); 52 + const centerLatLng = new TMap.LatLng(this.lat, this.lng);
53 53
54 // 创建地图实例 54 // 创建地图实例
55 - this.map = new qq.maps.Map(document.getElementById('mapContainer'), { 55 + this.map = new TMap.Map(document.getElementById("mapContainer"), {
56 center: centerLatLng, 56 center: centerLatLng,
57 - zoom: 13 57 + zoom: 13,
  58 + mapStyleId: 'style1'
58 }); 59 });
59 - 60 + // return
60 // 创建信息窗口实例 61 // 创建信息窗口实例
61 - this.infoWindow = new qq.maps.InfoWindow({  
62 - map: this.map 62 + this.infowindow = new TMap.InfoWindow({
  63 + map: this.map,
  64 + position: centerLatLng,
  65 + offset: { x: 0, y: -20 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
63 }); 66 });
64 - 67 + this.infowindow.close();//初始关闭信息窗关闭
  68 + const listall = []
  69 + const listallstyles = {}
65 // 遍历 message 数组，为每个位置创建一个标记 70 // 遍历 message 数组，为每个位置创建一个标记
66 if (e.length > 0) { 71 if (e.length > 0) {
67 e.forEach(item => { 72 e.forEach(item => {
68 // console.error( item) 73 // console.error( item)
  74 + let idstyles ='Style'+item.id
69 let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : []; 75 let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
70 item.lat = parseFloat(list[0]); 76 item.lat = parseFloat(list[0]);
71 item.lng = parseFloat(list[1]); 77 item.lng = parseFloat(list[1]);
72 item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无'; 78 item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
73 - const markerLatLng = new qq.maps.LatLng(item.lat, item.lng);  
74 - const customIconUrl1 = require(item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png'); // 确保返回的是 URL 字符串  
75 - const customIconUrl2 = require(item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png'); // 确保返回的是 URL 字符串  
76 - const customIconUrl3 = require(item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png'); // 确保返回的是 URL 字符串 79 + const markerLatLng = new TMap.LatLng(item.lat, item.lng);
  80 + const customIconUrl1 = require(item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png');
  81 + const customIconUrl2 = require(item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png');
  82 + const customIconUrl3 = require(item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png');
  83 + // const customIconUrl1 = item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png';
  84 + // const customIconUrl2 = item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png';
  85 + // const customIconUrl3 = item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png';
77 const icon = this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:'' 86 const icon = this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
78 - const marker = new qq.maps.Marker({  
79 - position: markerLatLng,  
80 - map: this.map,  
81 - icon:icon  
82 - });  
83 -  
84 - // 为标记添加点击事件监听器  
85 - qq.maps.event.addListener(marker, 'click', () => {  
86 - this.showInfoWindow(marker, item);  
87 - });  
88 -  
89 - this.markers.push(marker); 87 + // const icon = 'https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/zjjf.png'
  88 + let infoitem = {
  89 + "styleId":idstyles,
  90 + "id": item.id,
  91 + "position": markerLatLng,
  92 + "icon":icon,
  93 + "properties":item
  94 + }
  95 +
  96 + listallstyles[idstyles] = new TMap.MarkerStyle({
  97 + "width": 51, // 点标记样式宽度（像素）
  98 + "height": 52, // 点标记样式高度（像素）
  99 + "src": icon, //图片路径
  100 + //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
  101 + // "anchor": { x: 16, y: 32 }
  102 + })
  103 + listall.push(infoitem)
  104 + });
  105 + console.error(listallstyles )
  106 + this.marker = new TMap.MultiMarker({
  107 + styles:listallstyles,
  108 + map: this.map, //指定地图容器
  109 + geometries:listall
90 }); 110 });
  111 + this.marker.on("click", this.showInfoWindow)
91 } 112 }
92 }, 113 },
93 - showInfoWindow(marker, item) { 114 + showInfoWindow(event) {
  115 + console.error(event)
  116 + let lat = event.latLng.getLat().toFixed(6);
  117 + let lng = event.latLng.getLng().toFixed(6);
  118 + let item = event.geometry.properties
94 // 设置信息窗口的内容 119 // 设置信息窗口的内容
95 const content = ` 120 const content = `
96 - <div style="padding:10px 0;border-radius: 18px;">  
97 - <p style="padding-top:10px;">资源名称:${item.name}</p> 121 + <div style="padding:10px 0;border-radius: 18px;text-align: left;">
  122 + <p style="">资源名称:${item.name}</p>
98 <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p> 123 <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
99 <p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='0'?'color: #707B86;':item.publishStatus=='1'?'color: #ECAF5C;':item.publishStatus=='2'?'color: #4A77C9;':item.publishStatus=='3'?'color: #E75A46;':item.publishStatus=='4'?'color: #2AB867;':'color: #707B86;'}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p> 124 <p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='0'?'color: #707B86;':item.publishStatus=='1'?'color: #ECAF5C;':item.publishStatus=='2'?'color: #4A77C9;':item.publishStatus=='3'?'color: #E75A46;':item.publishStatus=='4'?'color: #2AB867;':'color: #707B86;'}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p>
100 </div> 125 </div>
101 `; 126 `;
102 - // <div style="background: #fff;padding:5px 15px;border-radius: 18px;">  
103 - // <el-form :model="${item}" ref="ruleForm" label-width="80px" class="demo-ruleForm">  
104 - // <el-form-item label="资源名称" prop="entityName">  
105 - // <div class="duiqi">${item.name}</div>  
106 - // </el-form-item>  
107 - // <el-form-item label="位置" prop="entityName">  
108 - // <div class="duiqi">${item.detailedLocation}</div>  
109 - // </el-form-item>  
110 - // </el-form>  
111 - // </div>  
112 - // 设置信息窗口的位置和内容  
113 - this.infoWindow.setPosition(marker.getPosition());  
114 - this.infoWindow.setContent(content);  
115 - this.infoWindow.open(); 127 + this.infowindow.open(); //打开信息窗
  128 + this.infowindow.setPosition(new TMap.LatLng(lat,lng));//设置信息窗位置
  129 + this.infowindow.setContent(content);//设置信息窗内容
  130 +
  131 + // this.infowindow = new TMap.InfoWindow({
  132 + // content:content, //信息窗口内容
  133 + // position:new TMap.LatLng(lat,lng),//显示信息窗口的坐标
  134 + // map:this.map
  135 + // });
116 } 136 }
117 } 137 }
118 } 138 }
@@ -122,13 +142,8 @@ export default { @@ -122,13 +142,8 @@ export default {
122 .map { 142 .map {
123 width: 100%; 143 width: 100%;
124 height: 400px; 144 height: 400px;
  145 +
  146 + /* overflow: hidden; */
125 } 147 }
126 148
127 -.address-info {  
128 - position: absolute;  
129 - bottom: 0;  
130 - left: 0;  
131 - z-index: 999999;  
132 - background: #fff;  
133 -}  
134 </style> 149 </style>
135 \ No newline at end of file 150 \ No newline at end of file
admin-web-master/src/utils/request.js
  View file @96898da
@@ -17,12 +17,12 @@ let baseURL = &#39;&#39; @@ -17,12 +17,12 @@ let baseURL = &#39;&#39;
17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) { 17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) {
18 18
19 // baseURL = 'https://jy.scjysm.asia:18086/cdwlMall/meserver/admin-server'; 19 // baseURL = 'https://jy.scjysm.asia:18086/cdwlMall/meserver/admin-server';
20 - // baseURL = 'https://zhgw-uat.028wlkj.com/cdwlMall/meserver/admin-server'; 20 + baseURL = 'https://zhgw-uat.028wlkj.com/cdwlMall/meserver/admin-server';
21 21
22 // baseURL = process.env.VUE_APP_DOMAIN_PREFIX_1; 22 // baseURL = process.env.VUE_APP_DOMAIN_PREFIX_1;
23 23
24 24
25 - baseURL = 'http://128.10.249.32:9003'; 25 + // baseURL = 'http://128.10.249.32:9003';
26 26
27 27
28 } else { 28 } else {
@@ -57,11 +57,11 @@ service.interceptors.request.use( @@ -57,11 +57,11 @@ service.interceptors.request.use(
57 // config.headers['Content-Type'] = 'application/json; charset=UTF-8' 57 // config.headers['Content-Type'] = 'application/json; charset=UTF-8'
58 // config.headers['type'] = ' admin' 58 // config.headers['type'] = ' admin'
59 } 59 }
60 - console.log(config) 60 + // console.log(config)
61 return config 61 return config
62 }, 62 },
63 error => { 63 error => {
64 - console.log(error) // for debug 64 + // console.log(error) // for debug
65 return Promise.reject(error) 65 return Promise.reject(error)
66 } 66 }
67 ) 67 )
admin-web-master/src/views/detect/admap.vue
  View file @96898da
@@ -155,7 +155,7 @@ @@ -155,7 +155,7 @@
155 <!-- 地图 --> 155 <!-- 地图 -->
156 <div style="display: flex;justify-content: space-between;margin-bottom: 20px;"> 156 <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
157 <div style="width: 100%;height: 400px; border: 1px solid #3F9B6A;position: relative;"> 157 <div style="width: 100%;height: 400px; border: 1px solid #3F9B6A;position: relative;">
158 - <mapchakannew :ontype="ontype" ref="mapchakannewrefs"></mapchakannew> 158 + <mapchakannew v-if="isshowmap" :ontype="ontype" ref="mapchakannewrefs"></mapchakannew>
159 </div> 159 </div>
160 </div> 160 </div>
161 <div style="display: flex;margin-bottom: 20px;width: 100%;flex-direction: row-reverse;font-size: 12px;"> 161 <div style="display: flex;margin-bottom: 20px;width: 100%;flex-direction: row-reverse;font-size: 12px;">
@@ -460,6 +460,7 @@ @@ -460,6 +460,7 @@
460 export default { 460 export default {
461 data() { 461 data() {
462 return { 462 return {
  463 + isshowmap:true,
463 alllistnum: 0, 464 alllistnum: 0,
464 typelist: [{ 465 typelist: [{
465 name: '已租赁', 466 name: '已租赁',
@@ -856,6 +857,7 @@ @@ -856,6 +857,7 @@
856 this.onaction = '4' 857 this.onaction = '4'
857 }, 858 },
858 async getAll() { 859 async getAll() {
  860 + let that = this
859 if (this.ontype == '1') { 861 if (this.ontype == '1') {
860 const res = await getAlls({ 862 const res = await getAlls({
861 ...this.pagequery, 863 ...this.pagequery,
@@ -885,7 +887,17 @@ @@ -885,7 +887,17 @@
885 } 887 }
886 // console.error(']]]]]]]]]') 888 // console.error(']]]]]]]]]')
887 // console.error(this.tableData) 889 // console.error(this.tableData)
888 - this.$refs.mapchakannewrefs.initMap(this.tableData) 890 + this.isshowmap = false
  891 +
  892 + // 刷新渲染层
  893 + this.$nextTick(() => {
  894 + this.isshowmap = true
  895 + // 延迟渲染
  896 + setTimeout(() => {
  897 + that.$refs.mapchakannewrefs.initMap(that.tableData)
  898 + }, 100)
  899 +
  900 + })
889 901
890 }, 902 },
891 removeonaction(e) { 903 removeonaction(e) {
admin-web-master/src/views/liveMenu/liveRoom/index.vue
  View file @96898da
@@ -363,10 +363,10 @@ export default { @@ -363,10 +363,10 @@ export default {
363 </script> 363 </script>
364 364
365 <style lang="scss" scpoed> 365 <style lang="scss" scpoed>
366 -img {  
367 - width: 100px;  
368 - height: 100px;  
369 -} 366 +// img {
  367 +// width: 100px;
  368 +// height: 100px;
  369 +// }
370 .liveRoomPage { 370 .liveRoomPage {
371 padding: 32px 20px; 371 padding: 32px 20px;
372 nav { 372 nav {
admin-web-master/vue.config.js
  View file @96898da
@@ -25,14 +25,14 @@ module.exports = { @@ -25,14 +25,14 @@ module.exports = {
25 * Detail: https://cli.vuejs.org/config/#publicpath 25 * Detail: https://cli.vuejs.org/config/#publicpath
26 */ 26 */
27 runtimeCompiler: true, 27 runtimeCompiler: true,
28 - publicPath: process.env.NODE_ENV === 'production' ? '/cdwlMall/' : '/', 28 + publicPath: process.env.NODE_ENV === 'production' ? '/cdwlMall/' : '/',
29 // publicPath: '/admin-web', 29 // publicPath: '/admin-web',
30 outputDir: 'dist', 30 outputDir: 'dist',
31 assetsDir: 'static', 31 assetsDir: 'static',
32 lintOnSave: process.env.NODE_ENV === 'development', 32 lintOnSave: process.env.NODE_ENV === 'development',
33 productionSourceMap: false, 33 productionSourceMap: false,
34 devServer: { 34 devServer: {
35 - disableHostCheck:true, 35 + disableHostCheck: true,
36 port: port, 36 port: port,
37 open: false, 37 open: false,
38 overlay: { 38 overlay: {
@@ -42,16 +42,16 @@ module.exports = { @@ -42,16 +42,16 @@ module.exports = {
42 // before: require('./mock/mock-server.js'), 42 // before: require('./mock/mock-server.js'),
43 proxy: { 43 proxy: {
44 '/cdwlMall/meserver/api': { 44 '/cdwlMall/meserver/api': {
45 - target:process.env.VUE_APP_DOMAIN_PREFIX_2, 45 + target: process.env.VUE_APP_DOMAIN_PREFIX_2,
46 changeOrigin: true, 46 changeOrigin: true,
47 }, 47 },
48 - '/cdwlMall/meserver/admin-server':{  
49 - target:process.env.VUE_APP_DOMAIN_PREFIX_1, 48 + '/cdwlMall/meserver/admin-server': {
  49 + target: process.env.VUE_APP_DOMAIN_PREFIX_1,
50 changeOrigin: true, 50 changeOrigin: true,
51 pathRewrite: { 51 pathRewrite: {
52 - // pathRewrite 方法重写 url  
53 - '^/meserver': '/',  
54 - }, 52 + // pathRewrite 方法重写 url
  53 + '^/meserver': '/',
  54 + },
55 }, 55 },
56 } 56 }
57 }, 57 },
@@ -128,7 +128,7 @@ module.exports = { @@ -128,7 +128,7 @@ module.exports = {
128 .plugin('ScriptExtHtmlWebpackPlugin') 128 .plugin('ScriptExtHtmlWebpackPlugin')
129 .after('html') 129 .after('html')
130 .use('script-ext-html-webpack-plugin', [{ 130 .use('script-ext-html-webpack-plugin', [{
131 - // `runtime` must same as runtimeChunk name. default is `runtime` 131 + // `runtime` must same as runtimeChunk name. default is `runtime`
132 inline: /runtime\..*\.js$/ 132 inline: /runtime\..*\.js$/
133 }]) 133 }])
134 .end() 134 .end()