xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
home孙 2025-06-28 11:26:13 +08:00
parent 318b0fd61c
commit a75b50eca7
4 changed files with 88 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@ -6,6 +6,15 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=6bb8457c7f0b7661c2e925c25ae53852&plugin=AMap.ElasticMarker"
></script>
<script>
window._AMapSecurityConfig = {
securityJsCode: "68fc1cc8e2dd5d683ddc93ee7bbdd05d",
};
</script>
</head>
<body>
<noscript>

5
src/router/index.js
View File

@ -13,6 +13,11 @@ const routes = [
name: 'login',
component: login,
},
{
path: '/test',
name: 'test',
component: () => import('../views/test.vue')
},
{
path: '/home',
name: 'home',

49
src/views/page/largeScreen.vue
View File

@ -229,7 +229,8 @@
</div>
<!-- 长兴前卫柑桔新优品种扩繁基地 -->
<div class="drag_box13" ref="drag_box13" v-show="limitUserId == 13">
<img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
<div class="map-13" id="map-13"></div>
<!-- <img class="drag_img" src="../../assets/img/map9.jpg" alt="" />
<img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
@ -243,7 +244,7 @@
<img class="axis_shimen10" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen11" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen12" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen13" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
<img class="axis_shimen13" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" /> -->
</div>
</div>
</div>
@ -1280,14 +1281,42 @@ export default {
this.drag_boxHandler12();
this.dataInit(userId, this.limitUserId);
}else if (this.limitUserId == 13) {
this.drag_boxHandler13();
// this.drag_boxHandler13();
this.mapInit()
this.dataInit(userId, this.limitUserId);
}
}
});
},
mapInit(){
const map = new AMap.Map("map-13", {
zoom: 18,
center: [121.696506, 31.410799],
});
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
// map.setLayers([]); // 先清空现有图层
satelliteLayer.setMap(map); // 加载卫星图层
// roadNetLayer.setMap(map); // 加载路网图层（覆盖在卫星图上）
// 添加标点
const iconUrl = require("@/assets/img/axis1.png");
const icon = new AMap.Icon({
image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
});
const marker = new AMap.Marker({
position:new AMap.LngLat(121.696506, 31.410799),
icon: icon,
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
map.add(marker);
},
// autoPlay1() {
// this.autoPlay = false;
// clearInterval(this.timer_) && this.timer_;
@ -1997,7 +2026,12 @@ window.open("http://localhost:8080/");
}
}
}
.amap-icon{
img{
width: 100%;
height: 100%;
}
}
.e_content1 {
height: 100%;
@ -2701,7 +2735,8 @@ window.open("http://localhost:8080/");
}
.drag_box13{
width: 100%;
height: auto;
// height: auto;
height: 100%;
position: absolute;
// top: 0.3rem;
// left: 0.5rem;
@ -2718,6 +2753,10 @@ window.open("http://localhost:8080/");
blue 13%,
blue 73%,
transparent 97%);
}
.map-13{
width: 100%;
height: 100%;
}
.axis_shimen {
width: 0.3rem;

30
src/views/test.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="test">
<div class="map-container" id="map-container"></div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
const map = new AMap.Map("map-container", {
zoom: 12,
center: [116.397428, 39.90923],
});
},
methods:{
},
}
</script>
<style lang="scss">
.map-container{
width: 100vw;
height: 100vh;
}
</style>