admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 升级地图API为2.0

Browse Source
This commit is contained in:
Vce 2024-03-28 11:42:47 +08:00
parent 17d785069f
commit c1551d5aae
4 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -106,9 +106,12 @@
}
</script>
<script type="module" src="/src/main.ts"></script>
<script
<!-- <script
src="https://webapi.amap.com/maps?v=1.4.14&key=8d7b8cd643454bec7737b3423647be21&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Geocoder,AMap.Driving"
defer="defer"></script>
defer="defer"></script> -->
<script
src="https://webapi.amap.com/maps?v=2.0&key=8d7b8cd643454bec7737b3423647be21&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Geocoder,AMap.Driving"
defer="defer" type="text/javascript"></script>
<script src="/jquery-1.12.4.min.js"></script>
<!-- 用于前端与插件交互 -->
<script src="/jsencrypt.min.js"></script>

1
src/views/sevenLargeScreen/digitalConstruction/carPosition/index.vue
View File

@ -953,6 +953,7 @@ function initMap() {
// // this.placeSearch = new AMap.PlaceSearch({
// // map: map
// // }); //构造地点查询类
// // 升级2.0后AMap.event.addListener()此方法已废弃
// // AMap.event.addListener(auto, "select", this.select); //注册监听，当选中某条记录时会触发
// mouseTool = new AMap.MouseTool(map);
// mouseTool.on("draw", function (event) {

1
src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue
View File

@ -1140,6 +1140,7 @@ function initMap() {
// this.placeSearch = new AMap.PlaceSearch({
// map: map
// }); //构造地点查询类
// 升级2.0后AMap.event.addListener()此方法已废弃
// AMap.event.addListener(auto, "select", this.select); //注册监听，当选中某条记录时会触发
mouseTool = new AMap.MouseTool(map);
mouseTool.on("draw", function (event) {

73
src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
View File

@ -149,7 +149,8 @@
<div class="right-data">
<div class="map-top">
<Card title="定位地图" style="width: 100%">
<div class="map-box" id="mapContainer" :style="{'transform':`scale(${fenceShow?ratio2:1})`}"></div>
<!-- <div class="map-box" id="mapContainer" :style="{'transform':`scale(${fenceShow?ratio2:1})`}"></div> -->
<div class="map-box" id="mapContainer" :style="{transform:`scale(${ratio2})`}"></div>
<div class="wei-lan" v-if="checked === 1">
<div class="icon-off" v-if="!fenceShow" @click="openFence">
<img src="@/assets/images/carPosition/iconOff.png" alt="" />
@ -546,39 +547,38 @@ function closeDetail(){
isOpenDetail.value = false
}
let addressStr = ref("");
function localtionLotLat(longitude: number | null, latitude: number | null) {
if (longitude && latitude) {
const fixedLongitude = longitude.toFixed(6);
const fixedLatitude = latitude.toFixed(6);
return `经纬度 ${fixedLongitude}, ${fixedLatitude}`;
}
return "未知位置";
}
// let addressStr = ref("");
// function localtionLotLat(longitude: number | null, latitude: number | null) {
// if (longitude && latitude) {
// const fixedLongitude = longitude.toFixed(6);
// const fixedLatitude = latitude.toFixed(6);
// return `经纬度 ${fixedLongitude}, ${fixedLatitude}`;
// }
// return "未知位置";
// }
const resolveAddStr = computed(() => async (longitude: any, latitude: any) => {
//计算属性传递参数
console.log("👇传参");
console.log(longitude, latitude);
if (longitude && latitude) {
var addressResolve = new AMap.LngLat(longitude, latitude);
let geocoder2 = new AMap.Geocoder();
await geocoder2.getAddress(addressResolve, function (status, result) {
console.log("👇解析地址");
console.log(status, result);
if (status === "complete") {
addressStr.value = result.regeocode.formattedAddress;
// console.log(result.regeocode.formattedAddress);
console.log(addressStr);
return addressStr.value;
} else {
return `未知位置1`;
}
});
}
return "未知位置2";
});
// const resolveAddStr = computed(() => async (longitude: any, latitude: any) => {
// //计算属性传递参数
// console.log("👇传参");
// console.log(longitude, latitude);
// if (longitude && latitude) {
// var addressResolve = new AMap.LngLat(longitude, latitude);
// let geocoder2 = new AMap.Geocoder();
// await geocoder2.getAddress(addressResolve, function (status, result) {
// console.log("👇解析地址");
// console.log(status, result);
// if (status === "complete") {
// addressStr.value = result.regeocode.formattedAddress;
// // console.log(result.regeocode.formattedAddress);
// console.log(addressStr);
// return addressStr.value;
// } else {
// return `未知位置1`;
// }
// });
// }
// return "未知位置2";
// });
function areaRadiusChange() {
if (addForm.value.locationList.length === 1) {
@ -1447,6 +1447,7 @@ function initMap() {
// placeSearch = new AMap.PlaceSearch({
// map: map
// }); //构造地点查询类
// 升级2.0后AMap.event.addListener()此方法已废弃
// AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
@ -1542,15 +1543,15 @@ function addMarker() {
// 图标的取图地址
image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
// 图标所用图片大小
imageSize: new AMap.Size(25, 34)
imageSize: new AMap.Size(25, 34),
// 图标取图偏移量
// imageOffset: new AMap.Pixel(-9, -3)
});
var marker = new AMap.Marker({
icon: startIcon,
position: [locationList.value[0].longitude, locationList.value[0].latitude],
size: new AMap.Size(25, 34)
// offset: new AMap.Pixel(-13, -30)
size: new AMap.Size(25, 34),
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
}