1. 页面效果
2. Vue3中调用高德API
<template>
<div :id="mapId"
class="w-full h-full"></div>
</template>
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { uniqueId } from 'lodash'
import { shallowRef, ref, unref, reactive, onMounted } from 'vue'
import { shanghai } from './Shanghai'
const mapId = ref<string>(uniqueId('vue-amap-'))
const map = shallowRef(null)
const location = reactive({ longitude: '', latitude: '' })
const keyword = ref('')
let AMapObj
function initMap() {
AMapLoader.load({
key: '********',
version: '2.0',
plugins: [
'AMap.Scale',
'AMap.ToolBar',
'AMap.Driving',
'AMap.PolygonEditor',
'AMap.PlaceSearch'
]
}).then((AMap) => {
AMapObj = AMap
map.value = new AMap.Map(unref(mapId), {
resizeEnable: true,
center: [114.573471, 25.128443],
zoom: 8
})
AMap.plugin('AMap.ToolBar', function () {
var toolbar = new AMap.ToolBar()
map.value.addControl(toolbar)
})
var polygon = new AMap.Polygon({
path: shanghai,
fillColor: '#0070EF',
strokeOpacity: 1,
fillOpacity: 0.2,
strokeColor: '#0070EF',
strokeWeight: 1,
strokeStyle: 'dashed',
strokeDasharray: [5, 5],
});
map.value.add([polygon]);
map.value.setFitView();
map.value.setZoom(8);
})
}
onMounted(() => initMap())
</script>
3. 数据来源 - Data.shanghai
数据来源
export const shanghai = [ [ [ [121.7789, 31.3102],
[121.7279, 31.3548],
[121.5723, 31.4361],
[121.5093, 31.4898],
[121.5624, 31.4864],
[121.5856, 31.4547],
[121.7694, 31.3907],
[121.796, 31.3456],
[121.7789, 31.3102],
],
],
[ [ [121.627, 31.445],
[121.5942, 31.4586],
[121.5758, 31.4782],
[121.6137, 31.4713],
[121.635, 31.453],
[121.627, 31.445],
],
],
[ [ [121.8018, 31.357],
[121.7939, 31.3805],
[121.8759, 31.3642],
[121.8882, 31.3227],
[121.8725, 31.2968],
[121.8406, 31.2954],
[121.8038, 31.3284],
[121.8018, 31.357],
],
],
[ [ [121.9752, 31.617],
[121.9917, 31.4768],
[121.918, 31.4347],
[121.8454, 31.4319],
[121.6088, 31.5069],
[121.4342, 31.5903],
[121.3955, 31.5854],
[121.3722, 31.5532],
[121.1453, 31.7539],
[121.1185, 31.7591],
[121.2003, 31.8351],
[121.3104, 31.8725],
[121.385, 31.8335],
[121.4315, 31.7693],
[121.4986, 31.7533],
[121.5933, 31.7046],
[121.9752, 31.617],
],
],
[ [ [121.1571, 31.4114],
[121.1462, 31.4211],
[121.1643, 31.4272],
[121.1643, 31.4311],
[121.1473, 31.4439],
[121.2304, 31.4774],
[121.2352, 31.4931],
[121.2594, 31.4779],
[121.3435, 31.5121],
[121.4054, 31.4872],
[121.5212, 31.3948],
[121.5989, 31.3746],
[121.7225, 31.3035],
[121.9627, 31.0473],
[121.9985, 30.9],
[121.994, 30.8631],
[121.9547, 30.8258],
[121.9697, 30.7892],
[121.9437, 30.7771],
[121.9045, 30.8142],
[121.6484, 30.8162],
[121.5172, 30.7754],
[121.3619, 30.6795],
[121.2747, 30.6774],
[121.2715, 30.7327],
[121.2355, 30.7523],
[121.218, 30.785],
[121.1747, 30.772],
[121.1178, 30.7848],
[121.1376, 30.8262],
[121.1177, 30.8353],
[121.1217, 30.85],
[121.067, 30.8488],
[121.0379, 30.8139],
[121.0144, 30.8358],
[120.9909, 30.8227],
[121.0219, 30.8752],
[120.9904, 30.8956],
[121.0046, 30.9093],
[120.9904, 31.0138],
[120.9522, 31.0303],
[120.9398, 31.0094],
[120.911, 31.0106],
[120.8946, 31.0539],
[120.9021, 31.0857],
[120.8569, 31.105],
[120.8813, 31.1347],
[121.0185, 31.1341],
[121.0408, 31.1376],
[121.0454, 31.154],
[121.0691, 31.1487],
[121.0625, 31.2675],
[121.0821, 31.2715],
[121.0888, 31.2921],
[121.0988, 31.2763],
[121.1054, 31.2737],
[121.1206, 31.287],
[121.1616, 31.283],
[121.1438, 31.3097],
[121.1299, 31.3026],
[121.1304, 31.3442],
[121.1068, 31.3645],
[121.1484, 31.3854],
[121.1571, 31.4114],
],
],
[ [ [121.9433, 31.2155],
[121.9573, 31.2304],
[122.0086, 31.221],
[121.9957, 31.1608],
[121.9596, 31.1593],
[121.9433, 31.2155],
],
],
];
var suzhou = [[121.3435, 31.51206], [121.32251, 31.49936], [121.32016, 31.50588], [121.30553, 31.50534], [121.2986, 31.49151], [121.26887, 31.48746], [121.25943, 31.47795], [121.25445, 31.48375], [121.24707, 31.47706], [121.2419, 31.49329], [121.23524, 31.49312], [121.23036, 31.47743], [121.2138, 31.47891], [121.18082, 31.45146], [121.14734, 31.44393], [121.14783, 31.43619], [121.16434, 31.43106], [121.14625, 31.42107], [121.15938, 31.40579], [121.14383, 31.39233], [121.14844, 31.38541], [121.11375, 31.37445], [121.12022, 31.36867], [121.10695, 31.3666], [121.10728, 31.35525], [121.11798, 31.35141], [121.11797, 31.34345], [121.13044, 31.34421], [121.12995, 31.30259], [121.14378, 31.3097], [121.16156, 31.28299], [121.14521, 31.27529], [121.12065, 31.28703], [121.10545, 31.27365], [121.08879, 31.29208], [121.08215, 31.27154], [121.06246, 31.26745], [121.05716, 31.24643], [121.06435, 31.24614], [121.0668, 31.19496], [121.0773, 31.16602], [121.06912, 31.1487], [121.04542, 31.15403], [121.04077, 31.13759], [121.02672, 31.14377], [121.01849, 31.1341], [120.98391, 31.13171], [120.93034, 31.14141], [120.87874, 31.13338], [120.8568, 31.10283], [120.89235, 31.09749], [120.90472, 31.0805], [120.89462, 31.05866], [120.90136, 31.0175], [120.89135, 31.00374], [120.8655, 30.98968], [120.8474, 30.9896], [120.82298, 31.0057], [120.80291, 31.00541], [120.76993, 30.99662], [120.7697, 30.9773], [120.74594, 30.9625], [120.7256, 30.97154], [120.6982, 30.97079], [120.68445, 30.95518], [120.69756, 30.95034], [120.71063, 30.92905], [120.71326, 30.88505], [120.70128, 30.88336], [120.70392, 30.87094], [120.69312, 30.87066], [120.68282, 30.88254], [120.66326, 30.86131], [120.65869, 30.86527], [120.65488, 30.84704], [120.64356, 30.85546], [120.60862, 30.84825], [120.58896, 30.85443], [120.55949, 30.83152], [120.50444, 30.75797], [120.48909, 30.76369], [120.47553, 30.80386], [120.45528, 30.81685], [120.4604, 30.83986], [120.4413, 30.85629], [120.45318, 30.86972], [120.4345, 30.88798], [120.44254, 30.90168], [120.435, 30.92082], [120.4201, 30.92771], [120.42422, 30.90058], [120.37941, 30.89077], [120.36466, 30.88047], [120.35682, 30.911], [120.35967, 30.93294], [120.37129, 30.94867], [120.25066, 30.92571], [120.1979, 30.92831], [120.13252, 30.94308], [120.05245, 31.00574], [120.00041, 31.02775], [119.98852, 31.05922], [119.94364, 31.10466], [119.93982, 31.14295], [119.9205, 31.16234], [119.9197, 31.17074], [120.11023, 31.264], [120.17372, 31.30881], [120.20961, 31.34566], [120.41771, 31.44768], [120.47418, 31.44656], [120.52361, 31.46873], [120.54297, 31.46993], [120.55524, 31.47787], [120.54804, 31.49508], [120.5552, 31.50758], [120.59124, 31.52751], [120.59666, 31.51627], [120.60549, 31.52402], [120.59457, 31.57601], [120.57384, 31.58595], [120.56742, 31.584], [120.57303, 31.57747], [120.55021, 31.57502], [120.54309, 31.60174], [120.56647, 31.60193], [120.57708, 31.61416], [120.6006, 31.61712], [120.5921, 31.62504], [120.59213, 31.65028], [120.55862, 31.65733], [120.57023, 31.66932], [120.56821, 31.68546], [120.58645, 31.69071], [120.60081, 31.70885], [120.58245, 31.72117], [120.58436, 31.73447], [120.60002, 31.74463], [120.58424, 31.78215], [120.57071, 31.79378], [120.55838, 31.78571], [120.55589, 31.7942], [120.53156, 31.78779], [120.52254, 31.80629], [120.53131, 31.82785], [120.50328, 31.84171], [120.49088, 31.87133], [120.46882, 31.87962], [120.4665, 31.88998], [120.37867, 31.91374], [120.39126, 31.92861], [120.37353, 31.94644], [120.3707, 31.99082], [120.40376, 32.01622], [120.46567, 32.04583], [120.5038, 32.04102], [120.62839, 32.00117], [120.76158, 32.02045], [120.78204, 32.01599], [120.80313, 31.98844], [120.86033, 31.87306], [120.91664, 31.79366], [120.9595, 31.78304], [121.06064, 31.78306], [121.10122, 31.76252], [121.14533, 31.75392], [121.28911, 31.61628], [121.37221, 31.55321], [121.3435, 31.51206]];
var wuxi = [[120.3707, 31.99082], [120.37353, 31.94644], [120.39126, 31.92861], [120.37867, 31.91374], [120.4665, 31.88998], [120.46882, 31.87962], [120.49088, 31.87133], [120.50328, 31.84171], [120.53131, 31.82785], [120.52254, 31.80629], [120.53156, 31.78779], [120.55589, 31.7942], [120.55838, 31.78571], [120.57071, 31.79378], [120.59766, 31.75503], [120.60002, 31.74463], [120.58171, 31.72763], [120.58509, 31.71443], [120.59995, 31.7059], [120.58645, 31.69071], [120.56821, 31.68546], [120.57023, 31.66932], [120.55858, 31.65851], [120.59213, 31.65028], [120.5921, 31.62504], [120.6006, 31.61712], [120.57708, 31.61416], [120.56647, 31.60193], [120.54309, 31.60174], [120.55021, 31.57502], [120.57303, 31.57747], [120.56742, 31.584], [120.57384, 31.58595], [120.59457, 31.57601], [120.60502, 31.54607], [120.60235, 31.51899], [120.59666, 31.51627], [120.59124, 31.52751], [120.5552, 31.50758], [120.54804, 31.49508], [120.55524, 31.47787], [120.54297, 31.46993], [120.52361, 31.46873], [120.47418, 31.44656], [120.41771, 31.44768], [120.20961, 31.34566], [120.17372, 31.30881], [120.11023, 31.264], [119.91862, 31.17019], [119.87874, 31.1608], [119.82785, 31.17454], [119.82345, 31.16582], [119.82937, 31.15827], [119.80986, 31.14852], [119.79128, 31.15661], [119.79252, 31.17146], [119.77932, 31.17878], [119.71589, 31.16958], [119.70388, 31.1519], [119.67261, 31.168], [119.64186, 31.14843], [119.63705, 31.13453], [119.61373, 31.12918], [119.59978, 31.10917], [119.57651, 31.11027], [119.57133, 31.12901], [119.53259, 31.15909], [119.55357, 31.17916], [119.55386, 31.22105], [119.52259, 31.24217], [119.53576, 31.27566], [119.52003, 31.31824], [119.53051, 31.33088], [119.52817, 31.36524], [119.54172, 31.39431], [119.53624, 31.40787], [119.55177, 31.4155], [119.5525, 31.4325], [119.57719, 31.43077], [119.5896, 31.44766], [119.58833, 31.46669], [119.56515, 31.46434], [119.57515, 31.4808], [119.56716, 31.50508], [119.58362, 31.50454], [119.60787, 31.55318], [119.64445, 31.57296], [119.63938, 31.60026], [119.67303, 31.60933], [119.68512, 31.60383], [119.69979, 31.57655], [119.70996, 31.576], [119.71482, 31.55618], [119.73326, 31.56316], [119.79218, 31.55338], [119.83272, 31.5291], [119.8478, 31.5298], [119.8622, 31.54634], [119.93563, 31.55272], [119.97172, 31.53596], [119.97357, 31.51586], [119.99611, 31.4975], [119.99716, 31.50812], [120.04568, 31.49091], [120.03761, 31.42589], [120.02107, 31.38301], [120.0237, 31.36495], [120.04176, 31.34588], [120.10015, 31.33533], [120.09614, 31.35249], [120.04485, 31.35881], [120.03971, 31.37813], [120.05479, 31.43429], [120.11007, 31.46153], [120.10874, 31.48099], [120.12847, 31.50547], [120.11957, 31.50834], [120.12067, 31.51615], [120.10303, 31.51407], [120.0992, 31.54823], [120.06026, 31.55799], [120.05566, 31.5777], [120.07489, 31.59536], [120.07558, 31.60711], [120.10448, 31.62877], [120.11948, 31.6309], [120.12853, 31.68463], [120.14327, 31.67608], [120.15253, 31.68364], [120.143, 31.68833], [120.15684, 31.70383], [120.15447, 31.75624], [120.16902, 31.76097], [120.18394, 31.74992], [120.20116, 31.75327], [120.17425, 31.80103], [120.17923, 31.81334], [120.16392, 31.83029], [120.18425, 31.85613], [120.17589, 31.87021], [120.14423, 31.85893], [120.08547, 31.85306], [120.04498, 31.82175], [120.02877, 31.83212], [120.01981, 31.82276], [120.00492, 31.82582], [119.99007, 31.85461], [120.00327, 31.85915], [120.01478, 31.88179], [119.99783, 31.89435], [120.00089, 31.90557], [120.02241, 31.91969], [120.0074, 31.93593], [120.00878, 31.9513], [120.0224, 31.96775], [120.13481, 31.93938], [120.2366, 31.93291], [120.3707, 31.99082]];
