Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8438ab43 1 parent 0fda7f0c

fix 修复地图引入方式问题导致显示问题

Inline Side-by-side
Showing 4 changed files with 77 additions and 67 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: 2025-03-06 10:29:04 4 + * @LastEditTime: 2025-03-06 15:46:30
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -190,27 +190,27 @@ export default { ...@@ -190,27 +190,27 @@ export default {
190 data() { 190 data() {
191 return { 191 return {
192 map: '', 192 map: '',
193 - location_options: { 193 + // location_options: {
194 - 'showButton': true, // 是否显示定位按钮 194 + // 'showButton': true, // 是否显示定位按钮
195 - 'buttonPosition': 'LB', // 定位按钮的位置 195 + // 'buttonPosition': 'LB', // 定位按钮的位置
196 - /* LT LB RT RB */ 196 + // /* LT LB RT RB */
197 - 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离 197 + // 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
198 - 'showMarker': true, // 是否显示定位点 198 + // 'showMarker': true, // 是否显示定位点
199 - 'markerOptions': { // 自定义定位点样式，同Marker的Options 199 + // 'markerOptions': { // 自定义定位点样式，同Marker的Options
200 - 'offset': new AMap.Pixel(-18, -36), 200 + // 'offset': new AMap.Pixel(-18, -36),
201 - 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>' 201 + // 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
202 - }, 202 + // },
203 - 'showCircle': true, // 是否显示定位精度圈 203 + // 'showCircle': true, // 是否显示定位精度圈
204 - 'circleOptions': { // 定位精度圈的样式 204 + // 'circleOptions': { // 定位精度圈的样式
205 - 'strokeColor': '#0093FF', 205 + // 'strokeColor': '#0093FF',
206 - 'noSelect': true, 206 + // 'noSelect': true,
207 - 'strokeOpacity': 0.5, 207 + // 'strokeOpacity': 0.5,
208 - 'strokeWeight': 1, 208 + // 'strokeWeight': 1,
209 - 'fillColor': '#02B0FF', 209 + // 'fillColor': '#02B0FF',
210 - 'fillOpacity': 0.25 210 + // 'fillOpacity': 0.25
211 - }, 211 + // },
212 - enableHighAccuracy: true 212 + // enableHighAccuracy: true
213 - }, 213 + // },
214 geolocation: '', 214 geolocation: '',
215 current_lng: '', 215 current_lng: '',
216 current_lat: '', 216 current_lat: '',
......
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
126 <script setup> 126 <script setup>
127 import { onMounted, ref, computed, onBeforeUnmount } from "vue"; 127 import { onMounted, ref, computed, onBeforeUnmount } from "vue";
128 import { useRoute, useRouter } from 'vue-router' 128 import { useRoute, useRouter } from 'vue-router'
129 -// import AMapLoader from "@amap/amap-jsapi-loader"; 129 +import AMapLoader from "@amap/amap-jsapi-loader";
130 import { TileCutter } from "@/utils/TileCutter"; 130 import { TileCutter } from "@/utils/TileCutter";
131 import { Top, Bottom, Back, Right, Plus, Minus, Brush } from '@element-plus/icons-vue' 131 import { Top, Bottom, Back, Right, Plus, Minus, Brush } from '@element-plus/icons-vue'
132 import { ElMessage } from 'element-plus' 132 import { ElMessage } from 'element-plus'
...@@ -208,7 +208,17 @@ const handleKeydown = (e) => { // 键盘控制 ...@@ -208,7 +208,17 @@ const handleKeydown = (e) => { // 键盘控制
208 } 208 }
209 } 209 }
210 210
211 +// 关键安全配置
212 +window._AMapSecurityConfig = {
213 + securityJsCode: '8602057c4c8dae5bed9a240c0582c46f', // 替换为你的密钥
214 +}
215 +
211 onMounted(async () => { 216 onMounted(async () => {
217 + const AMap = await AMapLoader.load({
218 + key: '381c6763e1fefd810fbab697f470149c', // 控制台获取
219 + version: '2.0', // 指定API版本
220 + plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation'] // 必须加载步行导航插件
221 + })
212 // 地图中心点 222 // 地图中心点
213 const code = $route.query.id; 223 const code = $route.query.id;
214 const { data } = await mapAPI({ i: code }); 224 const { data } = await mapAPI({ i: code });
......
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: 2025-03-06 10:29:14 4 + * @LastEditTime: 2025-03-06 15:51:20
5 * @FilePath: /map-demo/src/views/tools.vue 5 * @FilePath: /map-demo/src/views/tools.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -192,27 +192,27 @@ export default { ...@@ -192,27 +192,27 @@ export default {
192 data() { 192 data() {
193 return { 193 return {
194 map: '', 194 map: '',
195 - location_options: { 195 + // location_options: {
196 - 'showButton': true, // 是否显示定位按钮 196 + // 'showButton': true, // 是否显示定位按钮
197 - 'buttonPosition': 'LB', // 定位按钮的位置 197 + // 'buttonPosition': 'LB', // 定位按钮的位置
198 - /* LT LB RT RB */ 198 + // /* LT LB RT RB */
199 - 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离 199 + // 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
200 - 'showMarker': true, // 是否显示定位点 200 + // 'showMarker': true, // 是否显示定位点
201 - 'markerOptions': { // 自定义定位点样式，同Marker的Options 201 + // 'markerOptions': { // 自定义定位点样式，同Marker的Options
202 - 'offset': new AMap.Pixel(-18, -36), 202 + // 'offset': new AMap.Pixel(-18, -36),
203 - 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>' 203 + // 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
204 - }, 204 + // },
205 - 'showCircle': true, // 是否显示定位精度圈 205 + // 'showCircle': true, // 是否显示定位精度圈
206 - 'circleOptions': { // 定位精度圈的样式 206 + // 'circleOptions': { // 定位精度圈的样式
207 - 'strokeColor': '#0093FF', 207 + // 'strokeColor': '#0093FF',
208 - 'noSelect': true, 208 + // 'noSelect': true,
209 - 'strokeOpacity': 0.5, 209 + // 'strokeOpacity': 0.5,
210 - 'strokeWeight': 1, 210 + // 'strokeWeight': 1,
211 - 'fillColor': '#02B0FF', 211 + // 'fillColor': '#02B0FF',
212 - 'fillOpacity': 0.25 212 + // 'fillOpacity': 0.25
213 - }, 213 + // },
214 - enableHighAccuracy: true 214 + // enableHighAccuracy: true
215 - }, 215 + // },
216 geolocation: '', 216 geolocation: '',
217 current_lng: '', 217 current_lng: '',
218 current_lat: '', 218 current_lat: '',
......
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: 2025-02-25 18:46:43 4 + * @LastEditTime: 2025-03-06 15:52:47
5 * @FilePath: /map-demo/src/views/xys/index.vue 5 * @FilePath: /map-demo/src/views/xys/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -190,27 +190,27 @@ export default { ...@@ -190,27 +190,27 @@ export default {
190 data() { 190 data() {
191 return { 191 return {
192 map: '', 192 map: '',
193 - location_options: { 193 + // location_options: {
194 - 'showButton': true, // 是否显示定位按钮 194 + // 'showButton': true, // 是否显示定位按钮
195 - 'buttonPosition': 'LB', // 定位按钮的位置 195 + // 'buttonPosition': 'LB', // 定位按钮的位置
196 - /* LT LB RT RB */ 196 + // /* LT LB RT RB */
197 - 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离 197 + // 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
198 - 'showMarker': true, // 是否显示定位点 198 + // 'showMarker': true, // 是否显示定位点
199 - 'markerOptions': { // 自定义定位点样式，同Marker的Options 199 + // 'markerOptions': { // 自定义定位点样式，同Marker的Options
200 - 'offset': new AMap.Pixel(-18, -36), 200 + // 'offset': new AMap.Pixel(-18, -36),
201 - 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>' 201 + // 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
202 - }, 202 + // },
203 - 'showCircle': true, // 是否显示定位精度圈 203 + // 'showCircle': true, // 是否显示定位精度圈
204 - 'circleOptions': { // 定位精度圈的样式 204 + // 'circleOptions': { // 定位精度圈的样式
205 - 'strokeColor': '#0093FF', 205 + // 'strokeColor': '#0093FF',
206 - 'noSelect': true, 206 + // 'noSelect': true,
207 - 'strokeOpacity': 0.5, 207 + // 'strokeOpacity': 0.5,
208 - 'strokeWeight': 1, 208 + // 'strokeWeight': 1,
209 - 'fillColor': '#02B0FF', 209 + // 'fillColor': '#02B0FF',
210 - 'fillOpacity': 0.25 210 + // 'fillOpacity': 0.25
211 - }, 211 + // },
212 - enableHighAccuracy: true 212 + // enableHighAccuracy: true
213 - }, 213 + // },
214 geolocation: '', 214 geolocation: '',
215 current_lng: '', 215 current_lng: '',
216 current_lat: '', 216 current_lat: '',
......