Vue+高德地图API：坐标转换

目录

1 用到的API

2 通过鼠标获取经纬度

3 实现思路

4 完整代码

---

1 用到的API

• AMap.LngLat(point)：经纬度，需传入点坐标
• AMap.Pixel(point)：像素点，需传入点坐标
• map.lngLatToContainer（AMap.LngLat(point)）：经纬度转地图容器像素点
• map.containerToLngLat（AMap.Pixel(point)）：地图容器像素点转经纬度
• map.lngLatToPixel（AMap.LngLat(point)）：经纬度转平面像素坐标
• map.pixelToLngLat（AMap.Pixel(point)）：平面像素坐标转经纬度

经纬度 <-> 地图容器像素坐标-坐标系转换-示例中心-JS API 2.0 示例 | 高德地图API (amap.com) 

2 通过鼠标获取经纬度

• 通过地图事件获取当前点击对象
• 获取对象e的经纬度，并转成字符型

map.on('click', function (e) {
	lnglatInput.value = e.lnglat.toString()
})

3 实现思路

1. 通过鼠标点击事件获取当前的点击对象，并获取其经纬度，将其赋值给经纬度输入框的value；
2. 获取经纬度输入框的value，调用经纬度转像素值函数，将其转换为像素值，并赋值给像素值输入框；

4 完整代码

<template>
	<div id="container" tabindex="0"></div>
	<div class="input-card">
		<label for="">经纬度坐标</label>
		<div class="input-item">
			<div class="input-item-prepend">
				<span class="input-item-text">经纬度</span>
			</div>
			<input type="text" id="lnglat" value="116.611279,40.113257" />
		</div>
		<label for="">像素值</label>
		<div class="input-item">
			<div class="input-item-prepend">
				<span class="input-item-text">像素值</span>
			</div>
			<input type="text" id="pixel" />
		</div>
		<div>
			<input
				type="button"
				id="lnglat2container"
				value="经纬度-> 像素值"
			/>
			<input
				type="button"
				id="container2lnglat"
				value="像素值-> 经纬度"
			/>
		</div>
	</div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
window._AMapSecurityConfig = {
	securityJsCode: '您的密钥',
}
onMounted(() => {
	// JS API加载器，可多次调用加载器
	AMapLoader.load({
		key: '您的Key',
		version: '2.0',
		plugins: [],
	})
		.then((AMap) => {
			const map = new AMap.Map('container', {
				zoom: 11,
			})
			var $ = function (elementId) {
				return document.getElementById(elementId)
			}
			var lnglatInput = $('lnglat')
			var pixelInput = $('pixel')
			AMap.plugin(['AMap.LngLat', 'AMap.Pixel'], function () {
				function lnglat2container() {
					if (!lnglatInput) return
					var inputVal = lnglatInput.value.split(',')
					var lnglat = new AMap.LngLat(inputVal[0], inputVal[1])
					var pixel = map.lngLatToContainer(lnglat)
					pixelInput.value = pixel.round()
				}
				function container2lnglat() {
					if (!pixelInput) return
					var inputVal = pixelInput.value.split(',')
					var pixel = new AMap.Pixel(inputVal[0], inputVal[1])
					var lnglat = map.containerToLnglLat(pixel);
					lnglatInput.value = lnglat
				}
				map.on('click', function (e) {
					lnglatInput.value = e.lnglat.toString()
					console.log(e.lnglat)
				})
				lnglat2container()
				document.getElementById('lnglat2container').onclick =
					lnglat2container
				document.getElementById('container2lnglat').onclick =
					container2lnglat
			})
		})
		.catch((e) => {
			console.log(e)
		})
})
onUnmounted(() => {
	map?.destory()
})
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
#container {
	width: 100%;
	height: 706px;
}
.input-card {
	width: 24rem;
}
</style>

5 小总结

• 地图容器像素坐标和平面像素的区别

坐标系转换-坐标变换-进阶教程-地图 JS API 2.0|高德地图API (amap.com)https://lbs.amap.com/api/javascript-api-v2/guide/transform/coord_trans

1. 地图容器坐标：真实世界中的地理位置是使用经纬度进行描述，然而当地图被抽象到浏览器的页面里时，真实的地址位置则需要转换为地图容器像素坐标，反之亦然。
2. 平面像素坐标：JS API 提供经纬度投影到平面地图像素坐标的转换接口， JS API 通过墨卡托投影，将球面坐标投影到平面平面坐标系上。在不同缩放等级（zoom）下，所投影的平面坐标是不同的，其关系为：缩放等级每扩大一倍，平面坐标就扩大两倍。

小tips：地图坐标以地图容器的左上角为原点，以屏幕像素值为像素单位；而平面像素坐标会随着缩放层级的变化而变化，缩放层级越大，平面坐标也会变化。