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('无法获取你的位置！');
    }
  );

● 这样就可以将地图显示出来了