高德地图 vue3 + ts 的基础使用

高德地图 vue3 + ts 的基础使用

<template>
	<div style="width: 100%; height: 100%" id="map"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
interface  ILocation { // 经纬度实体类
	// 经度
	longitude: string | number
	// 纬度
	latitude: string | number
}
const key = '' // 自己申请的高德地图key
const nMap = ref('')
// 设置地图
const defaultStyle = {
	zoom: 11, //设置地图显示的缩放级别
	center: [120.7170619747857, 30.73945447736177], //设置地图中心点坐标
	viewMode: '2D' //设置地图模式
}
onMounted(async () => {
	await loadScript()
})
/**
 * 加载脚本
 */
const loadScript = () => {
	const url = `https://webapi.amap.com/maps?v=2.0&key=${key}&callback=onLoad`
	const jsapi = document.createElement('script')
	jsapi.charset = 'utf-8'
	jsapi.src = url
	document.head.appendChild(jsapi)
	jsapi.onload = () => {
		initMap()
	}
}
/**
 * 实例化AMap对象
 */
const initMap = () => {
	nMap.value = new AMap.Map('map', defaultStyle)
}
// 添加点标记
const addPointMarker = (longitude: number, latitude: number) => {
	const marker = new AMap.Marker({
		position: new AMap.LngLat(longitude, latitude),
		title: ' '
	})
	nMap.value.add(marker)
}
// 批量添加
const addPointMarkerList = (arr: Array<Array<number | string>>) => {
	let markerList = ref<any>([])
	arr.forEach(item => {
		const marker = new AMap.Marker({
			position: new AMap.LngLat(item[0], item[1]),
			title: ' '
		})
		console.log(marker)
		markerList.value.push(marker)
	})
	nMap.value.add(markerList.value)
}
</script>