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
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-06 10:29:04
* @LastEditTime: 2025-03-06 15:46:30
* @FilePath: /map-demo/src/views/index.vue
* @Description: 公众地图主体页面
-->
......@@ -190,27 +190,27 @@ export default {
data() {
return {
map: '',
location_options: {
'showButton': true, // 是否显示定位按钮
'buttonPosition': 'LB', // 定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
'showMarker': true, // 是否显示定位点
'markerOptions': { // 自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
},
'showCircle': true, // 是否显示定位精度圈
'circleOptions': { // 定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
enableHighAccuracy: true
},
// location_options: {
// 'showButton': true, // 是否显示定位按钮
// 'buttonPosition': 'LB', // 定位按钮的位置
// /* LT LB RT RB */
// 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
// 'showMarker': true, // 是否显示定位点
// 'markerOptions': { // 自定义定位点样式，同Marker的Options
// 'offset': new AMap.Pixel(-18, -36),
// 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
// },
// 'showCircle': true, // 是否显示定位精度圈
// 'circleOptions': { // 定位精度圈的样式
// 'strokeColor': '#0093FF',
// 'noSelect': true,
// 'strokeOpacity': 0.5,
// 'strokeWeight': 1,
// 'fillColor': '#02B0FF',
// 'fillOpacity': 0.25
// },
// enableHighAccuracy: true
// },
geolocation: '',
current_lng: '',
current_lat: '',
......
......@@ -126,7 +126,7 @@
<script setup>
import { onMounted, ref, computed, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from 'vue-router'
// import AMapLoader from "@amap/amap-jsapi-loader";
import AMapLoader from "@amap/amap-jsapi-loader";
import { TileCutter } from "@/utils/TileCutter";
import { Top, Bottom, Back, Right, Plus, Minus, Brush } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
......@@ -208,7 +208,17 @@ const handleKeydown = (e) => { // 键盘控制
}
}
// 关键安全配置
window._AMapSecurityConfig = {
securityJsCode: '8602057c4c8dae5bed9a240c0582c46f', // 替换为你的密钥
}
onMounted(async () => {
const AMap = await AMapLoader.load({
key: '381c6763e1fefd810fbab697f470149c', // 控制台获取
version: '2.0', // 指定API版本
plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation'] // 必须加载步行导航插件
})
// 地图中心点
const code = $route.query.id;
const { data } = await mapAPI({ i: code });
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-06 10:29:14
* @LastEditTime: 2025-03-06 15:51:20
* @FilePath: /map-demo/src/views/tools.vue
* @Description: 公众地图主体页面
-->
......@@ -192,27 +192,27 @@ export default {
data() {
return {
map: '',
location_options: {
'showButton': true, // 是否显示定位按钮
'buttonPosition': 'LB', // 定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
'showMarker': true, // 是否显示定位点
'markerOptions': { // 自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
},
'showCircle': true, // 是否显示定位精度圈
'circleOptions': { // 定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
enableHighAccuracy: true
},
// location_options: {
// 'showButton': true, // 是否显示定位按钮
// 'buttonPosition': 'LB', // 定位按钮的位置
// /* LT LB RT RB */
// 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
// 'showMarker': true, // 是否显示定位点
// 'markerOptions': { // 自定义定位点样式，同Marker的Options
// 'offset': new AMap.Pixel(-18, -36),
// 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
// },
// 'showCircle': true, // 是否显示定位精度圈
// 'circleOptions': { // 定位精度圈的样式
// 'strokeColor': '#0093FF',
// 'noSelect': true,
// 'strokeOpacity': 0.5,
// 'strokeWeight': 1,
// 'fillColor': '#02B0FF',
// 'fillOpacity': 0.25
// },
// enableHighAccuracy: true
// },
geolocation: '',
current_lng: '',
current_lat: '',
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-02-25 18:46:43
* @LastEditTime: 2025-03-06 15:52:47
* @FilePath: /map-demo/src/views/xys/index.vue
* @Description: 公众地图主体页面
-->
......@@ -190,27 +190,27 @@ export default {
data() {
return {
map: '',
location_options: {
'showButton': true, // 是否显示定位按钮
'buttonPosition': 'LB', // 定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
'showMarker': true, // 是否显示定位点
'markerOptions': { // 自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
},
'showCircle': true, // 是否显示定位精度圈
'circleOptions': { // 定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
},
enableHighAccuracy: true
},
// location_options: {
// 'showButton': true, // 是否显示定位按钮
// 'buttonPosition': 'LB', // 定位按钮的位置
// /* LT LB RT RB */
// 'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
// 'showMarker': true, // 是否显示定位点
// 'markerOptions': { // 自定义定位点样式，同Marker的Options
// 'offset': new AMap.Pixel(-18, -36),
// 'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
// },
// 'showCircle': true, // 是否显示定位精度圈
// 'circleOptions': { // 定位精度圈的样式
// 'strokeColor': '#0093FF',
// 'noSelect': true,
// 'strokeOpacity': 0.5,
// 'strokeWeight': 1,
// 'fillColor': '#02B0FF',
// 'fillOpacity': 0.25
// },
// enableHighAccuracy: true
// },
geolocation: '',
current_lng: '',
current_lat: '',
......