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 7 <link rel="icon" type="image/png" href="favicon.svg">
8 8 <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
9 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 11 <script src="https://map.qq.com/api/gljs?v=1.exp&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU"></script>
13 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 16 </head>
16 17 <body>
17 18 <noscript>
... ...
admin-web-master/src/components/add/addcd.vue
  View file @96898da
... ... @@ -88,7 +88,8 @@
88 88 </el-form-item> -->
89 89 <el-form-item label="地图标点" prop="detailedLocation">
90 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 93 </div>
93 94 </el-form-item>
94 95 <el-form-item label="场地描述" prop="description">
... ... @@ -262,8 +263,8 @@
262 263 if (this.info && this.info.id) {
263 264 this.ruleForm = this.info
264 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 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 263 \ No newline at end of file
... ...
admin-web-master/src/components/newmap/index.vue
  View file @96898da
1 1 <template>
2   - <div style="position: relative;width: 100%;">
  2 + <div style="width: 100%;">
3 3 <div id="mapContainer" class="map"></div>
4   - <div class="search-box">
  4 + <div class="search-box" v-if="isx">
5 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 10 </div>
8 11 <div v-if="searchResults.length > 0" class="search-results">
9 12 <ul>
... ... @@ -56,13 +59,27 @@
56 59 methods: {
57 60 // 选择某一条搜索结果
58 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 85 this.getAreaCode(result.location.lat, result.location.lng);
... ... @@ -99,39 +116,57 @@
99 116 if (this.isx) {
100 117  
101 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 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 126 center: centerLatLng,
111 127 zoom: 13,
112   - // mapStyleId: 'style1'
  128 + mapStyleId: 'style1'
113 129 });
114 130  
115 131 // 创建标记
116 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 144 } else {
122   - this.marker = new qq.maps.Marker({
123   - // position: centerLatLng,
  145 + this.marker = new TMap.MultiMarker({
124 146 map: this.map
125 147 });
126 148 }
127 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 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 182 onMarkerClick() {
148 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 213 getAreaCode(lat, lng) {
... ... @@ -175,8 +225,8 @@
175 225 console.log(res);
176 226 that.address = res.result.address
177 227 that.$emit('updatecenter', {
178   - lat: lat,
179   - lng: lng,
  228 + lat: Number(lat),
  229 + lng: Number(lng),
180 230 address: that.address
181 231 });
182 232 } else {
... ... @@ -203,36 +253,49 @@
203 253 top: 10px;
204 254 left: 10px;
205 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 265 .search-box input {
214   - padding: 5px;
  266 + /* padding: 5px; */
  267 + padding: 15px 8px;
215 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 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 281 border: none;
223 282 border-radius: 3px;
224 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 290 .search-box button:hover {
228   - background-color: #0056b3;
  291 + background-color: #fff;
229 292 }
230 293  
231 294 .search-results {
232 295 position: absolute;
233 296 top: 60px;
234 297 left: 10px;
235   - z-index: 999;
  298 + z-index: 1000;
236 299 background: #fff;
237 300 padding: 10px;
238 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 338 \ No newline at end of file
... ...
admin-web-master/src/components/newmap/indexall.vue
  View file @96898da
1 1 <template>
2 2 <div>
3 3 <div id="container"></div>
4   - <div class="search-box">
  4 + <div class="search-box" v-if="isx">
5 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 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 11 </div>
60 12 </template>
61 13  
... ... @@ -77,6 +29,10 @@ export default {
77 29 };
78 30 },
79 31 props: {
  32 + isx: {
  33 + type: Boolean,
  34 + default: true
  35 + },
80 36 lat: {
81 37 type: Number,
82 38 default: 30.67
... ... @@ -112,7 +68,7 @@ export default {
112 68 console.error(res)
113 69 if (res.status === 0 && res.data.length > 0) {
114 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 74 this.map.setCenter(latLng);
... ... @@ -133,17 +89,19 @@ export default {
133 89 this.map = new TMap.Map('container', {
134 90 zoom: 12, // 设置地图缩放级别
135 91 center: new TMap.LatLng(this.lat, this.lng), // 设置地图中心点坐标
  92 + mapStyleId: 'style1'
136 93 });
137 94 var path = [];
138 95 if(this.message != '') {
139 96 let listall = JSON.parse(this.message)
140 97 for (let index = 0; index < listall.length; index++) {
141 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 100 path.push(c1)
144 101 }
145 102 }
146   -
  103 + console.error(path )
  104 + console.error(this.message )
147 105 // 初始化几何图形及编辑器
148 106 this.marker = new TMap.MultiMarker({
149 107 map: this.map,
... ... @@ -310,28 +268,41 @@ body {
310 268 top: 10px;
311 269 left: 10px;
312 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 280 .search-box input {
321   - padding: 5px;
  281 + /* padding: 5px; */
  282 + padding: 15px 8px;
322 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 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 296 border: none;
330 297 border-radius: 3px;
331 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 305 .search-box button:hover {
335   - background-color: #0056b3;
  306 + background-color: #fff;
336 307 }
337 308 </style>
338 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 135 \ No newline at end of file
... ...
admin-web-master/src/components/newmap/map.vue
  View file @96898da
1 1 <template>
2   - <div style="position: relative;width: 100%;">
  2 + <div style="width: 100%;">
3 3 <div id="mapContainer" class="map"></div>
4 4 </div>
5 5 </template>
... ... @@ -44,75 +44,95 @@ export default {
44 44 },
45 45 mounted() {
46 46 // 初始化地图
47   - this.initMap(this.message);
  47 + // this.initMap(this.message);
48 48 },
49 49 methods: {
50 50 initMap(e) {
51 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 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 70 // 遍历 message 数组，为每个位置创建一个标记
66 71 if (e.length > 0) {
67 72 e.forEach(item => {
68 73 // console.error( item)
  74 + let idstyles ='Style'+item.id
69 75 let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
70 76 item.lat = parseFloat(list[0]);
71 77 item.lng = parseFloat(list[1]);
72 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 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 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 123 <p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
99 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 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 142 .map {
123 143 width: 100%;
124 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 149 </style>
135 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 17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) {
18 18  
19 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 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 28 } else {
... ... @@ -57,11 +57,11 @@ service.interceptors.request.use(
57 57 // config.headers['Content-Type'] = 'application/json; charset=UTF-8'
58 58 // config.headers['type'] = ' admin'
59 59 }
60   - console.log(config)
  60 + // console.log(config)
61 61 return config
62 62 },
63 63 error => {
64   - console.log(error) // for debug
  64 + // console.log(error) // for debug
65 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 155 <!-- 地图 -->
156 156 <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
157 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 159 </div>
160 160 </div>
161 161 <div style="display: flex;margin-bottom: 20px;width: 100%;flex-direction: row-reverse;font-size: 12px;">
... ... @@ -460,6 +460,7 @@
460 460 export default {
461 461 data() {
462 462 return {
  463 + isshowmap:true,
463 464 alllistnum: 0,
464 465 typelist: [{
465 466 name: '已租赁',
... ... @@ -856,6 +857,7 @@
856 857 this.onaction = '4'
857 858 },
858 859 async getAll() {
  860 + let that = this
859 861 if (this.ontype == '1') {
860 862 const res = await getAlls({
861 863 ...this.pagequery,
... ... @@ -885,7 +887,17 @@
885 887 }
886 888 // console.error(']]]]]]]]]')
887 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 903 removeonaction(e) {
... ...
admin-web-master/src/views/liveMenu/liveRoom/index.vue
  View file @96898da
... ... @@ -363,10 +363,10 @@ export default {
363 363 </script>
364 364  
365 365 <style lang="scss" scpoed>
366   -img {
367   - width: 100px;
368   - height: 100px;
369   -}
  366 +// img {
  367 +// width: 100px;
  368 +// height: 100px;
  369 +// }
370 370 .liveRoomPage {
371 371 padding: 32px 20px;
372 372 nav {
... ...
admin-web-master/vue.config.js
  View file @96898da
... ... @@ -25,14 +25,14 @@ module.exports = {
25 25 * Detail: https://cli.vuejs.org/config/#publicpath
26 26 */
27 27 runtimeCompiler: true,
28   - publicPath: process.env.NODE_ENV === 'production' ? '/cdwlMall/' : '/',
  28 + publicPath: process.env.NODE_ENV === 'production' ? '/cdwlMall/' : '/',
29 29 // publicPath: '/admin-web',
30 30 outputDir: 'dist',
31 31 assetsDir: 'static',
32 32 lintOnSave: process.env.NODE_ENV === 'development',
33 33 productionSourceMap: false,
34 34 devServer: {
35   - disableHostCheck:true,
  35 + disableHostCheck: true,
36 36 port: port,
37 37 open: false,
38 38 overlay: {
... ... @@ -42,16 +42,16 @@ module.exports = {
42 42 // before: require('./mock/mock-server.js'),
43 43 proxy: {
44 44 '/cdwlMall/meserver/api': {
45   - target:process.env.VUE_APP_DOMAIN_PREFIX_2,
  45 + target: process.env.VUE_APP_DOMAIN_PREFIX_2,
46 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 50 changeOrigin: true,
51 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 128 .plugin('ScriptExtHtmlWebpackPlugin')
129 129 .after('html')
130 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 132 inline: /runtime\..*\.js$/
133 133 }])
134 134 .end()
... ...