【vue3/高德地图】实现地图打点/自定义点位图标/地理围栏实现

在这里插入图片描述

<template><div class="app-container"><div id="container"></div></div>
</template><script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
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: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {const map = new AMap.Map("container", {  //设置地图容器idviewMode: "2D",    //是否为3D地图模式zoom: 10,           //初始化地图级别center: [119.898881, 30.594178], //初始化地图中心点位置mapStyle: 'amap://styles/',});allMap.value = map//围栏const geoJson = new AMap.GeoJSON({// GeoJSON对象geoJSON: geojsonData,// 还可以自定义getMarker和getPolylinegetPolygon: function (geojson, lnglats) {return new AMap.Polygon({path: lnglats,strokeColor: 'rgba(230, 230, 254, 0.5)',fillColor: '#0E465A',strokeWeight: 2,strokeColor: '#2FD7D7',// 设置虚线strokeStyle: 'dashed'})},})map.add(geoJson)// 点位信息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 => {// 创建 AMap.Icon 实例：const icon = new AMap.Icon({size: new AMap.Size(50, 60),    // 图标尺寸// vue3/vite 需要用特定的本地图片引入方式，不可require引入image: new URL('../assets/images/压力表.png', import.meta.url).href,  // Icon的图像// imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片imageOffset: new AMap.Pixel(0, 0)});// 创建一个 Marker 实例：const marker = new AMap.Marker({position: new AMap.LngLat(element[0], element[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]// title: 'hhhhhh',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>