Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ab3b33af 1 parent 70bfb3dd

fix

Inline Side-by-side
Showing 1 changed file with 29 additions and 8 deletions
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-11 15:02:28 4 + * @LastEditTime: 2024-07-11 18:27:35
5 * @FilePath: /map-demo/src/views/tools.vue 5 * @FilePath: /map-demo/src/views/tools.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -9,14 +9,16 @@ ...@@ -9,14 +9,16 @@
9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;"> 9 <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
10 <div id="container"></div> 10 <div id="container"></div>
11 <div style="position: fixed; display: flex;background-color: #FFF; align-items: center; padding: 0.5rem 1rem;"> 11 <div style="position: fixed; display: flex;background-color: #FFF; align-items: center; padding: 0.5rem 1rem;">
12 - <van-field v-model="filter_lng" label="经度" placeholder="请输入经度" /> 12 + <van-field v-model="filter_lng" label="经度" placeholder="请输入经度" style="width: 20rem;" />
13 - <van-field v-model="filter_lat" label="纬度" placeholder="请输入纬度" /> 13 + <van-field v-model="filter_lat" label="纬度" placeholder="请输入纬度" style="width: 20rem;" />
14 <van-button @click="handleQuery" type="primary" block size="small" style="width: 10rem;">快速定位</van-button> 14 <van-button @click="handleQuery" type="primary" block size="small" style="width: 10rem;">快速定位</van-button>
15 <van-button @click="queryLngLat" type="warning" block size="small" style="width: 10rem; margin-left: 1rem;">坐标查询</van-button> 15 <van-button @click="queryLngLat" type="warning" block size="small" style="width: 10rem; margin-left: 1rem;">坐标查询</van-button>
16 - <van-button @click="setRotation(-10)" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转-10</van-button> 16 + <div style="font-size: 0.9rem; padding: 0 0.85rem;">当前度数 {{ data_rotation }}</div>
17 - <van-button @click="setRotation(10)" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转+10</van-button> 17 + <van-button @click="setRotationMinus()" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转-10</van-button>
18 + <van-button @click="setRotationPlus()" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转+10</van-button>
19 + &nbsp;设置<van-field v-model="data_rotation" label="" placeholder="请输入旋转值" style="width: 3.5rem;" @blur="setRotation()" />度
18 </div> 20 </div>
19 - <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: white;"> 21 + <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: black;">
20 <div style="display: flex;">点击经纬度：{{ log_lnglat }}</div> 22 <div style="display: flex;">点击经纬度：{{ log_lnglat }}</div>
21 </div> 23 </div>
22 <!-- <div class="nav-bar-wrapper"> 24 <!-- <div class="nav-bar-wrapper">
...@@ -258,6 +260,7 @@ export default { ...@@ -258,6 +260,7 @@ export default {
258 data_zooms: '', // 接口获取-地图默认缩放范围 260 data_zooms: '', // 接口获取-地图默认缩放范围
259 data_rotation: 0, // 接口获取-地图旋转角度 261 data_rotation: 0, // 接口获取-地图旋转角度
260 log_lnglat: '', // 获取当前地址经纬度 262 log_lnglat: '', // 获取当前地址经纬度
263 + temp_rotation: 0
261 } 264 }
262 }, 265 },
263 async mounted() { 266 async mounted() {
...@@ -1201,9 +1204,27 @@ export default { ...@@ -1201,9 +1204,27 @@ export default {
1201 queryLngLat () { 1204 queryLngLat () {
1202 window.open('https://lbs.amap.com/tools/picker') 1205 window.open('https://lbs.amap.com/tools/picker')
1203 }, 1206 },
1204 - setRotation (deg) { 1207 + setRotationMinus () {
1205 - this.data_rotation = this.data_rotation + deg; 1208 + this.data_rotation = +this.data_rotation - 10;
1209 + // if (this.data_rotation === 0) {
1210 + // this.map.setRotation(-10);
1211 + // this.data_rotation = -10
1212 + // } else {
1213 + // }
1206 this.map.setRotation(this.data_rotation); 1214 this.map.setRotation(this.data_rotation);
1215 + // if (this.data_rotation <= 0) {
1216 + // this.data_rotation = 0;
1217 + // }
1218 + },
1219 + setRotationPlus () {
1220 + this.data_rotation = +this.data_rotation + 10;
1221 + // if (this.data_rotation >= 360) {
1222 + // this.data_rotation = 360;
1223 + // }
1224 + this.map.setRotation(this.data_rotation);
1225 + },
1226 + setRotation () {
1227 + this.map.setRotation(+this.data_rotation);
1207 } 1228 }
1208 } 1229 }
1209 } 1230 }
......