聊聊关于vue3中如何使用高德地图api

引入高德地图JS API

在使用高德地图JS API之前，需要先引入相关的JS文件，可以通过以下代码引入:

<script charset="utf-8" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

需要将YOUR_API_KEY替换为您的开发者KEY。

创建地图实例

在引入高德地图JS API之后，需要先创建一个地图实例，可以通过以下代码实现:

let map = new AMap.Map('mapContainer', {
    zoom: 10,//设置缩放级别
    center: [116.39, 39.9]//设置地图中心点坐标
});

该代码会在id为mapContainer的div中创建一个宽度为100%，高度为100%的地图，并将地图中心设置为[116.39, 39.9]，缩放级别为10。

在地图上添加标记

在创建地图实例后，可以在地图上添加标记，可以通过以下代码实现:

let marker = new AMap.Marker({
    position: [116.39, 39.9],//设置标记位置
    title: '北京'//设置标记标题
});
map.add(marker);//将标记添加到地图中

该代码会在地图上添加一个标题为“北京”的标记，并将标记位置设置为[116.39, 39.9]。

实现地图搜索功能

除了在地图上添加标记外，也可以利用高德地图JS API实现地图搜索功能，可以通过以下代码实现:

//创建搜索框
let search = new AMap.Search({
    city: '北京'
});
//执行搜索
search.search('天安门');

该代码会创建一个以“北京”为城市的搜索框，并通过执行search('天安门')实现搜索该城市的“天安门”位置。