<template>
<div class="app-container">
<div id="container">div>
div>
template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity';
import { ref, reactive} from "vue";
import geojsonData from '../assets/huzhou_division'
const allMap = shallowRef(null);
function initMap() {
window._AMapSecurityConfig = {
securityJsCode: '',
}
AMapLoader.load({
key: "",
version: "2.0",
plugins: ["AMap.GeoJSON"],
}).then((AMap) => {
const map = new AMap.Map("container", {
viewMode: "2D",
zoom: 10,
center: [119.898881, 30.594178],
mapStyle: 'amap://styles/',
});
allMap.value = map
const markerdata = reactive([[119.898881, 30.794178], [119.998881, 30.794178], [119.798881, 30.794178], [119.698881, 30.794178], [120.098881, 30.794178]])
markerdata.forEach(element => {
const icon = new AMap.Icon({
size: new AMap.Size(50, 60),
image: new URL('../assets/images/压力表.png', import.meta.url).href,
imageSize: new AMap.Size(50, 60),
imageOffset: new AMap.Pixel(0, 0)
});
const marker = new AMap.Marker({
position: new AMap.LngLat(element[0], element[1]),
icon: icon
});
marker.content = proxy.$refs.dialog
map.add(marker);
});
}).catch(e => {
console.log(e);
})
}
initMap()
script>
<style lang="scss" scoped>
.app-container {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#container {
padding: 0px;
margin: 0px;
width: 1920px;
height: 1080px;
}
style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93