JavaScript使用高德API显示地图

前言

在JavaScript中，使用Leaflet库显示地图是一种常见的做法。Leaflet是一个开源的JavaScript库，用于在Web应用程序中创建互动地图。它非常轻量级，易于使用，并且提供了多种功能，使开发者能够轻松地将地图集成到他们的项目中。
本次我们使用高德地图API来显示我们的地图，其实所有的大概都大差不差

如何使用？

准备-入门-教程-地图 JS API 1.4|高德地图API (amap.com)
● 上面是高德地图的开放平台，我们可以大概简单的看下，上面有详细的教程
在这里插入图片描述

● 如果我们需要使用一些天气、自定义地图、搜索、路线规划、地理编码等服务的话，需要申请key才能能够使用，不需要申请key也可以正常的使用地图；
在这里插入图片描述

● 下面，我们就直接来引入
在这里插入图片描述

● 下面我们将我们的经度纬度传入进去就可以了，还需要写一个marker来使用箭头标记我们目前的所在位置

if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;console.log(position);const map = new AMap.Map('map', {center: [longitude, latitude],zoom: 11,});const marker = new AMap.Marker({position: [longitude, latitude], // 标记位置});marker.setMap(map);},function () {alert('无法获取你的位置！');});